- Keyword
Canvas
Canvas Drag로 특정 영역 선택하고, 저장하기
- Quiz 정리
Q1.
브라우저 렌더링 (작동) 원리에 대해 설명하세요.
A1.
전달받은 리소스 스트림을 읽으면서 HTML Parser가 HTML을 읽어나가면서 DOM Tree를 만들고 CSS Parser가 CSS를 읽어나가면서 CSSOM Tree를 만듭니다.
그리고 그 두 개를 합쳐 화면에 그려질 것만 결정하는 Render Tree를 만들고, 컴포넌트를 정렬, 배치하는 Layout 과정을 거치며, 마지막으로 Paint 작업을 통해 CSS에 설정한 대로 그려지고 화면에 출력됩니다.
Q2.
웹페이지가 사용자에게 보여지는 과정에 대해서 설명하세요.
A2.
1. Prompt for unload : 현재 페이지에서 다른 페이지로 이동할 때 발생하는 이벤트입니다. 뒤로 가기 버튼이나 링크를 눌러 다른 도메인의 페이지로 이동할 경우 발생합니다.
2. Redirect ~ Response : 네트워크 통신이며, 요청을 받고 HTML 파일 등의 리소스를 브라우저로 가져오는 과정입니다.
3. Processing : 다운로드한 HTML 파일과 CSS 파일을 이용하여 Render Tree를 구성합니다.
4. Load : Render 과정이 마무리되면 사용자가 볼 수 있게 화면에 보여줍니다.
Q3.
Client Side Rendering 과 Server Side Rendering의 차이에 대해서 설명하세요.
A3.
CSR은 렌더링이 클라이언트 측에서 일어나는 것입니다.
최초에 렌더링에 필요한 모든 데이터를 다운 받기 때문에 초기 로딩은 느리지만, 그 이후 페이지 이동이 빠릅니다.
단점으로는 SEO(검색최적화) 사용이 불가능하고, 보안 관련해서는 쿠키에 사용자 저장해야 해서 위험 요소가 될 수 있습니다.
SSR은 렌더링을 클라이언트 측이 아닌 서버 측에서 처리하는 방식입니다.
서버에서 세션으로 사용자 정보를 저장할 수 있고, SEO 측면에서 유리합니다.
하지만 View 변경이 일어날 때마다 서버에 요청해야 하기 때문에 서버 부담이 커진다는 단점이 있고, 화면 전환마다 데이터를 받아와야 되기 때문에 상대적으로 느립니다.
Q4.
프론트엔드 입장에서 신경 써야 할 보안은 어떤 것들이 있나요?
A4.
CSRF와 XSS가 있습니다.
CSRF는 Cross Site Request Forgery 사이트 간 요청 위조로 다른 사이트에서 유저가 보내는 요청을 조작합니다.
예방법으로는 referrer 검증과 Security Token 사용이 있습니다.
XSS는 Cross Site Scripting 공격자가 상대방의 브라우저에 Script를 실행할 수 있게 하여 사용자의 세션을 가로채거나 웹 사이트 변조, 악의적 컨텐츠 삽입, 피싱 공격을 하는 것입니다
예방법으로는 중요한 정보는 쿠키에 저장하지 않고, 정규표현식을 사용한 태그 입력 필터를 설치하며, HTML 포맷의 입력 제한을 두는 것입니다.
Q5.
SPA의 장점이 무엇인가요?
A5.
Single Page Application은 하나의 페이지로 구성된 어플리케이션입니다.
사용자가 요청한 각각의 페이지를 서버가 생성해서 전달해주는 것이 아닌 클라이언트가 동적으로 페이지를 다시 작성하는 방식이며, 첫 페이지 요청 시 단 한 번만 리소스를 로딩하고 그 이후로는 페이지 로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신합니다.
장점으로는 클라이언트가 모든 페이지를 가지고 있으므로 앱과 같은 자연스러운 UX를 제공합니다.
또한, 페이지를 이동하더라도 필요한 부분만 부분적으로 교체하면 되므로 효율성이 증가합니다.
모듈화 또는 컴포넌트별 개발이 용이하고 백엔드와 프론트엔드가 비교적 명확하게 구분됩니다.
앱과 웹 동일한 서버를 이용할 수 있고, PWA와 궁합이 잘 맞습니다.
Q6.
lazy loading이 무엇인가요?
A6.
페이지를 읽어 들이는 시점에 중요하지 않은 리소스 로딩을 추후에 하는 기술입니다.
이 기술을 통해 웹 성능을 향상시키고 통신 비용을 줄일 수 있습니다.
Q7.
웹페이지 redirect의 다양한 구현법에 대해서 설명하세요.
A7.
1. HTTP Redirect : 300번대 상태 코드를 지닌 응답을 활용하여 Redirect를 할 수 있습니다. Redirect 수신한 브라우저는 제공된 새로운 URL을 사용해 즉시 load 합니다.
2. HTML Redirect : <meta> 태그와 http-equiv 속성으로 가능하지만 브라우저에서 뒤로 가기 버튼을 무용지물로 만들기 때문에 지양해야 하는 방법입니다.
3. JavaScript Redirect : window.location 코드를 통해 Redirect가 가능합니다.
Q8.
Reflow가 발생하는 이유와 최적화 방법은 무엇인가요?
A8.
Reflow는 생성된 Node가 변경이 될 때, 브라우저 렌더링을 위하여 DOM Tree를 그리는 과정에서 발생합니다.
노드를 추가하거나 제거, 또는 위치나 크기 변경, 윈도우 리사이징 시 Reflow가 발생합니다.
최적화하기 위해서는 최대한 많은 변화를 일으키기 않는 것이 중요합니다.
예시로는 인라인 스타일을 최대한 배제하고 애니메이션이 들어간 노드는 position을 fixed 또는 absolute로 지정하여 전체 노드에서 분리하는 방법이 있습니다.
Q9.
OSI 7 계층에 대해 설명해주세요.
A9.
OSI 7 계층은 ISO에서 네트워크 통신 과정을 7단계로 나눈 것을 말합니다.
이런 식으로 7단계로 나눔으로써, 특정 문제가 생기면 해당 문제가 생긴 계층에서 처리하고 다른 계층은 건들지 않아 유지 보수면에서 편하다는 장점이 있습니다.
1 계층인 물리 계층은 전기적, 물리적인 것들인 광케이블, 전선과 같은 통신 케이블과 모뎀 등이 있습니다.
2 계층인 데이터링크 계층은 물리적인 링크를 이용하여 데이터를 신뢰성 있게 전송하는 계층입니다. 브릿지나 스위치, 이더넷이 이 계층에 있고 물리 주소인 MAC Address로 통신합니다.
3 계층인 네트워크 계층에서는 IP 기반으로 데이터가 들어있는 패킷을 이용하여 데이터 전송 경로를 결정합니다.
4 계층인 전송 계층은 데이터 전송에 전반적인 조율을 담당하는 계층입니다. 이 계층에 TCP / UDP가 속해 있습니다.
5 계층인 세션 계층은 데이터가 서로 만나는 환경을 조성해주는 단계로 TLS, SSH 등이 이 계층에 속합니다.
6 계층인 표현 계층은 데이터를 더 빠르고 안전하게 전송하기 위한 압축, 암호화 / 복호화 작업을 하는 계층입니다. JPEG, MPEG 등이 이 계층에 속합니다.
7 계층인 응용 계층은 도착한 데이터를 최종 사용자가 확인할 수 있는 단계이며, HTTP가 이 계층에 속합니다.
더 자세한 내용 보러가기
Q10.
TCP와 UDP 방식의 차이점을 설명해주세요.
A10.
둘 다 4 계층인 전송 계층에 있는 패킷을 전달해주는 프로토콜로 차이점은
TCP는 연결형이며, 가상 회선 방식을 사용합니다. 또한, 데이터의 전달을 보증하여 UDP 보다 신뢰할 수 있는 프로토콜입니다. UDP는 비 연결형이며, 데이터 전달이 보증되지 않습니다. 하지만 속도가 TCP 보다 빨라 동영상 스트리밍 같이 데이터가 조금 유실되어도 큰 영향 없는 상황에서 사용하면 좋습니다.
Q11.
TCP의 3 Way-HandShake와 4 Way-HandShake에 대해서 알고 있나요?
A11.
Q12.
DNS에 대해 설명해주세요.
A12.
Q13.
프록시 서버가 필요한 이유에 대해 설명해주세요.
A13.
첫번째는 캐시 데이터를 사용하기 위함입니다.
프록시 서버 중 일부는 프록시 서버에 요청된 내용을 캐싱해놓는데, 이렇게 되면 사용자가 요청 시 서버에 요청할 필요 없이 바로 응답을 할 수 있어 전송 시간을 절약하고 외부 트래픽을 줄임으로써 병목 현상도 방지할 수 있습니다.
두번째는 보안 목적입니다. 프록시 서버가 중간에 경유되게 하면 IP를 숨기는 것이 가능합니다. 또한, 프록시 서버를 방화벽으로 사용하기도 합니다.
세번째는 접속 우회입니다. 클라이언트가 접속이 제한되는 사이트를 프록시 서버를 이용하여 우회할 수 있습니다.
CORS 문제도 이런 방법으로 해결합니다.
Q14.
Http와 Https 통신 방식의 차이에 대해 설명해주세요.
A14.
Q15.
HTTP 프로토콜에 대해 설명해주세요.
A15.
Q16.
브라우저 저장소에 대해서 설명해주세요.
A16.
로컬 스토리지 & 세션 스토리지
쿠키 관련
Q17.
OAuth에 대해 간단히 설명해주세요.
A17.
OAuth2.0은 인증으 위한 표준 프로토콜의 한 종류이며, 보안 된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜입니다.
google, github, facebook 계정으로 로그인하기 기능이 바로 이 OAuth를 사용한 것입니다.
- 오늘 하루 느낀 점
오늘은 7번째 과제를 시작하였다.
Canvas 다루는 과제인데, Canvas를 다뤄본 적이 없었고, 생각보다 마우스를 이용한 이벤트 처리가 많아서 재밌다.
하지만 생각보다 집중을 제대로 못해서 나 자신에게 많이 아쉬운 하루였다.
우선 팀 과제부터 끝내고 퀴즈는 주말에 정리해야겠다.
