Quiz - 브라우저, wepack, SPA/MPA, CORS, bundle 최적화, 로그인

1. 브라우저 렌더링 과정에 대해 설명해보세요. (Critical Rendering Path)

• 브라우저는 HTML, CSS, JavaScript, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 서버에 요청하고 서버로부터 리소스들을 응답받습니다.
  • 브라우저의 렌더링 엔진은 서버로부터 응답받은 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이를 결합하여 렌더 트리를 생성합니다.
  • 브라우저의 JavaScript엔진은 서버로부터 응답받은 JavaScript를 파싱하여 AST(Abstact Syntax Tree, 추상적 구문 트리)를 생성하고 바이트코드로 변환하여 실행합니다.
    • 이때 JavaScript는 DOM API를 통해 DOM이나 CSSOM를 변경할 수 있고, 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됩니다.
  • 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅합니다.

1.1 브라우저 주소창에 url을 입력하면 어떤 일이 발생하는지에 대해 설명해주세요. (네트워크 관점)

1. 브라우저 주소창에 URL을 입력합니다.
2. 브라우저가 URL의 IP 주소를 찾기 위해 캐시에서 DNS(Domain Name System) 기록을 확인합니다.
3. 캐시에 요청한 URL이 없으면, ISP(Internet Service Provider)의 DNS 서버가 DNS 쿼리로 URL을 호스팅하는 IP 주소를 찾습니다.
4. IP 주소를 찾으면, 브라우저가 해당 서버와 TCP 연결을 합니다.
5. 브라우저가 웹 서버에 해당 url에 대한 HTML 페이지를 HTTP 요청합니다.
6. 서버가 HTML 페이지를 body에 담아서 HTTP 응답합니다.
7. 브라우저가 응답받은 HTML 페이지를 보여줍니다.

2. 브라우저는 어떻게 동작 하나요?

• 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다.
• 먼저 브라우저는 사용자가 요청한 HTML 파일을 서버로부터 전달받습니다.
• 렌더링 엔진은 전달 받은 HTML을 파싱해서 DOM 트리를 구축합니다. 그리고 외부 CSS 파일과 스타일 요소도 파싱하여 CSSOM 트리도 구축합니다.
• DOM 트리와 CSSOM 트리를 합쳐서 렌더트리를 만듭니다.
• 렌더 트리의 각 노드에 대해 화면 상에 어디에 배치할지 결정합니다.
• 렌더트리를 화면에 출력합니다.

3. Webpack, Babel, Polyfill에 대해 설명해주세요.

• Webpack은 다양한 모듈을 하나의 파일로 묶어주는 번들러입니다.
• Babel은 ES6 이상의 코드를 하위 호환 버전의 코드로 바꿔주는 JavaScript 컴파일러입니다.
• Polyfill은 타겟 브라우저에서 지원하지 않는 기능을 구현한 코드를 말합니다.

4. ESLint와 Prettier에 대해 설명해주세요.

• ESLint는 설정가능한 JavaScript Liter입니다.
  • JavaScript 코드에서 문제를 찾아서 해결할 수 있도록 도와줍니다.
  • 문제는 잠재적인 런타임 버그부터 모범 사례를 따르지 않는 것, 스타일링 문제까지 다양합니다.
• Prettier는 JavaScript, JSX, CSS, HTML 등을 지원하는 코드 포맷터입니다.
  • 모든 기존 스타일을 제거하고, 모든 코드가 일관적인 스타일을 갖도록 보장해줍니다.

Prettier와 ESLint의 차이에 대해 설명해주세요.

• Prettier는 코드를 포매팅하는데 사용하고, ESLint는 버그를 잡는데 주로 사용됩니다.
  • Prettier는 max-length, no-mixed-spaces-and-tabs과 같은 포맷팅 룰을 적용하여 전체적인 프로그램을 일관성있게 출력해줍니다.
  • ESLint는 no-unused-vars, no-implicit-globals와 같은 코드 퀄리티 룰을 적용하여 버그를 잡을 수 있게 해줍니다.

