[기술면접] Frontend 부분 1

<목차>

1. Optimistic Update
2. 인증/인가의 관점에서 세션 방식과 JWT 방식의 차이점
3. 쿠키, 세션, 웹스토리지의 차이
4. 브라우저의 렌더링 과정
   
   

1. Optimistic Update

• 낙관적 업데이트
• 낙관적인 결과를 예측해서 업데이트 하는 방식
• 서버의 성공 여부와 관계없이 통신이 성공했다고 가정
• UI 미리 업데이트
• 사용자는 웹사이트의 반응 속도가 빠르다고 인식
• 비교) 기존방식 : 서버에 업데이트 요청 -> 서버의 응답 -> 클라이언트 렌더링 , 결과값을 받아야 렌더링 , 반응속도가 느리다고 인식

=> 낙관적 업데이트는 말 그대로 낙관적인 결과를 예측하여 업데이트 하는 방식입니다. 기존의 방식은 서버에 업데이트 요청을 보내면 클라이언트 가 서버의 응답을 받고 렌더링이 일어납니다. 이러한 방식은 사용자에게 결과값을 나중에 보여주는 방식이기 때문에 웹사이트의 반응속도가 느리다고 느낄 수 있습니다. 낙관적 업데이트를 적용하면 서버의 성공 여부와 관계없이, 통신이 성공했다고 가정하고 UI를 미리 업데이트 합니다. 서버의 응답을 기디리지 않고 바로 UI를 변경하기 때문에 사용자의 입장에선 반응 속도가 빠르다고 인식하게 됩니다.

2. 인증/인가의 관점에서 세션 방식과 JWT 방식의 차이점

세션방식

• 사용자의 인증정보가 서버의 세션저장소에 저장되는 방식
• 저장된 세션 정보의 식별자인 세션 아이디 발급
• 발급된 세션 아이디는 쿠키형태로 저장
• 실제 인증 저옵는 서버에 저장
  

JWT방식

• 토큰기반 방식
• 인증정보는 클라이언트 쪽에 저장
• 토큰 형태의 인증정보는 브라우저의 로컬스토리지 혹은 쿠키에 저장

차이점

• 세션방식은 세션아이디만 보면 되기 때문에 트래픽 적게 사용
• JWT방식은 토큰에 다양한 정보가 담겨 상대적으로 더 많은 네트워크 트래픽 사용
• 세션은 인증증서버를 서버에서 관리 -> 보안 유리
• JWT방식은 http에 의존하지 않고 바로 활용 가능 -> 높은 확장성 -> 서버 부담 ↓

=> 인증/인가의 관점에서 세션방식과 jwt 방식의 차이점에 대해 말씀드리겠습니다. 세션방식은 사용자의 인증정보가 서버의 세션저장소에 저장되는 방식으로 사용자에게 저장된 세션 정보의 식별자인 세션 아이디를 발급합니다. 발급된 sesstion ID는 브라우저에 쿠키 형태로 저장되긴 하지만 실제 인증 정보는 서버에 저장되어있기 있습니다. jwt방식은 토큰기반 방식으로 인증정보를 갖고있는 건 서버가 아닌 클라이언트 쪽이 됩니다. 토큰 형태의 인증정보는 브라우저의 로컬 스토리지 혹은 쿠키에 저장됩니다. 두가지 방식의 차이점을 알아보자면 세션의 경우 세션아이디만 보니면 되기 때문에 트래픽을 적게 사용합니다. 하지만 jwt방식은 토큰에 다양한 정보가 담겨있어 상대적으로 더 많은 네트워크 트래픽을 사용합니다. 또한 세션의 경우 인증서버를 서버에서 관리하기 때문에 보안에 유리하다는 장점이 있는 반면 jwt는 http에 의존하지 않고 바로 활용한다는 점에서 높은 확장성이라는 장점이 있습니다. 이러한 확장성은 서버의 부담을 줄어주기도 합니다.

3. 쿠키, 세션, 웹스토리지의 차이

쿠키

