공부하자

호이스팅 호이스팅은 코드가 실행되기 전 변수선언이나 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것처럼 동작하는 것을 말한다. 변수 호이스팅 자바스크립트의 모든 선언에는 호이스팅이 일어난다. 하지만 let, const, class를 이용한 선언문은 호이스팅이 발생하지 않은 것처럼 동작한다. var 키워드로 선언한 변수는 선언문 이전에 참조를 하면 undefined가 뜨지만, let 키워드로 선언한 변수는 선언문 이전에 참조를 하면 ReferenceError가 뜬다. 마치 호이스팅이 발생하지 않은 것처럼 동작한다. 하지만 그렇지않다. 이를 설명하기 위해 간단히 변수가 생성되는 3단계를 보자. 선언 단계 변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. 초기화..

모듈패턴 자바스크립트는 원래 모듈이라는 개념이 없고 하나의 파일에 모든 코드를 담았다. 하지만 그러기에는 코드 양이 방대해지기도 하고, 가독성도 떨어지고 무엇보다 웹 애플리케이션이 예전보다 훨씬 복잡하고 고도화되어져서 모듈패턴이 생기게 된 것이다. 모듈 패턴은 전체 애플리케이션의 일부를 독립된 코드로 분리한 것을 말하는데, 이 방식도 한계가 있다. 프로그램이 커질수록 세분화된 파일이 많아지므로 각 변수들의 스코프나 호출 시 발생하는 네트워크 비용에 더 신경써야 하는 것이다. 모듈의 문제점을 보완하기 위해 나온것이 번들링이다. 기능별로 모듈화된 파일을 다시 하나로 묶어주는 것이다. Webpack 번들링 기능이 있는 번들러에는 여러 가지가 있지만 대표적으로 웹팩이 있다. 가장 많이 사용되는 번들러이기도 하고..

React.js나 Next.js로 프로젝트를 시작하면 한번쯤은 고려해보게되는 CSR과 SSR. SSG와 함게 대표적인 웹 페이지를 렌더링하는 방식인데, 둘의 차이점과 추가적으로 알아두면 좋을 정보들을 정리해보았다. 웹 페이지를 렌더링하는 방식 초창기때만 하더라도 모든 웹페이지가 정적 페이지였다. 그래서 페이지를 이동하거나 어떠한 변화가 보일때마다 서버로부터 새로운 HTML을 받아 리렌더링을 해야했다. 매번 전체 페이지를 재생성해야 했기때문에 당연히 부담이 가고, 사용자 경험에 있어서도 좋지 못했다. 그래서 탄생하게 된 것이 Ajax(Asynchronous Javascript and XML)이다. Ajax는 자바스크립트를 통해서 브라우저와 서버가 비동기로 데이터를 주고받을 수 있게 해주었다. 그래서 매번 ..

this란? 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 단위구조이다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 따라서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다. 이를 위해 자바스크립트는 this라는 특수한 식별자를 제공한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 함수 호출 방식에 따..

JWT에 대해 알아보기 전 먼저 토큰에 대해서 알아보자. Token 토큰은 보통 서버가 클라이언트 인증을 확인하는 방식 중 하나이다. 토큰 기반 인증 시스템은 클라이언트가 서버에 접속을 하면 서버에서 해당 클라이언트에 인증되었다는 의미로 '토큰'을 부여한다. 이 토큰은 유일하며 토큰을 발급받은 클라이언트는 또다시 서버에 요청을 보낼 때 요청 헤더에 토큰을 심어서 보낸다. 그러면 서버에서는 클라이언트로부터 받은 토큰을 서버에서 제공한 토큰과의 일치 여부를 체크하여 인증 과정을 처리하게 된다. 토큰은 앱과 서버가 통신 및 인증할 때 많이 사용된다. 웹에는 쿠키와 세션이 있지만 앱에는 없기 때문이다. JWT(JSON Web Token) JWT는 인증에 필요한 정보들을 암호화시킨 JSON토큰을 말한다. 그리고 ..

DOM이란? Document Object Model의 약자이고, 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. 즉, HTML과 스크립팅 언어(javascript)를 서로 이어주는 역할을 한다. DOM을 문서 객체 모델이라고 하는데 여기서 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는(메모리에 보관할 수 있는) 객체를 의미한다. [ Virtual DOM을 사용하는 이유 ] 큰 규모의 웹 어플리케이션은 수많은 데이터가 로딩된다. 데이터가 로딩될때마다 수많은 요소들이 DOM에 직접 접근하여 변화를 주다 보면 로딩 속도가 느려질 가능성이 크다. 이는 DOM 자체가 느려지는 걸 의미하는 게 아니다. ..

http 프로토콜의 한계를 보안하기 위해 쿠키 또는 세션을 사용한다. 기본적으로 HTTP 프로토콜 환경은 비연결지향(connectionless), 무상태(stateless)한 특성을 가지기 때문에 요청만으로 서버는 클라이언트를 구별할 수 없다. 비연결성지향(connectionless) HTTP는 먼저 클라이언트가 요청을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답을 보내고 TCP/IP 연결을 끊는 특성이다. HTTP 1.1에서는 헤더에 keep-alive라는 값을 줘서 커넥션을 재활용한다. 무상태(stateless) 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이다. 쿠키 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일. HTTP..

계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 이벤트가 전파되는데 전파방향에 따라 버블링과 캡처링으로 구분할 수 있다. 주의할 것은 버블링과 캡처링은 둘 중에 하나만 발생하는 것이 아니라 캡처링부터 시작하여 버블링으로 종료한다는 것이다. 를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파된다.(버블링 단계). 이런 과정을 통해 요소에 할당된 이벤트 핸들러가 호출된다. 이벤트 버블링 자식요소에서 발생한 이벤트가 부모 요소까지 전파하는 것. FORM DIV P 위의 코드를 실행하게 되면 만약 p를 누르면 p -> div -> form 순서대로 alert이 뜨게된다. di..