본문 바로가기

728x90
반응형

분류 전체보기

(269)
[Javascript] XMLHttpRequest로 AJAX 요청하기 AJAX(Asynchronous Javascript And XML)AJAX는 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신할 수 있게 해 준다. AJAX를 이용하면 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. AJAX를 통한 웹 브라우저와 웹 서버 간의 통신 절차는 다음과 같다.사용자에 의한 요청 이벤트 발생.요청 이벤트 발생 시 이벤트 핸들러에 의해 자바스크립트가 호출.자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냄.서버는 전달 받은 XMLHttpRequest 객체를 가지고 요청을 처리.서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 응답 데이터를 생성 및 웹 브라우저에 전달.이때 전달되는 응답은 ..
[WEB] URL과 URI와 URN 브라우저를 통해 웹을 이용해 온 우리에게 URL이라는 단어는 익숙할 것이다. 하지만 가끔 뭔가 비스무리하면서도 다른 듯한 URI나 URN이라는 단어를 사용하기도 하는데 이번 포스트에서는 URL과 URI, URN의 명확한 차이에 대해 알아보려 한다.   위 그림에서 볼 수 있듯 URI는 URN과 URL을 포함하는 개념이다. 이들의 각 뜻은 다음과 같이 정의할 수 있다.    URI: 자원의 식별자URL: 위치(Location)URN: 이름(Name)      URI(Uniform Resource Identifier) 통합 자원 식별자(Uniform Resource Identifier)는 인터넷에 있는 자원을 어디에 있는지 자원 자체를 식별하는 방법이다.Uniform: 리소스를 식별하는 통일된 방식Resou..
[WEB] HTTP 메시지 개발자 도구의 네트워크 창에서 서버로부터 다운 받은 파일을 눌러 보면 아래와 같이 Headers 탭에 적혀 있는 것을 본 적 있을 것이다. 이는 클라이언트와 서버 간에 HTTP 메시지를 통해 통신한 이력이라고 이해할 수 있다.  Request Headers는 클라이언트가 서버에 보내는 HTTP 메시지 이력이며, Response Headers는 서버가 클라이언트에 응답하는 HTTP 메시지 이력이다.    HTTP 메시지 구조 HTTP 메시지는 기본적으로 위에서부터 차례대로 시작 라인(Start Line), 헤더(Header), 공백 라인(Empty Line 또는 Blank Line), 바디(Message Body)로 구성되어 있다. 이중 공백 라인의 경우 HTTP 메시지 값 구분을 하기 위한 라인이므로 단..
[Javascript] console 사용 시 쉼표(,)와 +의 차이 , 를 사용하면 별도의 객체로 반환되어 내부 값을 확인 가능함. + 를 사용하면 toString()이 호출되어 문자 타입으로 형변환 후 값이 반환되어 객체 내부의 값을 확인 불가능함. 예시 1)let array = [ { a: 1, b: 2 }, { a: 3, b: 4 }, { a: 5, b: 6 },];console.log('logging with ,: ', array); // logging with ,: (3) [{…}, {…}, {…}]console.log('logging with +: '+ array); // logging with +: [object Object],[object Objec..
[Javascript] 이벤트 캡처링 지난 포스트에서 이벤트 버블링(bubbling)에 대해 소개한 바 있다. [Javascript] 이벤트 버블링버블링(bubbling)의 원리는 간단하다. 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작한다. 이러한 과정이 가장 최상단의 조상 요소를 만날developing-move.tistory.com   이벤트에는 버블링 외에도 캡처링(capturing)이라는 흐름이 존재한다. 실제 코드에서는 자주 쓰이지 않지만 종종 유용한 경우가 있으니 알아보도록 하자. cf) 캡처링 단계를 이용해야 하는 경우는 흔치 않기 때문에, 캡처링에 관한 코드를 발견하는 일은 거의 없을지도 모른다. 표준 DOM 이벤트에서 정의한 이벤트 흐름에는 아래의 3가지 단계가 있다. 캡처..
[Javascript] Event 객체 Event 객체는 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 유용한 정보들을 제공한다. 이벤트가 발생하면 Event 객체는 동적으로 생성되며 이벤트를 처리할 수 있는 이벤트 핸들러에 인자로 전달된다.  클릭한 곳의 좌표가 표시됩니다.  위와 같이 Event 객체는 이벤트 핸들러에 암묵적으로 전달된다. 그러나 이벤트 핸들러를 선언할 때 event 객체를 전달 받을 첫 번째 매개변수를 명시적으로 선언해야 한다(위 예시에서의 e).   Event 객체 속성 종류  Event.target 실제로 이벤트를 발생시킨 요소를 가리킨다. 단, 버블링에 의해 쌩뚱맞는 다른 target이 인식될 수도 있다.   Event.currentTarget 코드에서 이벤트에 바인딩된 DOM 요소를 가리킨다. 즉 addEv..
[WEB] HTTP 상태 코드 HTTP Status CodeHTTP의 상태 코드는 클라이언트가 보낸 HTTP 요청이 성공했는지 실패했는지 서버에 알려주는 숫자 코드다. 개발자 도구의 Network 탭을 보면 아래와 같이 Status 숫자 코드로 요청의 결과를 간략히 나타내 주는데 클라이언트를 다루는 입장에서는 이 숫자를 보고 곧바로 결과를 유추할 수 있게 된다.  HTTP 상태 코드는 3자리 숫자로 이루어져 있으며 100번대부터 500번대까지 존재한다. 그리고 각 상태코드의 첫 번째 자리는 최상위 코드가 되어 다음과 같이 5개의 그룹으로 나뉘어 관리된다.    1XX: 요청이 수신되어 처리중 2XX: 요청 정상 처리 3XX: 요청을 완료하려면 추가 행동이 필요 4XX: 클라이언트 오류. 잘못된 문법 등으로 서버사 요청을 수행할 수 없..
[Javascript] 이벤트 핸들러와 this 인라인 방식 이벤트 핸들러에서의 this인라인 방식의 경우 이벤트 핸들러는 일반 함수로써 호출되므로 이벤트 핸들러 내부의 this는 전역 객체 window를 가리킨다.Button    프로퍼티 방식 이벤트 핸들러에서의 this프로퍼티 방식에서 이벤트 핸들러는 method이므로 이벤트 핸들러 내부의 this는 이벤트에 바인딩된 요소를 가리킨다. 이는 이벤트 객체의 currentTarget 프로퍼티와 같다.Button    addEventListener 방식에서의 thisaddEventListener에서 지정한 이벤트 핸들러는 콜백 함수지만 이벤트 핸들러 내부의 this는 이벤트 리스너에 바인딩된 요소(currentTarget)를 가리킨다. 이는 이벤트 객체의 currentTarget 프로퍼티와 같다.But..

728x90
반응형