[기술면접] Top29부분 6

<목차>

15. 쿠키, 세션, 웹스토리지
16. 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)
    
    

15. 쿠키, 세션, 웹스토리지

• 모두 웹에서 사용자 정보를 저장하는데 사용되는 기술

쿠키

• Cookie
• 저장 위치 : 클라이언트(사용자의 컴퓨터)에 작은 파일 형태로 저장
• 용량 제한 : 대부분의 브라우저는 쿠키 하나당 약 4KB로 제한
• 만료 시간 : 개발자가 설정한 만료 날짜에 따라 자동으로 삭제, 세션 쿠키(브라우저가 닫힐때 삭제)와 영속 쿠키(특정 기간 동안 유지)로 구분
• 보안 : HTTP요청과 함께 자동으로 서버로 전송, 쿠키 데이터는 암호화되지 않은 경우 도난 위험

=> 예시

• 사용자 로그인 상태 유지 : 사용자가 웹 사이트에 로그인할 때 로그인 상태를 유지하기 위해 사용자의 브라우저에 쿠키 저장, 사용자가 웹 사이트를 재방문할 때 쿠키를 통해 자동으로 로그인 상태를 인식하고 서비스 제공
• 언어 설정 저장 : 웹사이트에서 사용자가 선택한 언어 설정을 쿠키에 저장, 다시 방문했을 때 동일한 언어 설정을 제공
• 광고 트래킹 : 사용자가 방문한 페이지와 클릭한 광고 등의 정보를 쿠키에 저장, 사용자의 관심사에 맞는 맞춤형 광고를 제공

세션

• Session
• 저장 위치 : 서버 측에서 관리, 클라이언트는 세션 ID만 갖고있다. 이 ID를 통해 서버에서 사용자 정보에 접근 가능
• 용량 제한 : 쿠키보다 더 많은 정보 저장 가능, 서버의 메모리 한계에 따라 다르다.
• 만료 시간 : 서버 측에서 설정한 시간에 따라 만료
• 보안 : 세션 ID가 쿠키에 저장될 수 있으나 실제 중요 데이터는 서버에 저장되기 때문에 비교적 안전

=> 예시

• 온라인 쇼핑 카트 : 사용자가 온라인 쇼핑몰에서 구매하려는 상품을 장바구니에 추가할 때, 이 정보를 세션에 저장하여 사용자가 웹사이트를 탐색하는 동안 선택한 상품을 기억하고 관리
• 복잡한 인증 절차 관리 : 사용자가 금융 서비스 등 보안이 중요한 서비스를 이용할 때, 다단계 인증 정보를 세션을 통해 임시로 저장하고 관리
• 사용자 입력 양식 데이터 : 사용자가 긴 양식을 작성하는 중간에 페이지를 실수로 벗어났다가 돌아왔을 때, 이전에 입력했던 데이터를 세션을 통해 복원하여 사용자의 편의 도모

웹 스토리지

• Web Storage
• 로컬 스토리지와 세션 스토리지 두가지 형태
• 저장 위치 : 클라이언트 측에 저장, 개별 탭에 국한(탭 닫으면 삭제)
• 용량 제한 : 쿠키보다 훨씬 큰 용량(최대5MB) 저장
• 만료 시간 :
  • 로컬 스토리지 : 데이터는 사용자가 직접 삭제하지 않는 이상 영구 저장
  • 세션 스토리지 : 브라우저 탭이 닫히면 데이터가 삭제
• 보안 : 웹 스토리지 데이터는 웹 페이지의 스크립트에서만 접근 가능, 네트워크를 통해 서버로 전송되지 않는다. 그러나 XSS 같은 공격에 취약

=> 예시
<로컬스토리지>

• 사이트 테마 설정 : 사용자가 웹사이트에서 선호하는 테마(다크모드)를 로컬 스토리지에 저장하여, 웹사이트를 재방문할 때 동일한 테마 적용
• 게임 진행 상황 저장 : 브라우저 게임을 플레이할 때 사용자의 진행 상황을 로컬 스토리지에 저장하여, 다음 방문 때 게임을 중단한 지점부터 시작할 수 있게 함
  <세션스토리지>
