웹 브라우저 동작방식

왜 웹에서 에니메이션을 구현할 때 transform 속성을 사용할까요?

transform은 요소의 레이아웃을 변경하지 않고 시각적인 변화만 적용하기 때문에 브라우저의 Reflow와 Repaint 비용을 최소화 한다.

애니메이션에서 display: none → display: block에 부드러운 동작이 적용되지 않는 이유를 설명해 주세요.

display속성은 요소의 레이아웃을 벼경하기 때문에 display 속성을 변경하면 브라우저의 리렌더링 과정을 걸쳐 리플로우가 발생하기 때문에 적용되지 않는다.

웹 브라우저의 렌더링 과정에 대해 설명하세요

HTML 문서를 파싱하여 DOM트리를 생성하고 CSS 파일을 파싱하여 CSSOM파일을 생성하고 Render트리를 형성하고 Layout을 형성하고 Reflow와 Repaint 과정을 통해서 렌더링하여 사용자 화면에 보여준다.

브라우저가 웹 페이지를 로드하는 과정에 대해 설명하세요

DNS 주소로 IP주소를 찾고 서버에 HTTP 요청을 보내고 서버는 이에 응답을 반환한다. 브라우저는 서버로부터 받은 응답을 처리하고 HTML, CSS, JS를 다운받아 웹 페이지를 렌더링하고 화면에 표시한다.

클라이언트 사이드 렌더링과 서버 사이드 렌더링의 차이에 대해 설명해주세요

CSR은 웹페이지 초기 로딩 시 브라우저에서 JS를 사용해서 페이지를 렌더링하는 방식으로 페이지 전환이 빠르고 UX가 좋지만 초기 로딩속도와 SEO에서 불리하다. SSR은 서버에서 HTML을 렌더링해서 브라우저에 전달한다. SEO에 우수하지만 동적 UI에서 불리하다.

HTTP Method

GET, POST에 대해서 설명해주세요

get은 클라이언트에서 서버로 어떤 리소스를 요청하기 위해 사용되는 메소드이고 post는 클라이언트에서 서버로 리소스를 생성하기위해 데이터를 보낼 때 사용되는 베소드이다.

Get요청은 URL에 붙어서 전송되는가?

get요청은 안전한 메소드로 http의 header에 붙어서 전송된다. 그에 반해 post는 새로운 리소스를 생성하며 멱등성을 유지하지 않기 때문에 서버에 영향을 주는 작업이므로 http의 BODY에 넣어서 전송된다. 또한 북마크와 공유에 용이하도록 그리고 가시성을 위해서도 url에 붙어서 전송된다.

서버에서 POST, PUT, PATCH 요청을 받으면 각 메서드마다 리소스를 어떻게 다루나요?

Post는 새로운 리소스를 생성하고 Put은 기존 리소스를 전체저긍로 교체하고 patch는 기존 리소스의 일부분만을 교체한다.

HTTP Method 중 OPTIONS 메서드는 언제 사용하나요?

http option 메소드는 주어진 url 또는 서버에 대해 통신옵션을 요청할 때 사용된다. 클라이언트는 이 방법으로 url을 지정하거나 별표를 지정하여 전체 서버를 참조할 수 있다. 주로 cors에서 사용된다.

조회 시 POST가 아닌 GET 방식을 사용하는 이유에 대해 자세히 설명하시오

GET요청은 멱등적이며 안전한 메서드로 데이터가 URL에 노출되므로 사용자가 요청의 내용을 URL에서 직접 확인할 수 있고 사용자가 특정 페이지나 검색 결과를 북마크하거나 다른 사용자와 공유하기 유용하게 하기 위해서 조회시 POST가 아닌 GET 방식을 사용한다.

HTTP 메소드의 속성에 대해 설명해주세요.

HTTP의 속성에는 서버의 상태를 변경하지 않고 리소스를 조회하는 안전, 여러 번 호출해도 동일한 결과를 보장하는 멱등성, 응답이 캐시가 될 수 있는 캐시 가능이 있다.

HTTP/HTTPS

public Key와 private Key 그리고 Symmetric Key가 브라우저와 서버에서 작동하는 방식에 대해 서술해주세요.

Symmetric키는 같은 키를 공유한 대상끼리 암호화 복호화를 통해 안전하게 데이터 전송을 동작 가능하게 한다. 이러한 대칭키를 안전하게 공유하기 위해 비대칭키인 Public키와 서버의 Private키를 사용해서 암호를 복화해서 Symmetric키를 공유할 수 있도록 한다.

HTTPS는 어떤 프로토콜인지와 사용하는 이유를 말해주세요.

http는 hypertext-transfer protocol의 보안 버전으로 데이터 전송을 암호화하고 보호하기 위해 사용되는 protocol로 안전한 데이터 전송에 사용된다.

HTTP와 HTTPS의 차이점은 무엇인가요?

http message는 일반 텍스트이므로 권한이 없는 유저가 인터넷을 통해 쉽게 접근할 수 있는 반면 https는 모든 데이터를 암호화된 형태로 전송하기 때문에 안전성에서의 차이가 있다.

HTTPS와 SSL Handshake에 대해서 설명하세요.

클라이언트는 서버에 ssl로 암호화된 페이지를 요청한다. 웹서버는 public-key를 인증서와 함께 전송한다. 이후 클라이언트는 CA시스템을 통해 인증서가 유효한 지 확인하고 Public키를 통해 대칭키를 암호화하여 전송한다. 이후 서버에서 대칭키를 private-key를 이용해 복호화한 후 대칭키를 통해서 서로 데이터를 주고 받는다.

HTTPS의 SEO 효과에 대해 설명해주세요.

HTTP를 사용하는 웹사이트의 신뢰성이 보호되기 때문에 검색엔진에서 더 높은 노출을 얻을 수 있다.

RESTful

Put과 Post의 차이점은 무엇일까요?

Rest Api에서는 post를 제외하고는 모두 멱등성을 유지해야 한다. 여기서 멱등성이란 같은 행위를 여러번 반복하더라도 같은 효과를 지녀야 한다는 것을 말한다. 이러한 관점에서 볼 때 Post는 새로운 리소스를 생성하는 반면 Put은 Request Uri에 리소스가 존재한다면 리소스를 Update하기 때문에 Post는 멱등성이 성립하지 않고 put은 멱등성이 성립힌다.

RestFul Api란?

웹 어플리케이션에서 리소스를 정의하고 관리하기 위한 아키텍쳐스타일 중 하나로 URI를 통해 리소스를 표현하고, HTTP메소드를 활용하여 리소스를 조작한다. Restful Api 요청에는 고유 리소스식별자, 메서드, Http 헤더 등이 있다.

Restful API 설계규칙에 대해 아는대로 말하시오

URI 마지막에 / 붙이지 않기, 하이픈 사용하기, 언더바 금지

RESTful API에서 리소스를 표현하기 위한 규칙인 URI 네이밍 규칙을 3개 이상 말해주세요.

리소스를 표현하기 위해 명사형을 사용
리소스 Collection에서는 복수형 사용
마지막 문자로 /를 붙이면 안됨

AJAX와 REST의 차이

Ajax는 비동기적으로 서버로 데이터를 주고 받는 기술이고 REST API는 웹 API를 설계하는 스타일의 방법론이다.