브라우저 작동 방식
-
URL 입력
사용자가 브라우저 주소창에 URL을 입력한다. -
IP 주소 찾기
2-1. 로컬의 호스트 파일 확인- 로컬 시스템에서 사용하는 정적인 호스트 이름과 IP 주소 매핑 정보를 저장하는 텍스트 파일
- 특정 도메인에 대한 IP 주소를 직접 지정할 수 있다.
-DNS 조회-
2-2. DNS 캐시 확인
최근에 수행된 DNS 조회 결과를 저장하는 메모리 영역2-3. DNS 서버로 DNS 쿼리를 보내기
DNS(Domain Name System)
IP 주소와 도메인명을 서로 교환하는 장치 -
서버 연결
IP 주소를 사용하여 웹 서버와 TCP/QUIC 연결QUIC는 UDP 위에 만들어졌다.
TCP는 핸드쉐이킹 과정을 통해 연결하고 해제한다. 이는 신뢰성 있는 통신을 위함이다.
-
HTTP 요청
서버에게 HTTP 요청을 보낸다. -
서버 응답
서버는 요청을 받아 처리하고, HTML, CSS, JavaScript 등의 파일을 보냅니다.
브라우저 렌더링
-
브라우저 렌더링 엔진은 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고, 이들을 결합하여 렌더 트리를 생성한다.
-
브라우저의 자바스크립트 엔진은 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM이나 CSSOM을 변경할 수 있고, 변경된 DOM과 CSSOM은 렌더 트리로 결합된다.
-
렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅힌다.
GET vs POST
GET
- 데이터를 URL에 파라미터(쿼리 스트링)로 포함시켜 전송
- 일반적으로 URL 길이에 제한이 있으므로 많은 데이터를 전송하기에는 적합하지 않다.
- 데이터가 URL에 노출되기 때문에 민감한 정보를 전송하는 데에는 적합하지 않다.
POST
- 요청 본문에 데이터를 포함시켜 전송
- 데이터 길이 제한이 없다.
- 데이터가 URL에 노출되지 않아 보안이 필요한 부분에 많이 사용된다.
TCP와 UDP
프로토콜은 데이터의 교환 방식을 정의하는 규칙 체계
TCP
- 패킷 전송을 제어하여 신뢰성을 보증하는 프로토콜
- 신뢰성 있는 통신을 할 수 있도록 handshaking 과정을 거친다.
3-way handshaking 과정을 통해 연결을 설정하고,
4-way handshaking을 통해 해제한다.
UDP
- 데이터그램 방식을 사용하는 프로토콜로 패킷 간의 순서가 존재하지 않는 독립적인 패킷을 사용한다.
- handshaking 과정을 거치지 않기 때문에 속도가 빠르다.
- 실시간 영상 스트리밍과 같은 곳에 이용된다.
- 커스터마이징이 가능하다.
애플리케이션에서 구현을 어떻게 하냐에 따라서 TCP와 비슷한 수준의 기능을 가질 수도 있다.
HTTP vs HTTPS
웹에서 데이터를 전송하는 프로토콜
HTTP
- 데이터가 암호화되지 않고 전송되므로 보안에 취약하다.
HTTPS
- HTTP 네트워크 프로토콜에 SSL/TLS(보안 인증서)에 의한 암호화 통신 기능을 추가한 것
SSL은 암호화 프로토콜로, 서로 인증시키고 데이터를 암호화한다.
SSR, CSR, SSG
CSR
-
클라이언트에서 렌더링하는 방식
-
장점
페이지 전환이 빠르다.
서버의 부담이 적다. -
단점
SEO, 초기 로딩 속도, 보안
SSR
서버에서 페이지를 렌더하여 완성된 HTML을 클라이언트에 제공하는 방식이다.
서버에서 초기 렌더링을 수행하고, 클라이언트는 렌더링된 페이지를 받아와 렌더링된 상태에서 시작한다.
-
장점
SEO, 초기 로딩 속도, 보안 -
단점
서버에 과부하가 발생할 수 있다.
사용자가 보는 시점과 이용할 수 있는 시점 간 시간 간격이 존재한다.
SSG
-
장점
CSR과 SSR의 장점을 모두 가진다 -
단점
콘텐츠가 변경될 때마다 빌드 작업을 수행해줘야 한다.
개발자 도구
요소
스타일 적용이 잘 됬는지 확인, 반응형 작업
콘솔
디버깅
네트워크
- 데이터 fetch 실패 시 원인을 찾기 위해 활용
- 리소스의 크기, 시간 등을 확인하기 위해 활용
애플리케이션
웹 스토리지, 쿠키 등을 확인
라이트하우스
성능 측정 및 개선을 위해 활용
Web Vital
Chrome DevTools 또는 Lighthouse를 사용하여 측정할 수 있다.
LCP (Largest Contentful Paint)
- 가장 큰 콘텐츠를 그리는데 걸리는 시간
- 개선 방법: 렌더 차단 리소스 제거(CSS/JS 최소화, 지연 로딩 등), 이미지 최적화(picture 태그 등)
CLS (Cumulative Layout Shift)
- 누적 레이아웃 쉬프트
- 개선 방법: 이미지/영상 크기 지정, 폰트 최적화 등
FID (First Input Delay)
- 웹 페이지가 사용자의 동작에 반응할 때까지 걸리는 시간
- 개선 방법: CSS/JS 최적화, 코드 스플리팅
브라우저 렌더링
- 브라우저는 필요한 리소스를 서버에 요청하고 응답받는다.
- 브라우저 렌더링 엔진은 HTML을 파싱하여 DOM을 생성한다.
- DOM을 생성해 나가다가 CSS를 로드하는 link나 style 태그를 DOM 생성을 일시 중지한다.
- CSS 파일을 서버에 요청하여 로드한 CSS를 파싱하여 CSSOM을 생성한다. 파싱을 완료하면 DOM 생성을 재개한다.
- DOM과 CSSOM을 결합하여 렌더 트리를 생성한다.
- 브라우저의 자바스크립트 엔진은 JavaScript를 파싱하고 바이트코드로 변환하여 실행한다. DOM API를 사용해서 DOM이나 CSSOM을 변경하면 변경된 DOM이나 CSSOM은 렌더 트리로 결합된다.
- 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 요소를 페인팅한다.
리플로우와 리페인트
자바스크립트가 DOM API를 통해 DOM이나 CSSOM을 변경하면,
변경된 DOM과 CSSOM은 렌더 트리로 결합된다.
변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면에 다시 렌더링한다.
리플로우
- 레이아웃 계산을 다시 하는 것
- 노드 추가/삭제, 요소의 크기/위치 변경 등
리페인트
- 다시 페인트 하는 것
SEO
SEO란?
검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업
SEO 진행 방법
- 사이트맵 제출, 설명 URL 사용, 검색어를 예상하여 콘텐츠 만들기, 적절한 title 및 description 작성, 스니펫 관리, 이미지 추가 및 최적화, 동영상 최적화
- 백링크 구축
웹 스토리지
- 저장 위치: 브라우저
Local Storage
- 브라우저를 닫아도 데이터가 유지된다.
- 명시적으로 삭제할 때까지 데이터가 유지된다.
- 다른 탭에서도 동일한 도메인에 대해 데이터를 공유할 수 있다.
- 지속적으로 필요한 데이터를 저장한다. (자동 로그인)
Settion Storag
- 브라우저 탭을 닫으면 데이터가 삭제된다.
- 한 브라우저 탭에서만 데이터를 저장한다.
- 일시적으로 필요한 데이터를 저장한다. (비로그인 장바구니)
Cookie
- 저장 위치: 브라우저
- 서버는 HTTP 응답의 일부로 쿠키를 클라이언트에게 보내고, 이후 클라이언트는 같은 서버에 요청을 보낼 때마다 쿠키를 함께 전송합니다
- 서버에 HTTP 요청 시 쿠키가 포함되어 전송된다.
보안 취약점
- XSS(Cross Site Scripting)
- 웹사이트에 Script를 삽입하는 공격
- 악성 Script가 있는 페이지를 열람한 사용자의 쿠키가 공격자에게 전송될 수 있다.
- document 객체로 cookie에 접근할 수 있기 때문이다.
- HttpOnly 속성이 설정된 쿠키는 JavaScript로 접근할 수 없고, HTTP 요청을 통해서만 전송된다.
- CSRF(크로스 사이트 요청 위조, Cross-Site Request Forgery)
쿠키에 SameSite 설정을 하지 않으면, 크롬을 제외한 브라우저들은 모든 HTTP 요청에 대해서 쿠키를 전송한다.
즉, 다른 사이트에서 쿠키를 포함하여 요청을 보낼 수 있게 된다.
이를 악용한 공격이다.
https://caniuse.com/same-site-cookie-attribute
영속적인 쿠키
- 만료 날짜까지 쿠키가 유지된다.
세션 쿠키
- 만료 시간을 명시하지 않으면 세션 쿠키로 간주된다.
- 브라우저가 종료될 때 만료된다.
세션
- 세션 데이터를 서버에 저장한다.
- 쿠키에 세션 ID를 저장한다.
- 사용자가 많아질수록 서버 메모리를 많이 차지한다.
- 유효 기간: 만료 날짜 또는 브라우저 종료시까지
JWT
- 서버가 별도로 사용자의 상태 정보를 저장하지 않아도 된다.
- 토큰은 한 번 만들면 (탈취 당하더라도) 서버에서 제어할 수 없다.
따라서 유효기간이 짧은 Access Token과 조금 긴 Refresh Token 두 개를 발급하는 방법이 있다.
CORS 에러
CORS란?
교차 출처 리소스 공유(Cross-Origin Resource Sharing)는 다른 출처의 리소스 공유에 대한 허용/비허용 정책
에러 원인
SOP, 즉 동일 출처 정책 (Same-Origin Policy) 정책에 따라 브라우저가 다른 출처의 리소스를 차단하면서 발생
해결 방법
- CORS 정책에 따르면 다른 출처의 리소스라도 허용한다.
- 서버에서 Access-Control-Allow-Origin 헤더 세팅하기