5. SPA와 MPA에 대해 설명해주세요.

• SPA는 Single Page Application으로 기본적으로 단일 페이지로 구성됩니다.
  • 최초 접근시 웹 애플리케이션에 필요한 모든 정적 리소스를 다운로드합니다. 이후 새로운 페이지 요청할 때, 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신합니다.
  • 전체적인 페이지를 리렌더링하지 않고 변경된 부분만 갱신하므로 전체적인 트래픽을 감소시킬 수 있고, 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있습니다.
• MPA는 Multi Page Application으로 URL별로 여러 페이지로 구성됩니다.
  • 브라우저에서 변경 사항이 있을 때 서버에 데이터를 전달하여 새로운 페이지 렌더링을 요청하고 그 페이지를 보여줍니다.
  • MPA를 대표적으로 사용하는 곳은 e-commerce입니다.
    • MPA는 온라인 쇼핑, 시장, 온라인 카탈로그에 잘 작동하기 때문입니다.
    • Amazon이나 eBay 등에서 MPA를 사용하고 있습니다.

6. CSR과 SSR의 차이는 무엇인가요?

• CSR은 클라이언트에서 페이지를 렌더링하는 방식이고, SSR은 서버에서 페이지를 렌더링하는 방식입니다.
• CSR은 새로고침이 발생하지 않아서 사용자 경험을 높여주지만 SEO 이슈가 있습니다. SSR은 페이지를 변경할 때마다 새로고침이 발생하지만 SEO 최적화되어 있습니다.

7. CORS와 해결 경험에 대해 설명해주세요.

• CORS는 Cross Origin Resource Sharing의 약어로 웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스펙을 말합니다.

  • 웹 애플리케이션은 자신의 출처(도메인, 프로토콜, 포트)와 다른 자원을 요청할 때 CORS HTTP 요청을 합니다.

• 해결방식

  1. 서버에서 HTTP 헤더의 access-control-allow-origin에 허용하고자 하는 도메인을 설정합니다.
     • 브라우저에서 요청에 쿠키나 인증 헤더 정보를 포함시켜 요청하고 싶다면 API 요청시 withCredentials 옵션을 true로 설정해주어야 합니다.
  2. 프론트엔드에서 proxy 서버를 도입하여 브라우저에서 보내는 요청을 가로채서 서버의 출처를 동일하게 설정합니다.
     • react의 경우, 'http-proxy-middleware' 모듈을 사용하여 구현할 수 있습니다.
  3. 웹 브라우저 실행 시 외부 요청을 허용하는 옵션을 사용합니다.
     • 크롬의 경우, --disable-web-security 옵션을 추가하여 크롬을 실행합니다.
  4. Chrome 확장 프로그램인 'Allow CORS: Access-Control-Allow-Origin' 설치하여 활성화시킵니다.

8. bundle의 사이즈를 줄이려면 어떻게 해야 하나요?

1. 이미지 파일을 압축합니다.
   • squoosh 사이트를 사용하여 이미지를 리사이징합니다.
   • 번들러로 webpack을 사용할 경우, image-webpack-loader 라이브러리를 사용하여 이미지를 압축합니다.

// wepback.config.js
module: {
  rules: [
    {
      test: /\.(png|jpg|jpeg|gif|webp)$/i,
      loader: 'image-webpack-loader',
      enforce: 'pre',
    },
  ]
}

• 이미지 포맷은 svg 또는 webp를 사용합니다.
  • webp을 사용하면 jpg보다 가볍고 png만큼 좋은 화질을 가진 이미지를 사용할 수 있습니다.
  • webp는 구형 브라우저에서 지원하지 않으므로 webp를 읽을 수 없는 브라우저에서 대체용 이미지를 대신 보여주는 처리를 해야합니다.

<picture>
  //webP를 로드할 수 있으면 이를 사용하고
  <source srcset="logo.webp" type="image/webp">
  
  //그게 아니라면 png 이미지를 사용해라
  <img src="logo.png" alt="logo">
