브라우저 렌더링 (작동) 원리에 대해 설명하세요.
첫번째로 브라우저는 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성한다.
생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성한다. Render Tree는 실제로 화면에 그려질 Tree이다. Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산한다. 여기서 정확한 레이아웃의 % 크기값을 계산해 픽셀단위로 변환한다. Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다. 우리는 화면에서 웹 페이지를 볼 수 있다.
웹페이지가 사용자에게 보여지는 과정에 대해서 설명하세요.
Prompt for unload
현재 페이지에서 다른 페이지로 이동할 때 발생하는 이벤트입니다.
뒤로가기 버튼이나 링크를 눌러 다른 도메인의 페이지로 이동할 경우 발생합니다.
Redirect ~ Response
노란색으로 칠해진 Redirect 부터 Response 까지는 네트워크 통신입니다.
요청을 받고 HTML 파일 등의 리소스를 브라우저로 가져오는 일련의 과정입니다.
AppCache 는 이미 요청한 응답에 대한 캐싱을 확인해서 캐싱된 데이터가 있다면 통신을 또 하지 않고 바로 사용해서 퍼포먼스 효율을 높입니다.
DNS는 도메인을 서버의 IP 주소로 변환하는 역할을 합니다.
TCP 레이어에서 요청이 성공적으로 이루어지면 Response가 옵니다.
Processing
다운로드한 HTML파일과 CSS파일을 활용해 DOM Tree와 CSSOM Tree를 만들어 렌더링 트리를 구성합니다.
Load
렌더 과정까지 마무리되면 다운로드한 파일을 사용자가 알아볼 수 있게 화면에 보여줍니다.
Client Side Rendering 과 Server Side Rendering 의 차이에 대해서 설명하세요.
ssr이란 서버사이드 렌더링의 약자로 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식입니다. 클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식입니다 ssr 은 첫번째 페이지(초기) 로딩이 빨라집니다. csr 은 용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다는 점 새로고침등이 발생해, 사용자경험에서도 차이가남.
프론트엔드 입장에서 신경써야 할 보안은 어떤 것들이 있나요?
브라우저에 노출될수있는 CONSOle.log 주석등은 기본적으로 신경써야됨.
CSRF와 XSS 등이 있습니다.
CSRF는 사이트 간 요청 위조(cross site request forgery) 라는 의미로 다른 사이트에서 유저가 보내는 요청을 조작하는 것을 말합니다. 이러한 문제는 referrer 검증, security token 사용, double submit cookie 검증 등으로 해결 할 수 있습니다. XSS(cross site scripting)는 공격자가 상대방의 브라우저에 script를 실행할 수 있게 하여 사용자의 세션을 가로채거나 웹 사이트 변조, 악의적 컨텐츠 삽입, 피싱 공격 등을 하는 것으로 예방하기 위해서는 중요 정보를 쿠키에 저장하지 않고, 정규 표현식을사용해 태그 입력 필터를 설치하고, HTML 포맷의 입력을 제한하는 방법 등이 있습니다.
SPA의 장점이 무엇인가요?
Single Page Application 장점으로는 클라이언트가 모든 페이지를 가지고 있으므로 앱과 같은 자연스러운 사용자 경험을 제공합니다. 필요한 부분만 렌더링 해주므로 효율성이 증가합니다. 그러면 자동으로 서버 부담이 줄어듭니다. 모듈화나 컴포넌트별 개발에 용이하다 등이 있습니다.
lazy loading이 무엇인가요?
사용자가 필요할 때 이미지를 로딩하는 방식으로 페이지에 보여지는 이미지들은 미리 로드하고 나머지 이미지들은 스크롤 이벤트가 발생했을 때에 로드하는 방식입니다. lazy loading을 통해 웹 성능을 향상시키고 통신 비용을 줄일 수 있습니다.
웹페이지 redirect의 다양한 구현법에 대해서 설명하세요.
HTTP, HTML, Javscript를 통해 리다이렉트가 가능합니다.HTTP 리다이렉트는 300번대로 시작하는 상지닌 응답을 활용해 리다이렉트가 가능합니다.HTML 에서는 태그와 http-equiv 속성을 통해 가능하rh, Javascrip에서는 window.location 코드를 통해 리다이렉트가 가능합니다.
Reflow가 발생하는 이유와 방지 방법은 무엇인가요?
Reflow는 브라우저 렌더링을 위해 DOM 트리를 그리는 과정에서 발생합니다.예를 들어 노드의 추가 혹은 제거, 요소의 위치나 크기 변경, 폰트 변경, 페이지 초기 렌더링 시나 윈도우 리사이징 시 reflow가 발생합니다. Reflow를 최적화하는 방법은 1. 클래스 변화에 따른 스타일 변경 시, 최대한 말단에 위치한 노드에 적용하는 방법 2. 인라인 스타일을 배제하는 방법 3. 애니메이션이 들어간 노드에 position 속성을 fixed나 absolute로 지정하여 전체 노드에서 분리시키는 방법 등이 있습니다.
디자인 패턴이란 무엇이고 각각의 장단점에 대해서 설명하세요.
디자인 패턴은 소프트웨어 설계 시 기존 환경에서 반복적으로 일어나는 문제들을 풀어나갈 수 있는 일종의 솔루션 입니다. 디자인 패턴은 크게 생성 패턴, 구조 패턴, 행동 패턴으로 구분할 수 있습니다.
꼬리질문
생성 패턴 : 객체의 생성절차를 추상화하는 패턴. ex) 싱글톤, 추상 팩토리, 프로토타입
구조 패턴 : 클래스나 객체를 조합해 더 큰 구조를 만드는 패턴. ex) 어댑터, 데코레이터
행동 패턴 : 객체나 클래스 사이의 알고리즘이나 책임 분배에 과녈ㄴ된 패턴. ex) 커맨드, 인터프리터, 메멘토, 옵저버, 템플릿 메소드 등
OSI 7계층에 대해 설명해주세요.
OSI 7 계층은 ISO(국제표준화기구)에서 네트워크 통신 과정을 7단계로 정의한 표준 규약 네트워크입니다. 7단계로 나눔으로써 문제가 생겼을 때 빠르게 파악할 수 있다는 장점이 있습니다.
7계층은 물리, 데이터링크, 네트워크, 전송, 세션, 표현, 응용 계층으로 이루어져 있습니다.
1. 물리 계층 : 장비를 가동시키기 위한 전기 공급부터 장비끼리의 물리적인 연결을 위한 랜케이블 등을 포함합니다.
ex) 광케이블, 전선, 모뎀
2. 데이터 링크 계층 : 물리계층의 물리적인 링크를 이용해 데이터를 신뢰성있게 전송하는 계층입니다. MAC 주소로 통신합니다.
ex) 브릿지, 스위치, 이더넷
3. 네트워크 계층 : IP를 기반으로 데이터가 들어있는 패킷을 이용해 데이터 전송 경로를 결정합니다.
4. 전송 계층 : 데이터 전송에 대한 전반적인 조율을 담당하며 TCP/UDP 포트 정보를 참조해 데이터를 전송하고 통신의 신뢰성을 보장할 수 있습니다.
5. 세션 계층 : 통신 시스템 사용자간의 연결을 유지하거나 설정합니다.
ex) TLS, SSH
6. 표현 계층 : 데이터를 빠르고 안전하게 전송하기 위한 압축, 암/복호화 작업을 하는 계층입니다.
ex) JPEG, MPEG
7. 응용 계층 : 데이터를 최종 사용자가 확인하는 마지막 단계입니다.
ex) HTTP 프로토콜
TCP와 UDP 방식의 차이점을 설명해주세요.
TCP와 UDP 모두 IP 프로토콜을 기반으로 구현되어 있지만 TCP는 연결형 서비스이며 UDP는 비연결형 서비스입니다.
TCP는 연결이 성공해야 통신이 가능하며 데이터의 전송 순서를 보장하기 때문에 신뢰성이 있지만 UDP보다 전송속도가 느립니다.
UDP는 연결 없이 통신이 가능하며 데이터 전달이나 전송 순서가 보장되지 않아 신뢰성이 없지만 TCP보다 전송속도가 빠릅니다.
TCP의 3 Way-HandShake와 4 Way-HandShake에 대해서 알고 있나요?
3 way handshake는 통신을 시작할 때 거치는 과정으로 패킷 내부의 값을 확인하여 클라이언트와 서버가 서로 보낸 패킷의 순서와 패킷을 제대로 받았는지 확인할 수 있습니다. 이 과정에서 총 3번의 통신이 필요하기 때문에 3 way handshake라고 합니다. 또한 4 way-handshake는 클라이언트와 서버 간의 연결된 세션을 종료하기 위해 수행하는 절차이며 총 4번의 통신이 필요합니다.
DNS에 대해 설명해주세요.
Domain name system으로 www.example.com과 같은 Host의 도메인 네임을 Host의 IP로 변환해주는 서비스를 말합니다.
DNS 서비스 과정
1. 웹 브라우저에 도메인 입력 시 local DNS 서버에게 해당하는 IP 주소 query.
2. local DNS 서버는 확인하여 없으면 root DNS 서버 정보를 전달
3. Root DNS 서버에 도메인명을 query 하면 com과 같은 최상위 도메인을 인식하여 이를 관리하는 TLD(Top-level-domain) 서버 정보 전달
4. TLD에 도메인명 query 하면 최상위 도메인과 서브 도메인(naver.com) 인식하여 이를 관리하는 DNS 서버(Authoritative 서버) 정보 전달
5. Local DNS 서버가 Authoritative DNS 서버에 도메인명 전달하면 전체 도메인 네임에 해당하는 IP 주소 전달
6. local DNS 서버는 이 IP 주소를 host에게 넘겨줌.
프록시 서버가 필요한 이유에 대해 설명해주세요.
프록시 서버는 클라이언트가 다른 네트워크에 접속할 수 있도록 중간에서 대리인 역할을 하는 서버로 대표적으로 캐시 데이터를 사용하거나 보안 목적 또는 접속을 우회하기 위해 사용합니다.
프록시 서버는 프록시 서버에 요청된 내용들을 캐시를 이용해 저장할 수 있으며 이를 통해서 전송 시간을 절약하고 외부 트래픽을 줄일 수 있습니다.
또한 프록시 서버를 사용할 경우 클라이언트가 직접 접속하지 않기 떄문에 IP를 숨기는 것이 가능하며 프록시 서버를 방화벽으로서 사용할 수도 있기 때문에 보안 목적으로 사용하기도 합니다.
또한 클라이언트의 접속이 제한되는 경우 이를 우회하기 위해 사용하기도 합니다. (ex: 국가 제한, CORS 정책 제한 등)
Http와 Https 통신 방식의 차이에 대해 설명해주세요.
HTTP(Hypertext Transfer Protocol)는 서버와 클라이언트가 데이터를 주고받을 때 사용하는 프로토콜로 데이터 전송 시 정보가 암호화되지 않는다는 문제가 있었습니다. 이를 해결하기 위해서 HTTP에 SSL을 사용한 HTTPS가 등장하였고 HTTPS는 SSL 인증서를 통해 데이터를 암호화합니다. 또한 HTTP는 80번 포트로 통신하며 HTTPS는 443포트로 통신하는 차이가 있습니다.
