대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행된다. 하지만 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려했을 때 효율적인 클라이언트 사이드 프로그래밍이 가능하다. 이를 위해 브라우저가 HTML,CSS,JS파일을 어떻게 파싱 하여 렌더링 하는지 알아보자! 브라우저 렌더링 과정 브라우저는 HTML,CSS,JS파일,이미지,폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML,CSS를 파싱 하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성한다. 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syn..
인터넷 브라우저에 www.daum.net을 입력하면 뒷단에서는 어떤 일이 일어나는지 과정을 알아보겠습니다. 1. 브라우저의 URL 파싱 URL을 입력받은 브라우저는 URL의 구조를 해석합니다. 어떤 프로토콜을 통해 해당 URL에 요청을 할 것인지 어떤 URL로 요청할 것인지 어떤 포트로 요청할 것인지 보통 우리는 URL을 입력해서 페이지 이동을 할 때 포트번호까지 입력하면서 이동하진 않는다. 왜냐하면 브라우저는 설정된 기본값에 의해 포트번호가 자동으로 붙기 때문이다. HTTP 라면 80 , HTTPS 라면 443 포트가 자동적으로 붙게 된다. 2.HSTS 목록 조회 HSTS(HTTP Strict transport security)란 HTTP를 허용하지 않고 HTTPS를 사용하는 연결만 허용하는 기능을 말..
쿠키와 세션을 사용하는 이유 HTTP 프로토콜의 약점을 보완하기 위해서 사용 Stateless 프로토콜 HTTP 각 요청은 독립적인 단위로 처리되며, 요청에 필요한 모든 정보가 헤더에 포함된다, 이에 따라 서버는 클라이언트의 세션 정보나 상태를 유지하지 않고, 각각의 요청에 대해 독립적으로 응답을 생성합니다. 상태 정보를 유지하지 않는다면 만약 로그인을 한후 페이지를 이동할때마다 로그인을 다시하거나 상품을 선택했는데 상품의 정보가 없는등의 일이 발생할 수 있습니다. 따라서, Stateful한 경우를 대처하기 위해 세션과 쿠키를 사용하게 됩니다. 쿠키와 세션의 가장 큰 차이점은 상태 정보의 저장 위치입니다. 쿠키는 클라이언트(로컬PC)에 저장하고 세션은 서버에 저장합니다. 쿠키(Cookie) 유저가 어떠한..
교차 출처 리소스 공유 (Cross-Origin Resource Sharing) CORS란 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 입니다. 여기서 출처(Origin)는 프로토콜,호스트,포트번호를 기반으로 구분합니다. 즉 프로토콜,호스트,포트번호가 동일하다면 이는 동일한출처(Same-Origin) 입니다. 교차출처 예시 : https://domain-a.com 의 프론트 엔드 자바스크립트 코드가 https://domain-b.com/data.json 을 요청하는경우 보안상의 이유로 브라우저는 프론트엔드측 에서 시작한 HTTP 요청을 제한합니다. XMLHttpRequest 와 FetchAPI 는 동일 출처 정책(Same-O..