</picture>

2. 압축 라이브러리를 사용합니다.

   • webpack의 경우, terser-webpack-plugin을 설치하여 코드를 최소화합니다.
   • vite의 경우, esbuild를 기본적으로 esbuild를 사용하여 최소화하며 terser보다 20 ~ 40배 빠르게 실행됩니다.

3. 크기가 큰 라이브러리를 크기가 작은 라이브러리로 대체합니다.

9. 쿠키, 세션, 웹 스토리지의 차이에 대해 설명해주세요.

• 쿠키와 웹 스토리지는 클라이언트인 브라우저에 저장되고 세션은 서버에 저장됩니다. 쿠키는 최대 4KB까지 저장 가능합니다. 웹 스토리지는 대부분의 브라우저에서 2MB까지 저장 가능합니다. 반면에 세션은 서버에 저장하고 싶은 만큼 저장할 수 있습니다.
• 쿠키는 HTTP 헤더를 통해 조작하고, 웹 스토리지는javaScript를 사용하여 조작합니다. 세션은 세션 관련 함수를 사용하여 조작합니다.
• 쿠키는 설정된 생명주기에 따라 삭제됩니다. 웹 스토리지 중 세션 스토리지는 브라우저 창이 닫히면 삭제되고, 로컬 스토리지는 브라우저 창이 닫혀도 유지됩니다. 세션은 브라우저가 닫힐 때 삭제됩니다.

9.1 브라우저에서 탭 이동 혹은 탭 종료 시에는 세션 스토리지에 어떤 영향을 끼치나요?

• 탭 이동시에는 세션 스토리지가 유지되지만, 탭 종료시에는 해당 탭의 세션 스토리지가 삭제됩니다.

10. 로그인 처리를 할 때 쿠키와 세션을 어떻게 사용하나요?

1. 클라이언트가 서버에 접속할 때 세션 ID를 발급 받습니다.
2. 클라이언트는 세션 ID에 대해 쿠키를 사용해 저장해서 갖고 있습니다.
3. 클라이언트가 서버에 클라이언트 정보를 요청할 때 쿠키의 세션 ID를 같이 전달합니다.
4. 서버는 세션 ID를 전달받아서 세션 ID에 해당하는 세션의 클라이언트 정보를 가져옵니다.
5. 서버는 클라이언트 정보를 가지고 클라이언트에게 응답합니다.

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

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

11.1 JWT 토큰을 쿠키에 저장했을 때 취약점에 대해 설명해주세요.

• CSRF 공격의 위험이 있습니다.
  • CSRF 공격 : Cross-Site Request Forgery의 약어로 신뢰할 수 있는 사용자를 사칭하여 원치 않는 명령을 웹 사이트로 전송하는 공격을 말합니다.
  • 사용자도 모르게 계정 탈퇴, 댓글 포스트 자동 작성, 회원 정보 변경 등이 일어날 수 있습니다.
  • 해결 방법 : 쿠키에 SameSite 설정을 하여 다른 도메인에서 쿠키를 확인하거나 수정하지 못하게 합니다.

참고

• Navaer D2 - 브라우저는 어떻게 동작하는가?
• Babel Official Docs - What is Babel?
• ESLint Official Docs - Core Concepts
• Prettier - What is Prettier?
• Prettier - Prettier vs. Linters
• PoiemaWeb - Single Page Application & Routing
• Blog - SPA VS MPA: WHAT TO CHOOSE?
• MDN - CORS
• Blog - CORS에 대처하는 방법과 우회하는 방법
• Blog - CORS 에러와 해결법
• Blog - Web Storage APIs, Cookie and Session
• Blog - 쿠키와 세션 개념
• Blog - JWT 토큰 인증 이란? (쿠키 vs 세션 vs 토큰)
• Blog - JWT accessToken 과 refreshToken 을 어떻게 활용해야할까?