• 클라이언트에 작은 파일을 저장하여 상태 정보를 로컬에 저장
• 쿠키를 통해 사용자를 기억, 사용자의 방문정보와 선호도 저장가능
• http요청마다 서버로 전송 -> 서버와 클라이언트의 지속적인 상태 정보 유지하는데 사용

세션

• 서버측에서 사용자 정보를 저장
• 서버에서 고유 세션 아이디를 부여
• 서버 연결때마다 세션 아이디를 통해 사용자 구별
• 쿠키에 비해 더 큰 데이터를 저장 가능
• 서버에 저장되기 때문에 비교적 안전
• 사용자가 많아질수록 서버 메모리를 많이 차지

웹스토리지

• 로컬 스토리지 : 데이터가 사용자 브라우저에 영구적으로 저장, 사용자가 지우지 않는 한 계속 남아있다.
• 세션 스토리지 : 브라우저 세션이 유지되는 동안만 데이터 저장, 브라우저 탭이 닫히면 데이터 삭제

공통점

• 모두 웹개발에서 사용자의 데이터를 저장하는 방법

차이점

• 웹스토리지들은 클라이언트 측에 저장된다는 점에서 쿠키와 같고 세션과는 다른다.
• 웹스토리지들은 서버로 데이터를 전송하지 않는다는 차이점

=> 쿠키, 세션, 웹스토리지는 웹 개발에서 사용자의 데이터를 저장하는 방법들 입니다. 쿠키는 클라이언트에 작은 파일을 저장하여 상태 정보를 로컬에 저장해둡니다. 이것을 통해서 우리는 사용자를 기억하고 사용자의 방문정보와 선호도 등을 저장할 수 있습니다. 쿠키 데이터는 http 요청마다 서버로 전송되기 때문에 서버와 클라이언트의 지속적인 상태 정보를 유지하는데 사용됩니다. 세션은 서버측에서 사용자 정보를 저장한다는 차이점이 있습니다. 서버에서 고유 세션ID를 부여하여 사용자가 서버에 연결될 때마다 이 ID를 통해 사용자를 구별합니다. 세션 데이터는 쿠키보다 더 큰 데이터를 안전하게 보장할 수 있지만 사용자가 많아질수록 서버 메모리를 많이 차지하게 된다는 단점이 있습니다. 웹스토리지는 로컬 스토리지와 세션 스토리지 두가지로 나눌 수 있는데 로컬 스토리지는 데이터가 사용자 브라우저에 영구적으로 저장되며 사용자가 지우지 않는한 계속 남아있습니다. 세션 스토리지는 브라우저 세션이 유지되는 동안만 데이터를 저장하고 브라우저 탭이 닫히면 데이터가 삭제된다는 차이가 있습니다. 웹스토리지들은 클라이언트 측에 저장된다는 점에서 쿠키와 동일하지만 서버로 데이터를 전송하지 않다는 차이점이 있습니다.

4. 브라우저의 렌더링 과정

• HTML 파싱 - CSS 파싱 - DOM트리와 CSSOM트리 결합 - 리플로우 - 페인팅
• HTML 파싱을 통해 DOM구성
• CSS 파싱을 통해 CSSCOM생성
• DOM트리, CSSCOM트리 결합으로 렌더트리 완성
• 각 노드의 화면상 정확한 위치와 크기 계산하는 레이아웃 과정 = 리플로우
• 실제 화면에 그려지는 과정 = 페인팅

=> 브라우저의 렌더링 과정은 HTML파싱 - css 파싱 - DOM 트리와 CSSOM 트리 결합 - 리플로우 - 페인팅 으로 구성됩니다. HTML파싱을 통해 DOM을 구성하고 CSS 파싱을 통해 CSSOM을 생성하고 두가지를 결합하면 렌더 트리가 완성됩니다. 각 노드의 화면상 정확한 위치와 크기를 계산하는 레이아웃 과정인 리플로우를 수행하면 실제 화면에 그려지는 페인팅 과정을 진행합니다.