안녕하세요, 오늘도 최종프로젝트 진행상황과 기술면접 준비한 자료를 정리해보았습니다.
브라우저의 작동방식에 대해서 설명해주세요.
웹 브라우저는 사용자가 웹 페이지를 검색하고 볼 수 있게 해주는 소프트웨어 애플리케이션입니다. 브라우저의 작동 방식을 이해하기 위해서는 몇 가지 주요 단계를 알아야 합니다.
-
URL 입력
사용자가 브라우저의 주소창에 URL(Uniform Resource Locator)을 입력하면 브라우저는 이 URL을 통해 특정 웹 페이지를 찾습니다. -
DNS 조회
입력된 URL에서 도메인 이름을 추출한 후, 브라우저는 DNS(Domain Name System) 서버에 요청을 보내어 해당 도메인 이름에 해당하는 IP 주소를 확인합니다. 예를 들어, www.example.com이라는 도메인을 입력하면, DNS 서버는 해당 도메인의 IP 주소를 반환합니다. -
HTTP/HTTPS 요청
IP 주소를 확인한 후, 브라우저는 해당 서버에 HTTP(혹은 HTTPS) 요청을 보냅니다. 이 요청에는 다음과 같은 정보가 포함됩니다:
HTTP 메서드 (GET, POST 등)
요청 URL
헤더 (브라우저 정보, 쿠키 등)
(POST 요청의 경우) 본문 데이터
4. 서버 응답
서버는 브라우저의 요청을 처리하고 응답을 반환합니다. 이 응답에는 다음이 포함될 수 있습니다:
상태 코드 (예: 200 OK, 404 Not Found)
헤더 (콘텐츠 유형, 캐시 지시문 등)
본문 (HTML, CSS, JavaScript, 이미지 등)
5. 렌더링 엔진
브라우저는 서버로부터 받은 응답의 본문을 해석하고 렌더링 엔진을 통해 화면에 표시합니다. 주요 렌더링 엔진은 다음과 같습니다:
Blink (Chrome, Opera)
WebKit (Safari)
Gecko (Firefox)
렌더링 엔진의 작업 과정은 다음과 같습니다:
HTML 파싱: HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성합니다.
CSS 파싱: CSS를 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다.
JavaScript 실행: JavaScript 코드를 실행하여 DOM이나 CSSOM을 수정할 수 있습니다.
레이아웃: DOM과 CSSOM을 결합하여 웹 페이지의 레이아웃을 계산합니다.
페인팅: 레이아웃 정보를 바탕으로 픽셀 단위로 화면에 그립니다.
6. 사용자 인터랙션
웹 페이지가 로드된 후, 사용자는 다양한 방식으로 페이지와 상호작용할 수 있습니다. 이러한 상호작용은 JavaScript 이벤트 핸들러를 통해 처리됩니다. 예를 들어, 버튼 클릭, 폼 제출 등이 이에 해당합니다.
-
추가 리소스 로드
웹 페이지는 종종 추가 리소스를 로드합니다. 이미지, 비디오, 추가적인 CSS 및 JavaScript 파일 등이 이에 해당합니다. 브라우저는 이러한 리소스에 대해 별도의 HTTP/HTTPS 요청을 보냅니다. -
캐싱
브라우저는 자주 사용되는 리소스를 캐싱하여 성능을 최적화합니다. 캐시된 리소스는 동일한 리소스에 대한 요청이 있을 때 서버로부터 다시 다운로드하지 않고 로컬 캐시에서 불러옵니다.
이러한 과정을 통해 웹 브라우저는 사용자가 입력한 URL에 해당하는 웹 페이지를 화면에 표시하고, 사용자가 웹 페이지와 상호작용할 수 있게 해줍니다.
쿠키, 세션의 개념과 차이를 설명해보세요
쿠키와 세션은 모두 웹 브라우저와 서버 간의 상태 정보를 유지하기 위해 사용되는 기술입니다. 하지만 그 개념과 사용 방식에는 차이가 있습니다.
쿠키 (Cookies)
개념:
쿠키는 웹 서버가 웹 브라우저에 저장하는 작은 데이터 조각입니다. 쿠키는 클라이언트 측(브라우저)에 저장되며, 브라우저는 이후 동일한 서버에 요청을 보낼 때 쿠키를 함께 전송합니다.
특징:
저장 위치: 클라이언트(브라우저) 측에 저장됩니다.
유효 기간: 쿠키에는 유효 기간이 설정될 수 있습니다. 유효 기간이 지나면 쿠키는 자동으로 삭제됩니다.
보안: 쿠키는 클라이언트 측에 저장되므로 보안에 취약할 수 있습니다. 민감한 정보는 쿠키에 저장하지 않는 것이 좋습니다.
용량: 대부분의 브라우저는 도메인당 최대 4KB의 쿠키 크기를 허용합니다.
범위: 특정 도메인 및 경로에 대해 설정될 수 있으며, 해당 도메인 및 경로로의 요청에만 전송됩니다.
사용 예:
로그인 상태 유지
사용자 선호 설정 저장 (예: 언어 설정)
트래킹 및 분석
세션 (Sessions)
개념:
세션은 서버 측에서 사용자의 상태를 유지하기 위해 저장하는 데이터입니다. 세션은 일반적으로 서버 메모리나 데이터베이스에 저장되며, 클라이언트와 서버 간의 상호작용 동안 지속됩니다.
특징:
저장 위치: 서버 측에 저장됩니다.
유효 기간: 세션은 일정 시간 동안 활동이 없으면 만료될 수 있습니다. 서버에서 설정된 시간(예: 30분) 동안 활동이 없으면 세션이 종료됩니다.
보안: 세션 데이터는 서버에 저장되므로 클라이언트 측보다 더 안전합니다. 하지만 세션 ID가 유출되면 보안 문제가 발생할 수 있습니다.
용량: 서버의 저장 용량에 따라 세션 데이터 크기가 제한됩니다.
범위: 세션은 일반적으로 사용자가 웹 애플리케이션에 접속한 후부터 로그아웃하거나 세션이 만료될 때까지 유지됩니다.
사용 예:
로그인 정보 유지
쇼핑 카트 정보 저장
일시적인 사용자 데이터 저장
주요 차이점
저장 위치:
쿠키: 클라이언트(브라우저) 측에 저장.
세션: 서버 측에 저장.
유효 기간:
쿠키: 설정된 유효 기간 동안 유지.
세션: 일반적으로 사용자가 활동하는 동안 유지되며, 일정 시간 동안 활동이 없으면 만료.
보안:
쿠키: 클라이언트 측에 저장되므로 보안에 취약할 수 있음.
세션: 서버 측에 저장되므로 비교적 더 안전함.
용도:
쿠키: 사용자 선호 설정, 로그인 상태 유지 등 장기적인 데이터 저장.
세션: 로그인 정보, 쇼핑 카트 등 일시적인 데이터 저장.
쿠키와 세션은 웹 애플리케이션에서 사용자의 상태를 유지하고, 사용자 경험을 개선하기 위해 중요한 역할을 합니다. 이 둘을 적절하게 활용함으로써 더 나은 웹 서비스를 제공할 수 있습니다.
최종프로젝트
프론트 Vue.js 로 결정
백엔드 로직 1차 데드라인 수요일 오전
역할별 코딩작업
