# TIL-20210609
# Today
- 모의 기술면접
- 이력서 업데이트
- 프로젝트 보강
# Content
# 페어로 진행하는 모의 기술 면접
기존 진행방식은 코딩 테스트와 기술 관련 질의를 하는 방식이지만,
첫주차라 아직 어떻게 진행하면 좋을지 감이 잘 잡히지 않아서 코딩 테스트를 제외한 기술면접만 진행했다.
# 면접관 역할
내가 준비한 질문
URL을 입력하면 페이지를 불러오기까지 어떠한 과정이 진행되는가
질문 의도
웹 통신 과정에 대한 학습정도를 파악 할 수 있는 과정이며, 프론트엔드 개발자라면 내가 만든 웹페이지가 어떻게 구현되는지에 대해 어느정도 관심을 가지고 있는지 파악 할수 있는 지표라고 생각했다.
상대방의 답변
굉장히 자세한 내용을 설명해 주셨다.
크게 3개의 단계를 살펴 볼수 있었다.
- 사용자가 브라우저에 URL을 입력한 직후 입력값에 대한 처리
- DNS 서버를 통한 엔드포인트 정보와 라우팅 과정
- 해당 웹 서버로 부터 파일/데이터 등을 불러오기 위한 인증 과정
1.사용자가 브라우저 URL을 입력한 직후
사용자는 URL을 입력하면, 브라우저에서 해당 데이터를 유효한 형태의 URL인가 아닌가에 따라 브라우저에 기본적으로 설정되어 있는 검색엔진을 통해 검색을 진행할 지 해당 경로의 서버를 찾아야 할지 결정한다.
2. DNS 서버를 통한 엔드포인트 확인 및 라우팅
경로를 찾기로 정하였으면, 해당 Client가 사용하는 DNS서버를 통해 엔드포인트 IP를 받아오고
라우터를 통해 해당 엔드포인트로 패킷 요청을 전달하게 된다.
3. 해당 웹 서버로 부터 파일/데이터 전송을 위한 인증 및 전송
http요청을 통해 데이터를 전달하기 위해 서버와 클라이언트는 TCP 통신을 통해 해당 요청을 정상적으로 처리할 수 있는 지 확인한다. 유효한 클라이언트가 정상적인 응답을 보낼수 있는 서버인지 확인하고 그 역으로도 진행된다. TCP통신에서 3-way-handshake라는 방식을 통해 확인한다. 별도로 https이라면 TLS 인증을 위한 3-way-handshake가 추가로 진행된다. 확인이 정상적으로 처리되면 데이터(html 파일 등)를 전송한다.
답변에서 진행한 추가 질문 http는 기본적으로 stateless인 통신이다. 하지만, TCP는 상대방과의 통신상태를 stateful하게 진행한다. 왜 TCP통신을 진행하는데 http는 stateless하다고 할 수 있으며, 꼭 TCP통신을 진행해야하는 이유가 있는가?
- 정확한 답변을 모르겠지만, 한번 생각해보면 TCP통신을 통해 데이터를 주고받을 준비가 되었음을 확인하는 과정이고 그 결과가 계속해서 연결상태를 유지하지는 않는다고 생각한다. 때문에, 최초 통신에서 데이터를 주고 받을 수 있는 준비가 되었는지 확인하기 위해 TCP통신을 진행한다고 생각합니다.
# 면접자 역할
내가 받은 질문
모든 자바스크립트 파일을 브라우저에서 한 번에 로딩 할 때의 문제점을 설명해주세요.
질문의 의도
웹페이지 요청시 데이터를 웹브라우저가 처리하는 과정에 대한 전반적인 지식 상태를 파악하기 위함 웹브라우저 엔진이나, 렌더링 엔진의 작업 과정을 이해하고 있고, 어떠한 과정을 통해 스크립트를 컨트롤 할 수 있는지 파악하고 있는지 확인하는 질문
내가 한 답변
브라우저는 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 데이터 저장소, 통신 모듈, 스크립트 해석 모듈, OS 기본 UI 모듈로 이루어져 있습니다.
우리가 Html파일을 받아와 렌더링하기 전에 html파일을 브라우저가 렌더링 할 수 있게 파싱하는 과정이 필요합니다. 이 과정을 브라우저 엔진에서 진행하며 해당 파싱 과정에서 스크립트를 모두 불러오고 실행시키는 과정이 추가 됩니다. 이러한 이유로 스크립트가 헤더에 위치하게 되면, html body에 있는 element를 그리기 전에 스크립트를 모두 불러오기 위해 파싱이 굉장히 오래 걸리는 것처럼 사용자에게 보여질 수 있습니다.
때문에, 스크립트를 후방에 배치하여 화면의 파싱을 더 빠르게 지원 할 수 있습니다. 다만 화면에 그려지기 위해 필요한 데이터를 파싱하는 과정이 스크립트에 심어져 있다면, 그 위치를 조정하게 되면 화면에 반영되지 않을 수 있습니다.
이를 해결하기 위해 스크립트에 async와 defer라는 속성을 통해 스크립트 로드 시점을 변경 할 수 있습니다.
먼저 async속성은 스크립트를 모두 읽는 것이 끝나기 전까지는 html파싱을 계속해서 진행합니다. 그리고 스크립트를 모두 읽고 실행할 준비가 끝나면 html파싱을 중단하고 스크립트를 실행합니다.
이러한 이유로 async속성을 주게되면 스크립트의 순서에 상관없이 읽는것이 끝나는 순서대로 실행되게 됩니다. 때문에 undefined인 값을 읽는 경우가 발생할 수 있습니다.
반면에, defer는 html파싱이 모두 끝난 이후에 실행을 하게 됩니다. html파싱이 끝나면 일괄적으로 defer속성의 스크립트가 실행되기 때문에 그 순서가 보장됩니다.
다이나믹 데이터를 불러오는 과정의 스크립트가 있다면 앞쪽에 배치하고 현재 페이지가 그려진 이후에 실행되어야하는 스크립트라면 후방에 배치해야 합니다.
또한, 사용자 경험을 개선하기 위해 html파싱을 빠르게 완료할 수 있는 전략을 수립해야 할 것입니다.