최근에 GET 방식으로 URL 파라미터 전송 시 인코딩 문제가 발생하였는데요, 문제원인과 해결방법을 정리해 보겠습니다. GET 방식으로 URL 파라미터 인코딩 문제 최근에  GET방식으로 암호화된 정보를 넘겨주다가 문제가 발생하였습니다. 특정 정보를 암호화하다 보니 암호화 값에 '+'값이 포함되어 서버 쪽에서는 공백으로 치환돼서 조회가 안 되는 경우가 발생하였습니다. * 치환되는 문자 리스트 (예약문자)이 문자는 URL에서 특별한 의미를 가지므로, 데이터를 안전하게 전송하려면 인코딩해야 합니다. * 안전하게 사용 가능한 문자리스트아래 문자들은 URL 인코딩 없이 그대로 사용 가능합니다.- 알파벳: A-Z, a-z- 숫자: 0-9- 일부 특수 문자: - _ . ~ 최환 되는 문자를 사용해야 한 경우 해결방..

오늘은 자바스크립트로 Json 변수를 합치는 방법을 공유하겠습니다!(초간단 주의!) 개발하다 보면  두 개의 Json 객체를 합쳐야 하는 경우가 생기는데요, 이런 경우에는 Object.assign 함수를 이용하면 쉽게 병합할 수 있습니다. Object.assign(obj1, obj2)obj1에 obj2의 값을 추가해 덮어씌우며 obj1를 리턴한다.  var jsonA = {a:1, b:2} // {a: 1, b: 2}var jsonB = {c:3, d:4} // {c: 3, d: 4}Object.assign(jsonA, jsonB) // {a: 1, b: 2, c: 3, d: 4} 결과를 보면 객체 값이 복사되는 것을 확인할 수 있다. 단, 주의! Object.assign 함수로 객체를 복사했을 때, 객..

혹시, 쿠키와 세션에 대해서 들어보셨나요? 개발자라면 한 번쯤은 들어보셨을 "쿠키", "세션" 개념과 차이점을 간단히 정리할 건데요~ 그전에 이해를 쉽게 하기 위해 HTTP 프로토콜을 먼저 정리해보겠습니다! HTTP 프로토콜이란? HTTP(Hypertext Transfer Protocol)는 W3(인터넷)에서 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 정보를 주고받을 수 있는 프로토콜입니다. HTTP 프로토콜은 애플리케이션 계층에 포함되며, TCP/IP 위에서 작동합니다. 작동방식을 예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹페이지(HTML)나 그림 정보를 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 해당 사용자에게 전달하게 됩니다 H..

HTML언어로 웹 개발을 진행시에 사용자가 입력한 내용을 입력받는 방법은 태그로 이용하는 경우가 많습니다. 예를들어, 아이디나 비밀번호, 이메일 주소, 전화번호, 날짜, 시간, 버튼 등등 다양합니다. 다양한 형식의 입력받는 방법을 정리해보겠습니다. 태그 사용자가 입력하는 내용, 텍스트나 비밀번호 같은 요소인데 이런요소을 만들때 사용하는 것이 태그 입니다. 태그로 만들 수 있는 폼 요소가 상당히 많은데, 이것은 태그 안에 type 속성으로 구분합니다. 예를들어 로 만들면 간단한 텍스트를 입력받는 텍스트 필드가 생성되며, 으로 생성하면 이벤트를 조작할 수 있는 버튼이 생성됩니다. [예시] HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. 태그에 id 속성 여러개의 태그를 이..

자바스크립트를 사용하여 웹 개발을 할때 특정 사이트로 이동하거나 새로운 웹 브라우저를 여는 다양한 효과를 사용할 때가 있습니다. 어떤 방법으로 이런 기능을 하는지 알아봅시다. 브라우저 객체 모델(BOM)이란? 웹 '브라우저'에 삽입된 각 요소를 객체로 인식하고 관리하는 것을 '브라우저 객체 모델(Browser Object Model)이라고 합니다. BOM은 자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 객체화 해놓은 것입니다. 2. Window 객체 모델 계층도 브라우저 창이 열리면 Window 객체가 만들어지며, 그 하위에 브라우저 각 요소에 해당하는 객체가 만들어집니다. 객체 설명 Window 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체, 브라우저 창 안에 존재하는 모든 요소의 최..

