JavaScript

• 문법 + 동작 원리 병행 학습

웹 브라우저 구성

• 웹 브라우저는 [브라우저/렌더링]엔진 등 여러 요소로 구성
  자바스크립트를 실행하는게 브라우저(크로미움 엔진 등?)
• 브라우저 엔진
  • 사용자 인터페이스 - 렌더링 엔진 간 동작 제어
  • 네트워크 통신, 데이터 저장소 접근
• 렌더링 엔진
  • 서버에서 수신한 HTML, CSS, JS 파싱 - DOM트리 / CSSOM 생성
  • 렌더 트리 구성 / 웹 페이지 생성 담당 핵심 컴포넌트
  • 크롬 브라우저 > Blink 렌더링 엔진 > V8 엔진

---

JavaScript 런타임 환경

• JS 코드 실행을 위한 모든 요소(엔진, API, 이벤트 루프 등)를 포함하는 생태계
• 엔진이 코드를 실행할 수 있도록
  DOM/이벤트 처리/네트워크 req/쿠키 관리/웹 스토리지 관리/API 등 다양한 기능을 제공하는 환경
• Ex) 브라우저 런타임, Node 런타임
• JS 엔진을 포함, 같은 엔진을 사용해도 다른 구성요소에 따라 실행 환경은 상이
• 브라우저 런타임 환경
  • window.alert(), document.getElementById() 등 브라우저 전용 API 사용 가능
  • JS 엔진 + DOM API + 이벤트 루프 + 타이머 등
• DOM(Document Object Model)
  • HTML, XML 문서를 트리 구조로 표현한 객체 모델
  • CSS 뽑을때 자주보는 그 구조
  • JS 엔진[메모리 힙/콜 스택] - Web/Global API - 이벤트 루프 - 콜백 큐/마이크로테스크 큐
    

---

• Node.js 런타임 환경
  • Node.js는 브라우저 없이 자바스크립트를 실행할 수 있는 런타임 환경
  • 파일 시스템, 네트워크, 프로세스 등 서버 개발에 필요한 API 제공
  • window, document 등 브라우저 객체는 없음
  • V8 엔진 위에 파일시스템, 네트워크, 이벤트 루프 등 서버 개발에 필요한 기능을 추가한 런타임

---

브라우저 런타임 환경 > JS엔진의 JavaScript 실행 원리

• 코드 해석 및 실행, 원리와 단계 특이
  • 스택 [Stack] : 콜 스택 - 현재 실행 중인 동기 코드 적재, 순서대로 실행
  • 힙 [Heap] : 코드 실행 중 생성/초기화한 변수 저장
  • 큐 [Queue] : 태스크 큐 - 비동기 코드의 콜백이 대기
• 하나의 스택이 모든 코드를 실행
• 기본적으로 싱글쓰레드/동기 처리
  
• 비동기 코드
  • setTimeout, Ajax EventListener, await ...
  • 즉시 실행되지 않는 코드 > 스택에 삽입하지 않고 별도 처리
  • 스택에 적재되어 실행 완료되지 않고 잔존시 코드 실행흐름 중지
  • API 단에서 비동기 로직 수행 후 콜백 함수 태스크 큐로 전달
  • 이벤트 루프 : 자바스크립트(특히 브라우저와 Node.js)에서 비동기 작업을 효율적으로 처리하는 핵심 메커니즘
    는 콜 스택이 빌 경우 콜백 함수를 큐에서 스택으로 전달
    • 마이크로태스크 큐(Microtask Queue)
      • 우선순위 높은 콜백 대기 큐

JWT

자격 증명/회원 인증/로그인
세션 토큰 활용

• 세션
  • 세션 발급 번호 저장
  • 서버사이드 유효성 확인 - 발급 번호 테이블 등 - 인증