• 폼 데이터 자동 저장 : 사용자가 온라인 설문조사나 긴 입력 폼을 작성하는 동안, 입력한 데이터를 세션 스토리지에 일시적으로 저장. 사용자가 실수로 다른 페이지로 이동한 경우 돌아왔을 때 세션 스토리지에 저장된 데이터를 불러와 입력 폼 복구가능, 브라우저의 탭을 닫으면 자동으로 사라짐 -> 보안상 이점
• 시간 제한이 있는 퀴즈 : 각 사용자의 시작 시간과 퀴즈 답변을 세션 스토리지에 저장함으로써, 사용자가 퀴즈를 완료할 때까지의 시간을 계산하고 퀴즈 페이지를 새로 고침해도 데이터가 유실되지 않을 수 있게 할 수 있음
  
  

Q. 쿠키, 세션, 웹스토리지의 차이를 설명해보세요

쿠키, 세션, 웹 스토리지 모두 웹에서 사용자 정보를 저장하는 데 사용되는 기술입니다. 하지만 세 가지 항목의 차이점이 존재합니다. 쿠키는 사용자의 컴퓨터, 즉 클라이언트에 작은 파일 형태로 저장됩니다. 용량은 쿠키 하나당 약 4KB로 제한되어 상대적으로 작은 편이고 브라우저가 완전히 닫힐 때 삭제되는 세션 쿠키와 특정 기간 동안 유지되는 영속 쿠키가 있습니다. HTTP와 함께 서버로 전송되기 때문에 쿠키 데이터는 암호화되지 않은 경우 도난당할 위험이 있습니다. 세션은 사용자 정보를 서버 측에서 관리합니다. 클라이언트는 세션 ID를 가지고 서버의 사용자 정보에 접근할 수 있습니다. 쿠키보다 더 많은 정보를 저장할 수 있고 그 한계는 서버의 메모리에 따라 달라집니다. 만료 시간은 서버 측에서 설정한 시간에 따라 만료되고 중요한 데이터는 서버에 저장되고 세션 ID만 쿠키에 저장되기 때문에 비교적 안전합니다. 웹 스토리지는 로컬 스토리지와 세션 스토리지로 나뉩니다. 두 가지 모두 클라이언트 측에 저장되고 쿠키보다 훨씬 큰 용량, 최대 5MB까지 저장할 수 있습니다. 로컬 스토리지의 경우 사용자가 직접 데이터를 삭제하지 않는 이상 영구적으로 저장되지만 세션 스토리지의 경우 브라우저 탭이 닫히면 데이터가 삭제됩니다. 웹 스토리지는 네트워크를 통해 서버로 전송되지 않아 비교적 안전하지만 XSS 같은 공격에 취약하다는 약점이 있습니다.

** XSS : 웹 보안 취약점 중 하나, 공격자가 웹 페이지에 악의적인 스크립트를 삽입하여 실행하게 만드는 공격방법. 사용자의 브라우저에서 실행되어 사용자의 정보를 도용하거나 사용자 행동을 조작하거나 다른 사이트에 대한 악의적 요청을 보내는 등 행위를 할 수 있다. 우리가 일반적으로 말하는 "해킹을 당해 정보가 노출되었다"의 "해킹을 당했다"는 것과 비슷한 맥락으로 이해 할 수 있다.

16. 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)

• 웹 어플리케이션에서 콘텐츠를 어떻게 렌더링할지 결정하는 두 가지 접근 방식

클라이언트 사이드 렌더링(CSR)

• 브라우저가 HTML, CSS, JavaScript를 받아 사용자의 기기에 콘텐츠 렌더링
• 초기 서버로부터 받는 데이터는 매우 간단
• 대부분 렌더링 작업은 클라이언트에서 이루어짐

<장점>

• 이터랙티브성 : 페이지 일부만 갱신해도 되기 때문에 사용자와의 상호작용이 빠르고 부드러움
• 서버 부하 감소 : 초기 로드 이후 모든 렌더링 작업은 클라이언트 측에서 이루어짐 => 서버의 부하 감소
• 리치 애플리케이션 : 복잡하고 동적인 웹 애플리케이션을 구현하기 좋은 환경 제공