Date 객체란? 자바스크립트에서 날짜와 시간 정보를 처리하는 객체가 Date 객체 입니다. 자바스크립트 안에 이미 내장되어 있으며 현재 날짜와 시간을 알 수 있을 뿐 아니라 특정 날짜나 시간까지 얼마나 남았는지 등도 계산할 수 있습니다. Data 객체를 사용하기 위해서는 먼저, 인스턴스를 만든 후 내장되어 있는 함수를 사용하면 됩니다. 1. Date 객체 만들기 > 현재날짜는Mon Feb 21 2022 13:36:42 GMT+0900 (한국 표준시) 간단한 예제와 같이 new 예약어를 사용하여 Date 객체를 쓰면 됩니다. 2. Date 객체의 주요 함수 함수 이름 설명 getFullYear() 날짜 정보에서 연도(Year) 정보를 가져와 네 자리 숫자로 표시합니다. getMonth() 날짜 정보에서 ..

자바스크립트 이벤트? 자바스크립트로 이벤트 프로그램을 개발하다보면 이벤트 함수가 스스로 실행되는 경우는 많지 않습니다. 예를들어 사용자가 버튼을 누르거나 목록에서 항목을 선택해서 그에 맞는 함수가 실행되도록 프로그램을 개발하는 경우가 많습니다. 여기서 사용자가 동작 하는 것이 이벤트(event)라고 하며, Web개발을 하면서 필요한 대표적인 이벤트를 정리해보겠습니다. 자바스크립트 이벤트는 주로 마우스나 키보드를 사용할때, 웹 문서를 불러올 때, 폼(Form)에 내용을 입력할 때 주로 발생합니다. 주요 이벤트는 다음과 같습니다 1. 마우스 이벤트 속성 설명 click 사용자가 HTML 요소를 마우스로 눌렀을 때 이벤트가 발생합니다. dblclick 사용자가 HTML 요소를 마우스로 두 번 눌렀을 때 이벤트..

평소 HTML에 대해서는 알고 있었는데 개발하다보니 XHTML을 보게되었다 XHTML과 HTML 차이를 알아봅시다! Q. XHTML이란?A. XHTML(Extensible Hypertext Markup Language)은 HTML과 동등한 표현 능력을 지닌 마크업 언어로, HTML보다 엄격한 문법을 가진다. HTML이 SGML의 응용인 데 반해, 매우 유연한 마크업 언어인 XHTML은 SGML의 제한된 부분집합인 XML의 응용이다. XHTML 문서는 하나의 XML 문서로서 문법적으로 정확해야 하기 때문에, HTML과 달리 표준 XML 라이브러리를 이용한 자동화된 처리가 가능하다. XHTML 1.0은 2000년 1월 26일, W3C의 권고안이 되었다. 위키피디아 정의를 정리해보면? XHTML은 HTML과 ..

최근 자바스크립트 개발을 하면서 이벤트 핸들러 부분에 를 자주 보게되었다. 그럼 여기서 CDATA는 무엇일까?CDATA는 약자이며 'Character Data'라는 뜻을 가지고 있다. 쉽게 생각하면 '문자 데이터'를 말하는 것이다. 그런데.. 평소에 쓰는 일반 문자열 데이터랑 다른점은 무엇일까? * 위키피다아 Q. CDATA 란? A. 문자 데이터를 의미하는 CDATA 라는 용어 는 마크 업 언어 SGML 및 XML 에서 구별되지만 관련이있는 목적으로 사용됩니다 . 이 용어는 문서의 특정 부분이 문자 가 아닌 데이터 또는보다 구체적이고 제한된 구조를 가진 문자 데이터가 아니라 일반 문자 데이터 임을 나타냅니다 .출처: 여기서 핵심은 "문서의 특정 부분이 문자 가 아닌 데이터 또는보다 구체적이고 제한된 구..