CORS는 무엇인가요?
CORS는 교차 출처 리소스 공유라는 뜻으로, 서로 다른 도메인에서 리소스 요청을 제한하는 것을 의미합니다.
기본적으로 브라우저는 다른 출처의 자바스크립트의 실행을 막습니다. 이는 악의적인 스크립트의 실행으로 인한 정보 탈취 등을 막기 위함입니다. 브라우저는 URL, 프로토콜, 포트 및 호스트 명 중 하나라도 다를 경우, 브라우저는 교차 출처라고 간주합니다.
이런 에러를 해결하기 위해, Access-Control-Allow-Origin를 헤더를 설정하여 해결할 수 있습니다.
JWT(JSON Web Token)란 무엇인가요?
JWT는 주고 사용자의 인증 혹은 인가 정보를 JSON 형식으로 서버와 클라이언트 간에 안전하게 주고받기 위해 사용되는 매커니즘입니다.
JWT은 Base64로 인코딩되어있습니다.
JWT은 Header, Payload, Signature의 구조로 되어 있으며, 세 부분을 점(dot)으로 구분합니다. Header 부분에는 토큰의 유형과 서명 알고리즘이, Payload에는 사용자의 인증 인가 정보가, 마지막 Signature 부분에는 Header와 Payload가 비밀 키로 서명되어 작성됩니다.
JWT을 사용하면, 쿠키나 세션을 사용하여 인증/인가를 구현할 때와 비교하면, 사용자의 세션을 DB나 캐시에 저장하여 매번 쿠키로 넘어온 사용자 데이터를 조회하지 않아도 되기 때문에, 인프라 비용을 절감할 수 있고 CORS 문제에서 벗어날 수 있다는 장점이 있습니다.
그러나, 사용자가 여러 기기에 로그인한 정보를 띄워주고, 특정 기기에서 로그아웃하는 기능을 구현하기에는 어렵다는 한계가 있습니다. 또한, JWT에 저장된 데이터는 누구나 쉽게 열람할 수 있기에, 보안 면에서 더욱 각별한 주의가 필요합니다.
RESTful API란 무엇인가요? RESTful API의 주요 원칙은 무엇인가요?
RESTful API란, REST의 기본 원칙을 준수해서 설계된 API를 뜻합니다.
REST API는 URL로 표현되는 자원, HTTP 요청 메서드로 표현되는 행위,데이터를 어떻게 표현할 것인가를 나타내는 표현의 세 가지 요소로 구성됩니다.
RESTful API에서 가장 중요한 기본 원칙으로, 첫 번째로는 URL은 리소스를 표현해야 한다는 것입니다. 유저라는 리소스를 나타낸다면, /users라는 식으로 작성해야 하고, 동사나 행동을 나타내는 단어(getUsers/deleteUsers)를 포함해서는 안됩니다.
두 번째로는 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다는 것입니다. GET, POST, PUT, PATCH, DELETE의 다섯 가지 메서드를 사용하는 방식으로 동작합니다.
그리고 데이터의 표현 방식은 일반적으로 XML과 JSON 형식이 있습니다.
PATCH와 PUT의 차이점은 무엇인가요?
PATCH와 PUT 모두 기존에 존재하는 리소를을 업데이트(변경)하는 메서드지만, PUT은 완전히 새로운 리소스로 대체할 때 사용되고, PATCH는 기존에 존재하던 리소스의 일부분을 수정할 때 사용됩니다.
검색창에 google.com을 치면 생기는 일
- 사용자가 브라우저 주소 창에 google.com을 입력하면 브라우저는 내가 입력한 텍스트가 검색어인지, url인지 판별한다.
- 검색어가 URL이면 브라우저는 해당 사이트를 호스팅하는 IP 주소를 찾는다.
- DNS(Domain Name Service) 조회를 수행하여 도메인 이름을 기반으로, 서버의 IP주소를 찾는다. (IP 주소는 기억하기 어렵기 때문에 도메인 네임을 사용한다.)
- 브라우저가 서버에 연결되면 HTTP 요청을 보내면 서버가 요청을 처리하고, 응답을 다시 전송한다.
- 다음으로 이제 브라우저가 데이터를 받으면 렌더링 과정이 시작된다.
- 먼저 HTML과 CSS를 파싱하여 각각 DOM 트리와 CSSOM 트리를 생성한다.
- CSSOM 트리는 렌더링 차단 리소스로 간주되어 완전히 파싱되어야만 렌더 트리 구성이 가능하다. 따라서 first meaningful paint를 빠르게 달성할 수 있도록, css를 head에 배치해야하는 이유이다.
- 렌더 트리를 구성하는 도중, 자바스크립트 코드를 만나면, 파싱을 중단하고 자바스크립트를 실행하고, 자바스크립트 실행을 마친 뒤에 다시 파싱을 진행한다.
- 다음으로 파싱이 완료된 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다. 렌더 트리는 실제로 화면에 표시되는 요소들로 이루어진 트리 구조로, 각 요소의 스타일, 크기, 위치 등의 정보를 가지고 있다. display:none 과 같이 화면에 보이지 않는 스타일을 가진 요소는 이 DOM 트리에서 제외된다.
- 다음으로 렌더 트리를 기반으로 화면에 배치하는 레이아웃을 계산하는 reflow 단계를 거친다. 이 과정에서 뷰포트 크기, 요소의 크기, 위치, 여백 등을 고려하여 요소들의 정확한 배치를 계산한다. 레이아웃 계산이 완료되면 렌더 트리에 반영된다.
- 마지막으로 브라우저가 렌더 트리의 각 노드를 실제 화면에 그리는 페인팅을 한다. 이 과정에서 각 요소의 스타일, 배치 정보를 기반으로 실제 픽셀로 변환하여 화면에 그린다. 이 단계에서는 컨텐츠가 실제로 그려지는 시점이다.
- 리플로우(Reflow) 스타일이나 DOM이 변경되었을 시에 각 요소들의 크기와 위치를 다시 계산하는 과정
- 리페인팅(Repainting): 요소의 색깔, opacity 등의 시각적 요소만 변경되는 경우
화면의 레이아웃이 변경되었을 때는 리플로우와 리페인팅이 발생합니다. 렌더링 최적화를 위해서는 리플로우를 최소화해야 합니다.
