기술면접-컴퓨터공학(웹)-3

1. 주소창에 URL을 입력했을 때, 어떤 과정으로 웹사이트가 보여지는지?

브라우저는 입력된 URL을 해석하여 해당하는 웹사이트의 도메인명을 파악합니다. 도메인명을  IP 주소로 변환하기 위해 DNS에 요청을 보냅니다. 브라우저는 DNS에서 받은 IP 주소로 해당 서버에 TCP/IP 연결을 시도합니다. 연결이 설정되면, 브라우저는 HTTP 요청 메시지를 서버에게 보냅니다. 서버는 브라우저로부터의 요청을 받아들이고, 해당하는 리소스를 찾아서 브라우저에게 응답으로 보냅니다. 브라우저는 서버로부터 받은 응답을 해석하여 사용자에게 보여줄 웹 페이지를 렌더링합니다.

 

2. 브라우저 렌더링 과정?

브라우저는 서버로부터 받은 HTML 문서를 파싱하여 DOM 트리를 생성합니다. HTML 문서 안에 포함된 CSS 스타일 시트를 파싱하여 CSS 객체 모델을 생성합니다. 이후, DOM 트리와 CSS 객체 모델을 결합하여 렌더링 트리를 생성합니다. 렌더링 트리의 각 노드에 대해 화면에서의 정확한 위치와 크기를 계산합니다.(레이아웃 또는 리플로우)화면에 표시되어야 할 요소들을 실제로 그려 화면에 표시합니다.(페인팅) 중간에 javascript 코드가 있을 경우, 파싱과 레이아웃, 페인팅을 중단하고 javascript 코드를 실행합니다. 실행이 끝나면 다시 렌더링 과정을 시작합니다. 사용자의 상호작용 또는 javascript 실행에 의해 페이지의 일부가 변경되는 경우 해당 부분을 다시 렌더링 합니다.(리플로우, 리페인트)

 

3. 브라우저 저장소의 차이점?

쿠키 (4KB) :

• 클라이언트 측에 작은 텍스트 파일로 저장됩니다.
• 주로 사용자의 상태 정보를 유지하거나 인증을 위해 사용됩니다.
• 서버와 클라이언트 간의 상태를 유지하기 위해 HTTP 요청 헤더에 함께 전송됩니다.

로컬 스토리지(5~10MB):

• 클라이언트 측에서 JavaScript를 사용하여 데이터를 저장하고 검색할 수 있습니다.
• 데이터는 사용자의 로컬 컴퓨터에 영구적으로 저장되며, 사용자가 명시적으로 삭제하지 않는 한 유지됩니다.

세션 스토리지 (5~10MB) :

• 로컬 스토리지와 유사하지만, 세션 동안에만 데이터를 유지합니다.
• 저장된 데이터는 브라우저 세션이 종료되면 삭제됩니다. 즉, 사용자가 브라우저를 닫으면 데이터가 삭제됩니다.

4. CSR과 SSR의 차이?

CSR은 HTML 및 초기 페이지 구조를 서버에서 전송하지 않고, 초기 렌더링을 클라이언트 측에서 수행하는 방식입니다. 페이지가 로드된 후에 JavaScript가 실행되고, 클라이언트 측에서 동적으로 HTML을 생성하고 콘텐츠를 렌더링합니다. 사용자가 페이지를 보는 시간과 상호작용하는 시간이 같고, 서버에 부하가 덜 갑니다. 하지만, 초기 로딩 시간이 SSR에 비해 길고, SEO가 취약할 수 있습니다.

 

SSR은 서버에서 초기 HTML을 생성하고 클라이언트에게 전송하는 방식입니다. 클라이언트가 페이지를 요청할 때마다 서버는 해당 페이지의 HTML을 동적으로 생성합니다. 전체 페이지의 렌더링은 서버 측에서 이루어지므로 초기 로딩 시간이 짧아 SEO에 유리하고 컨텐츠를 빠르게 제공할 수 있습니다. 하지만, 사용자가 페이지를 보는 시간과 상호작용하는 시간이 서로 다를 수 있고, 서버에 부하가 있을 수 있습니다.

 

5. CORS란? 해결 방법은?

웹 애플리케이션이 다른 출처(origin)에서 리소스에 접근하는 것을 허용하기 위한 메커니즘입니다. 웹 애플리케이션이 동일 출처(protocol, host, port 동일)에서 리소스를 요청할 때는 보안 상의 이유로 브라우저가 자동으로 요청을 허용하지만, 다른 출처에서 리소스를 요청할 때는 브라우저가 보안 상의 이유로 이를 차단합니다. 프론트의 경우 Request Header에 CORS 관련 옵션을 추가하고 서버 개발자에게 CORS 허용을 요청합니다.