통합 요약노트
Ch.26 인증과 보안 기초 — 로그인 구현
JWT, OAuth, 소셜 로그인, 웹 보안 체크리스트
이 챕터의 내용
인증이란? — 너는 누구인가
인증(Auth) — 사용자의 신원을 확인하고 적절한 권한을 부여하는 시스템입니다.
인증은 "너 누구야?" 인가는 "너 이거 해도 돼?"
인증 방식은 크게 3가지가 있습니다
JWT는 점(.)으로 구분된 3개의 파트입니다
OAuth와 소셜 로그인
OAuth 2.0 — 외부 서비스(구글, 카카오)에 인증을 위임하는 표준 프로토콜입니다.
OAuth는 대리 인증입니다 구글이 대신 신원을 확인해줍니다
Supabase Auth로 5줄이면 소셜 로그인 완성
로그인 안 한 사용자는 자동으로 로그인 페이지로 보냅니다
웹 보안 기초 — 해킹 방어
웹 보안 기초 — XSS, CSRF, SQL Injection 3대 공격과 방어법을 알면 대부분의 위협을 막을 수 있습니다.
XSS는 사용자 입력에 악성 스크립트를 숨기는 공격입니다
CSRF는 남의 이름으로 요청 SQL Injection은 DB를 조작하는 공격
이 체크리스트만 지켜도 대부분의 공격을 막을 수 있습니다
핵심 용어 모음
세션 (Session)
서버가 사용자 정보를 저장. 쿠키로 세션 ID 전달. 서버 부담 있음
토큰 (JWT)
사용자 정보를 토큰에 담아 클라이언트가 보관. 서버 무상태(stateless)
OAuth
구글/카카오 같은 외부 서비스로 로그인. 비밀번호 관리 불필요
Header
알고리즘과 토큰 타입 정보. {"alg": "HS256", "typ": "JWT"}
Payload
사용자 정보(userId, role 등). Base64 인코딩이라 누구나 읽을 수 있음!
Signature
위조 방지 서명. 서버의 비밀키로 생성. 이것이 핵심 보안 요소
미들웨어 방식
요청이 페이지에 도달하기 전에 인증 확인. 가장 안전
컴포넌트 방식
페이지 컴포넌트 내에서 useSession 체크. 간단하지만 깜빡임 가능
서버 컴포넌트 방식
서버에서 세션 확인 후 렌더링. Next.js App Router에 적합
React 사용
JSX의 {} 안에 넣으면 자동 이스케이프. 가장 기본적인 방어
dangerouslySetInnerHTML 금지
사용자 입력을 HTML로 렌더링하지 않기
CSP 헤더
Content-Security-Policy로 외부 스크립트 실행 차단
비교 정리
| 항목 | 인증 (Authentication) | 인가 (Authorization) |
|---|---|---|
| 질문 | 당신은 누구입니까? | 이 작업을 할 권한이 있습니까? |
| 예시 | 이메일 + 비밀번호로 로그인 | 관리자만 삭제 버튼 표시 |
| 순서 | 먼저 수행 (1단계) | 인증 후 수행 (2단계) |
| 항목 | CSRF | SQL Injection |
|---|---|---|
| 공격 방식 | 로그인된 사용자의 브라우저를 이용해 위조 요청 전송 | 입력값에 SQL 쿼리를 삽입해 DB 조작 |
| 예시 | 악성 사이트에서 은행 송금 요청 자동 실행 | 로그인 폼에 ' OR 1=1 -- 입력 |
| 방어 | CSRF 토큰, SameSite 쿠키 | 파라미터화된 쿼리, ORM 사용 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기