[기술 면접] 📗 Browser

📋 기억하고 싶은 내용

📌 브라우저의 렌더링 과정

웹 브라우저의 구조

Critical rendering path

1. 유저가 접속하고자 하는 URL을 입력
2. 브라우저에서 사용자가 요청한 웹페이지를 파싱
3. HTML과 CSS를 DOM (계층화)
4. 화면에 표시되어야 하는 정보를 포함하는 트리

📌 Flexbox

• 행 또는 열을 기준으로 웹 요소들을 정렬하는 방식
• 크기가 유동적이어야 하는 상황에서 많이 사용
• 화면 크기에 맞춰 화면의 아이템들의 높이와 넓이를 최적의 길이로 맞춰줌

📌 CSS 애니메이션 VS JS 애니메이션

CSS 애니메이션

• Transition과 Animation 속성이 존재
• Transition은 hover나 click과 같은 이벤트 트리거에 의해 동작하고, 해당 요소의 변화를 일정 기간동안 일어나게 함
• Animation은 이벤트를 포함하여 시작, 정지, 반복까지 제어 가능
• IE를 잘 지원하지 않음
• CSS만 관리하면 되기 때문에 편리함

JS 애니메이션

• setInterval()과 같은 함수를 활용해 요소에 변화를 줌
• 크로스 브라우징 측면에서는 JS 애니메이션이 선호됨
• 요소 하나하나와 동작을 관리해줘야 함
• 세밀한 동작까지 변형을 줄 수 있음

📌 브라우저 저장소의 차이점

localStorage

• 가장 간단하게 key-value 저장
• 최대로 저장할 수 있는 용량(약 5~10MB)의 제한이 있음
• 도메인이 같으면 전역적으로 데이터 공유

sessionStorage

• 브라우저를 종료하면 초기화 (새로고침은 제외)
• 게시판의 자동 임시 저장 용도로 자주 활용
• 도메인이 같아도 브라우저가 다르면 데이터 공유가 안됨 (브라우저 마다 별도의 sessionStorage가 생성됨)

Cookie

• 데이터 유효 기간을 지정할 수 있음
• 저장할 수 있는 용량이 작은데, 그 이유는 서버로 데이터를 전송할 때마다 쿠키 데이터가 담겨서 전송되기 때문임

📌 SSR VS CSR

SSR(Server Side Rendring)

• 페이지 내용을 서버에서 그린 다음 브라우저로 전달
• 페이지를 이동할 때마다 서버에 새로운 페이지 요청
• 초기화면 로딩 속도가 빠름
• 잦은 서버 요청에 따른 부하가 있을 수 있음

CSR(Client Side Rendering)

• 페이지 내용을 브라우저에서 그림
• React를 예로 보면 index.js 파일만 로드하는 경우 (Single Page Application)
• 웹봇이 크롤링할 때는 웹이 로드되기 전의 빈 상태 코드를 크롤링하기 때문에 SEO에 단점이 있음
• 초기 로딩 이후 SSR보다 로딩 속도가 빠름

기존에는 페이지를 이동할 때마다 서버에 리소스를 요청하고 화면에 렌더링하는 방식을 사용했다면 최근의 웹 트렌드는 브라우저 로드 시 페이지 전체를 로드한 다음 새로운 페이지 갱신에 필요한 데이터 만을 전달받아 페이지를 갱신함. 대표적으로 React, Vue, Angular가 있음

📌 CORS(Cross-Origin Resource Sharing)

• 도메인이 다르면 요청을 주고 받을 수 없게 하려는 초기 웹 브라우저의 정책으로 인해 발생한 문제

cross-origin 케이스

• 프로토콜(http, https), 도메인, 포트 번호가 다른 경우

해결 방법

• 프론트의 경우 Reqeust Header에 CORS 관련 옵션을 추가하고, 서버 개발자에게 CORS 허용을 요청함
• 프록시 서버를 통한 우회 (외부 도메인 서버에 바로 요청하는 것이 아닌 프록시 서버를 통해 외부 서버에 요청한 다음 결과 값을 받는 방법)

🔗 참고 래퍼런스

• 브라우저의 렌더링 과정
• Flexbox - MDN
• CSS 애니메이션 VS JS 애니메이션
• 브라우저 저장소에 대해서 설명해보세요.
• SSR과 CSR의 차이
• CORS 개념 완벽 정리 & 해결 방법