Quiz - 브라우저 렌더링, library/framework, 토큰 인증 방식

1. 브라우저 주소창에 URL을 입력하면 어떤 일이 발생하는지 설명해주세요(네트워크 + CRP)

1. 브라우저 주소창에 URL을 입력합니다.
2. 브라우저가 URL의 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인합니다.
3. 캐시에 요청한 URL이 없으면, ISP의 DNS 서버가 DNS 쿼리로 URL을 호스팅하는 서버의 IP 주소를 찾습니다.
4. 브라우저가 해당 서버와 TCP 연결을 시작합니다.
5. 브라우저가 웹서버에 HTTP 요청을 합니다.
6. 서버가 요청을 처리하고 HTTP 응답을 보냅니다.
7. 브라우저는 서버로부터 해당 주소창의 리소스인 HTML, CSS, JavaScript 파일을 받습니다.

• 그 이후 브라우저가 HTML, CSS, JavaScript를 화면의 픽셀로 바꾸는데 이 과정을 CRP라고 합니다.

1. HTML을 파싱하여 DOM을 만듭니다.
2. CSS를 파싱하여 CSSOM을 만듭니다.
3. JavaScript를 파싱하여 AST 만들고 바이트 코드로 변환하여 실행합니다.
   1. JavaScript 코드 내 DOM API를 통해 DOM과 CSSOM을 변경할 수 있습니다.
4. DOM과 CSSOM을 결합하여 Render Tree를 만듭니다.
5. Layout이 페이지의 모든 크기와 위치를 결정합니다.
6. Layout이 결정되면, 픽셀이 화면에 그려집니다.

2. 라이브러리와 프레임워크의 차이에 대해서 설명해주세요.

• 라이브러리와 프레임워크의 차이는 제어 흐름의 주도성이 누구에게 있는가에 있습니다.
  • 프레임워크는 전체적인 흐름을 스스로 갖고 있으며 사용자가 그 안에서 필요한 코드를 작성합니다.
  • 반면에 라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 사용합니다.

3. 토큰 기반 인증 방식에 대해 설명해주세요

• 토큰 기반 인증이란 인증받은 사용자에게 토큰을 발급하고, 로그인이 필요한 작업일 경우 헤더에 토큰을 함께 보내 인증받은 사용자인지 확인하는 방식입니다.
  1. 클라이언트가 서버에 접속하면 서버에서 해당 클라이언트에게 인증되었다는 의미로 고유한 토큰을 부여합니다.
  2. 토큰을 발급받은 클라이언트는 또 다시 서버에 요청을 보낼 때 요청 헤더에 토큰을 함께 보냅니다.
  3. 서버에서 클라이언트로부터 받은 토큰과 서버에서 제공한 토큰의 일치 여부를 확인하여 인증과정을 처리합니다.

참고

• Blog - 프레임워크와 라이브러리의 차이점