본문 바로가기

728x90
반응형

전체 글

(265)
[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..
[Javascript] Event의 종류 이벤트(Event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때 혹은 웹 페이지가 로드되었을 때와 같은 것인데 이는 DOM 요소와 관련이 있다. 이벤트가 발생하면 그에 맞는 반응을 해야 한다. 이를 위해 이벤트는 일반적으로 함수에 연결되는데, 해당 함수는 이벤트가 발생하기 전까지는 실행되지 않다가 이벤트 발생 시 비로소 실행된다. 이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다.     자바스크립트 이벤트의 종류  UI Event Event Descriptionload웹 페이지나 스크립트의 로드가 완료되엇을 때unload웹 페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우)error브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재..
[WEB] HTTP의 Connectionless 비연결성(Connectionless)HTTP는 기본적으로 연결을 유지하지 않는 모델이다. 즉 서버와 클라이언트의 connection을 지속하지 않는다.1시간 동안 수천 명 이상이 서비스를 사용해도 실제 서버에서 동시에 처리하는 요청은 수 십 개 이하로 적다.이러한 비연결성의 특징으로 인해 서버 자원을 효율적으로 사용할 수 있다.  Stateless와 Connectionless의 차이Stateless(무상태성): 필요한 상태에 대한 정보를 클라이언트가 가지고 오기 때문에 클라이언트의 요청에 어느 서버가 응답해도 상관 없음. 따라서 클라이언트의 요청이 대폭 증가하면 서버를 증설해 해결 가능.Connectionless(비연결성):  클라이언트가 서버에 요청을 하고 응답을 받으면 바로 TCP/IP 연결을 끊어 ..
[WEB] HTTP의 Stateful과 Stateless 클라이언트(client)와 서버(server) 간의 통신을 상태 유지하느냐(stateful), 상태 유지하지 않느냐(stateless) 같은 말을 한 번쯤은 들어봤을 것이다. 여기서 '상태'라는 건 어떤 정보를 말하는 거 같은데  stateful과 stateless에 대해 좀 더 파악해 보는 시간을 가져보려 한다.  Stateful(상태 유지)  상태 유지라는 건 클라이언트와 서버 사이의 관계에서 서버가 클라이언트의 상태를 보존하는 것을 의미한다. 클라이언트와 서버 간에 송수신을 하며 단계별 과정들을 진행하는 데 있어 서버에서 클라이언트가 이전 단계에서 제공한 값을 저장하고 다음 단계에서도 저장한 상태이다. 대표적인 예로 홈페이지에서 회원 로그인을 하면 페이지를 이동해도 서버는 클라이언트의 상태를 유지(..

728x90
반응형