• JWT
  • stateless : 소프트웨어나 시스템이 이전의 상태나 세션 정보를 저장하지 않음 ↔ stateful
  • 이전 상태(서버에 저장중인 발급 번호 테이블 등) 확인하지 않고 토큰만 확인
  • 사용자 정보/상태 등을 토큰에 저장
  • 서버사이드 체크 - 인증
  • HEADER[기본 세팅] + PAYLOAD[유저 데이터] + VERIFY SIGNATURE[인코딩 설정(시크릿 키)] 을 인코딩해서 사용

Perplexity

JWT(JSON Web Token)는 인증 및 정보 전달을 위해 사용되는 토큰 기반의 표준입니다.
JWT는 JSON 포맷의 데이터를 URL-safe 방식으로 인코딩한 문자열로, 세 부분으로 구성됩니다:

Header: 토큰 타입(JWT)과 서명 알고리즘(예: HS256, RS256) 정보가 담깁니다.

Payload: 실제 인증 및 권한 정보(클레임, claims)가 들어갑니다. 예: 사용자 ID, 만료 시간 등.

Signature: Header와 Payload를 비밀키(서버만 알고 있음)로 서명한 값. 토큰의 위변조 여부를 검증하는 데 사용됩니다.

JWT는 주로 인증(Authorization) 용도로 많이 사용되며, 클라이언트가 서버에 로그인하면 서버가 JWT를 발급해주고, 이후 클라이언트는 이 토큰을 HTTP 헤더(Authorization: Bearer ...)에 담아 서버에 요청을 보냅니다.

서버사이드에서 JWT 토큰 유효성 검사 방식
서버는 클라이언트로부터 전달받은 JWT 토큰이 정상적으로 발급된 것인지와 위변조되지 않았는지를 검증해야 합니다.

1. 토큰 분리 및 파싱
   서버는 Authorization 헤더에서 토큰을 추출합니다.

JWT는 .(dot)으로 구분된 세 부분(Header, Payload, Signature)으로 구성되어 있으므로, 이를 분리합니다.

2. 서명(Signature) 검증
   서버는 토큰의 Header와 Payload를 동일한 방식(동일한 알고리즘, 동일한 비밀키)으로 서명하여 Signature를 새로 생성합니다.

이 새로 생성한 Signature와 토큰의 Signature가 일치하는지 비교합니다.

일치하면: 토큰이 위변조되지 않았으며, 서버가 발급한 유효한 토큰임을 의미합니다.

불일치하면: 토큰이 변조되었거나, 잘못된 비밀키로 서명된 토큰이므로 인증 실패 처리합니다.

3. 만료 및 기타 클레임 확인
   Payload에 있는 만료 시간(exp), 발급자(iss), 사용자 정보 등도 함께 검증합니다.

만료 시간이 지났거나, 기타 클레임이 맞지 않으면 인증 실패 처리합니다.

JWT 취급시 주의사항/보안상 허점

• 취약성 및 공격 문제
  • none 알고리즘 공격 alg : none injection
  • 토큰 디코딩
  • 시크릿키 무작위 도입
  • JWT탈취 - 정지처리(힘듬, stateless jwt는 원래 불가)
    • 탈취 어렵게
    • 탈취된키 블랙리스트(세션이랑 쌤썜)
    • 유효기간 짧게(리프레시토큰, 리프레시토큰 로테이션, 토큰은 1회용)
• 취약성 보완 및 보안
  • 시크릿키 완성도 강화
  • 시크릿키 유출 통제
  • 생성용/검증용 키 각각 생성 및 운용(라이브러리 활용)
• 정리
  • 기본적으론 세션 방식이 전통적/안정적
  • 사용자 다수/마이크로서비스 다수 시 JWT 유효

2025-05-16

웹 브라우저
 - 브라우저 엔진
 - 렌더링 엔진
   - JS 런타임
     - JS 엔진
     - 이벤트 루프
JWT
  - HEADER
    - 서명 알고리즘
  - PAYLOAD
    - 사용자 정보
  - VERIFY SIGNATURE
    - 비밀키