<단점>

• 초기 로딩 시간 : 첫 페이지 로딩 시 모든 스크립트를 다운받아야 하므로 초기 로딩 시간이 길어질 수 있음
• SEO 문제 : 검색 엔진이 JavaScript를 실행해야 페이지의 전체 내용을 인덱싱 가능 => SEO 불리

서버 사이드 렌더링(SSR)

• 서버에서 HTML, CSS, JavaScript를 렌더링하여 완성된 페이지 형태로 사용자에게 전송
• 서버가 렌더링의 주체가 됨
• 클라이언트로 보내지는 HTML은 이미 렌더링된 상태

<장점>

• SEO 최적화 : 완성된 HTML이 클라이언트에게 전송되므로 검색 엔진이 콘텐츠를 쉽게 크롤링, 인덱싱 가능
• 빠른 첫 페이지 로딩 : 이미 서버로부터 렌더링된 페이지를 받았기 때문에 첫 페이지의 로딩시간 짧음
• 자바스크립트 의존성 감소 : 자바스크립트 실행 없이도 사용자에게 제공 가능

<단점>

• 서버 부하 증가 : 모든 사용자 요청에 대해 페이지를 새로 렌더링 => 서버 부담
• 사용자 경험 제한 : CSR에 비해 페이지 갱신 시 전체 페이지를 새로 로딩해야 함 => 사용자 경험이 느려짐
• 복잡한 데이터 처리 : 동적인 데이터가 많은 페이지에서 서버에서 데이터를 처리하고 렌더링 하는 과정이 복잡해질 수 있음

** 두 렌더링 방식이 결합한 방식

• Isomorphic Rendering 또는 Universal Rendering : 초기로드는 서버에서 처리, 이후 동적인 상호작용은 클라이언트 사이드에서 처리하는 방식

Q. 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요.

클라이언트 사이드 렌더링과 서버 사이드 렌더링은 웹 애플리케이션에서 콘텐츠를 어떻게 렌더링할지 결정하는 방식입니다. 클라이언트 사이드 렌더링은 브라우저가 HTML, CSS, JavaScript를 받아 사용자의 기기에서 콘텐츠를 렌더링하는 방식입니다. 대부분 렌더링 작업은 클라이언트에서 이루어집니다. 클라이언트 사이드 렌더링은 클라이언트에서 HTML, CSS, JavaScript를 가지고 있기 때문에 페이지의 일부만 갱신이 가능하여 사용자와의 상호작용이 빠르고 부드럽다는 장점을 갖고 있습니다. 그렇기 때문에 복잡하고 동적인 웹 애플리케이션에 적합합니다. 초기 로드 이후 모든 렌더링 작업은 클라이언트에서 이루어지기 때문에 서버의 부하가 감소한다는 점도 하나의 장점입니다. 다만, 첫 페이지 로딩 시 모든 스크립트를 다운받아야 하기 때문에 초기 로딩 시간이 길 수 있다는 점과 검색 엔진과의 궁합이 좋지 않아 SEO가 불리하다는 단점이 있습니다. 이와 비교해서 서버 사이드 렌더링은 서버에서 HTML, CSS, JavaScript를 렌더링하여 완성된 페이지 형태로 전송해주는 방식으로 렌더링의 주체는 서버가 됩니다. 클라이언트 사이드 렌더링과 반대로 검색 엔진이 콘텐츠를 쉽게 크롤링하고 인덱싱할 수 있기 때문에 SEO에 최적화되어 있다는 점과 첫 페이지 로딩 시간이 짧다는 장점을 갖고 있습니다. 하지만 서버가 모든 사용자 요청에 대해 페이지를 새로 렌더링하기 때문에 서버의 부담이 증가하고 페이지를 갱신할 때 전체 페이지를 새로 로딩해야 하기 때문에 사용자 경험 면에서 느리다는 느낌을 줄 수 있습니다. 뿐만 아니라 서버 사이드 렌더링은 동적인 데이터가 많은 페이지에서는 서버에서 데이터를 처리하고 렌더링하는 과정이 복잡하다는 단점도 갖고 있습니다.