📌 1. 웹 프로젝트 폴더 구조 - 기초 → 실무 → 심화 → 실전 예시

---

🏠 1-1. 기본 구조 (기초)

/project
 ├── index.html       → 메인 설계도 📄
 ├── css/
 │    └── style.css    → 인테리어 벽지 🎨
 ├── js/
 │    └── main.js      → 전기, 기능 제어 ⚡
 └── images/
      └── logo.png     → 가구, 소품 🛋️

📢 비유:

• index.html → 집 설계도 📐
• css/ → 집의 인테리어 디자인 🎨
• js/ → 전기 배선, 기능 제어 ⚡
• images/ → 소품, 가구 배치 🛋️

---

🚀 1-2. 실무형 구조 (중대형 프로젝트)

/project
 ├── public/                 → HTML, favicon, robots.txt 등 정적 파일
 ├── src/
 │    ├── assets/            → 이미지, 폰트, 아이콘, 영상 🎨
 │    ├── components/        → 재사용 가능한 UI 조각 🧩
 │    ├── pages/             → 페이지 단위 구성 📄
 │    ├── styles/            → CSS, SCSS, 모듈화된 스타일 파일 🎀
 │    ├── scripts/           → API 통신, 유틸 함수, JS 기능 🧠
 │    ├── tests/             → 단위 테스트, e2e 테스트 🧪
 │    └── hooks/             → 커스텀 훅, 상태 관리 (React 등) 🔁
 ├── dist/                   → 빌드된 배포용 폴더 📦
 ├── .gitignore              → 불필요 파일 무시 설정 🚫
 ├── package.json            → 프로젝트 메타 정보 📦
 └── README.md               → 프로젝트 설명서 📚

✅ 실무 핵심 포인트:

• src/ → 역할별 철저히 분리 (유지보수/협업 필수)
• dist/ → 배포용 폴더, 실제 서버에 올라가는 결과물
• 모듈화 & 재사용성 ↑, 큰 프로젝트일수록 필수

---

💎 1-3. 심화: 네이밍 & 협업 규칙

규칙	설명
소문자 + kebab-case	대소문자 충돌 방지, 팀 통일성 유지 📏
기능별 폴더 명확 분리	assets, components, pages 명확 구분 ✅
README.md & docs 폴더	폴더 구조, 환경 변수, 세팅법 필수 문서화 📖
환경변수 관리	.env 파일 분리, .gitignore로 예외 처리 🔐

---

🔥 1-4. 실전 폴더 예시 (React 기준)

/my-project
 ├── public/
 │    └── index.html  // 정적 HTML
 ├── src/
 │    ├── assets/     // 이미지, 폰트
 │    ├── components/ // Button, Navbar 등 UI
 │    ├── pages/      // HomePage, AboutPage
 │    ├── hooks/      // useAuth, useFetch
 │    ├── styles/     // variables.scss, mixins.scss
 │    └── scripts/    // api.js, utils.js
 ├── dist/            // 빌드 결과
 ├── .env             // 환경 변수 (API KEY 등)
 ├── .gitignore
 ├── README.md
 └── package.json

---

🎯 1-5. 기술면접 대비 질문

질문	심화 답변
폴더 구조 어떻게 설계?	src/dist 구분, 기능/역할별로 철저히 나누고, README & .env로 협업 편의성 확보
네이밍 규칙?	kebab-case, 소문자 일관성, 팀 내 네이밍 룰 문서화
협업 시 어떻게 폴더 구조 통일?	docs에 명확히 정의, Linter와 CI에서 폴더 규칙 검증 가능

---

📌 실전 TIP!

대형 프로젝트 시작 전:

• 📖 README에 폴더 구조, 브랜치 전략, 환경 세팅 꼭 작성
• .env.example 템플릿 제공
• Prettier, ESLint 설정 공유

→ 협업 속도🚀, 유지보수성📈

🚀 2. 버전 관리 (Git & GitHub) - 기초 → 실무 → 심화 → 실전 예시

---

✅ 2-1. Git 기본 명령어 (기초)

명령어	역할	설명
git init	초기화	현재 폴더를 Git 관리 폴더로 설정
git add .	스테이지 추가	수정된 파일들 준비 (스냅샷 전 단계)
git commit -m "msg"	커밋	현재 상태 저장 (변경 히스토리 생성)
git log	커밋 내역	과거 커밋 기록 확인
git status	상태 확인	변경된 파일, 스테이징 여부 확인
git push/pull	원격 연동	원격 저장소에 업로드/다운로드

📢 비유:

• git init → 📁 “시간여행 시작!”
• add → 🎒 “변경된 것들 가방에 담기”
• commit → 📸 “현재 상태 사진 찍기”
• push/pull → 🌐 “서버에 업로드 or 가져오기”

---

🚀 2-2. GitHub 실무 협업 구조

항목	실무 전략
Branch 전략	main(배포), develop(통합), feature/, hotfix/ 사용
PR (Pull Request)	기능 완료 → 리뷰 요청 → 팀원 승인 → Merge
.gitignore	node_modules, .env, dist 등 무시
README.md	설치 방법, 브랜치 전략, 폴더 구조 필수 설명
Issue 관리	작업 단위로 할 일 관리 (GitHub Issue 활용)

---

💎 2-3. 심화: Rebase, 충돌 해결, Stash

🔥 Git Rebase & Merge 차이

비교	Merge	Rebase
커밋 히스토리	분기점 유지, 복잡할 수 있음	선형, 깔끔, 브랜치 줄기 하나로
협업시	다수가 작업할 땐 Merge 안전	Rebase → 커밋 덮어쓰기 주의
사용처	일반적 PR Merge	내 로컬 브랜치 정리할 때 유용

---

✅ Rebase 실전 예시

# feature 브랜치로 이동
git checkout feature/login

# 최신 develop과 내 feature를 깔끔히 합치기
git rebase develop

# 충돌 발생 시:
# 1️⃣ 충돌 파일 수정
git add .

# 2️⃣ Rebase 재개
git rebase --continue

---

💡 충돌 해결 시 팁

• VSCode GitLens + Diff 툴 활용 → 충돌 난 부분 쉽게 비교 가능!
• Conflict markers:

<<<<<<< HEAD
현재 브랜치 코드
=======
다른 브랜치 코드
>>>>>>> develop

✅ → 둘 중 필요한 부분만 남기고 삭제!

---

🧳 Stash 활용 예시

# 임시로 현재 변경사항 저장 (브랜치 전환 전)
git stash

# 다시 적용
git stash apply

---

🌐 2-4. 실전 예시 (협업 상황)

# 1️⃣ 작업 시작: develop에서 최신화 --------------------------------------

git checkout develop        # develop 브랜치로 이동 (현재 작업 시작점)
git pull origin develop     # 원격(origin)의 develop 브랜치 최신 내용 가져와서 로컬에 반영
# → 항상 작업 전 최신 코드로 맞춰줘야 충돌 최소화!

# 2️⃣ feature 브랜치 생성 ---------------------------------------------

git checkout -b feature/signup
# feature/signup이라는 새로운 브랜치 생성 + 자동으로 그 브랜치로 이동
# 브랜치 이름 규칙: 보통 feature/기능명 형태로 사용 (가독성 & 관리용이)

# 3️⃣ 작업 후 커밋 -----------------------------------------------------

git add .
# 변경된 모든 파일 스테이징 영역에 추가 (커밋 준비)

git commit -m "Add signup page"
# 변경 내용을 커밋 → 메시지에는 **무엇을 했는지 명확히** 작성 ("Signup 페이지 추가")

# 4️⃣ 원격 feature 브랜치 올리기 --------------------------------------

git push origin feature/signup
# 방금 만든 feature/signup 브랜치를 원격(origin) 저장소로 push
# → 팀원들과 협업을 위해 원격 브랜치로 올리는 단계

# 5️⃣ PR (Pull Request) → 리뷰 요청 & 머지 ----------------------------

# GitHub, GitLab, Bitbucket 등에서
# feature/signup 브랜치를 develop 브랜치로 병합(Merge) 요청 (Pull Request)
# → 팀원에게 코드 리뷰 요청, 승인되면 develop에 머지!

---

🎯 2-5. 기술면접 대비 질문

질문	심화 답변
협업 시 브랜치 전략?	main, develop, feature/, hotfix/ 명확히 관리 + PR 프로세스
Merge와 Rebase 차이?	Merge는 분기점 유지, Rebase는 깔끔한 히스토리 → 협업 땐 Merge 안전
.gitignore 역할?	빌드 결과물, 환경 변수, 개인 설정 파일 무조건 제외 → 충돌 방지
Stash 언제 사용?	긴급 브랜치 전환, 임시 변경 저장 후 다시 적용할 때 유용

---

📌 실무 포인트

상황	실무 팁
협업 시 충돌 빈발	PR → 리뷰 → Merge 확실히 관리 + 충돌 땐 주석 활용
브랜치 관리	Issue 번호 기반으로 브랜치 네이밍 → 추적성 ↑
커밋 메시지 규칙	feat:, fix:, chore: Prefix 사용으로 기록 관리

---

---

🌟 정리 요약

항목	실무 스킬	면접 심화
Branch 전략	main/develop/feature 관리	브랜치 충돌 시 해결 전략
Rebase vs Merge	상황 맞게 구분	히스토리 관리 원리, 협업 시 주의
PR 프로세스	리뷰 & 머지 필수	리뷰 프로세스 중요성
.gitignore	불필요 파일 제외	충돌 방지 & 보안
Stash	임시 저장 스킬	긴급 대응 전략

---

⚡ 3. 웹 성능 최적화 - 기초 → 실무 → 심화 → 실전 예시

---

🏎️ 3-1. 기본 최적화 방법 (기초)

기법	설명
Minify	HTML, CSS, JS 공백, 주석 제거 (파일 사이즈↓)
파일 병합	JS/CSS 여러 파일 → 1~2개로 합쳐 HTTP 요청 수 ↓
Lazy Loading	이미지, iframe 스크롤 시점에 로딩
Gzip/Brotli	서버에서 파일 압축해 전송 (대역폭 절약)

✅ 실전 적용 예시:

<!-- HTML/CSS/JS Minify: 불필요한 공백, 줄바꿈, 주석 등을 제거해 파일 용량 ↓, 로딩 속도 ↑ -->

<!-- 압축(minify)된 CSS 파일 불러오기 -->
<link rel="stylesheet" href="style.min.css">

<!-- 압축(minify)된 JS 파일 불러오기 -->
<script src="main.min.js"></script>

<!-- 이미지 Lazy Loading: 사용자가 해당 이미지가 보일 때만 로딩 (초기 로딩 속도 ↑, 성능 최적화) -->
<img src="product.jpg" loading="lazy" alt="Product Image">
<!-- alt 속성: 이미지 대체 텍스트 (접근성, SEO 향상) -->

📢 비유:

• Minify → 📄 문서에서 공백과 주석 쫙 빼서 더 가벼운 요약본
• 파일 병합 → 배달 한 번에 여러 개 묶어서 보내기
• Lazy Load → 손님 왔을 때만 음식 내놓기
• Gzip → 박스 속 물건 압축해서 배송 📦

---

🚀 3-2. 실무 최적화 스킬

기법	도구/방법
Tree Shaking	Webpack, ES6 모듈 → 안쓰는 JS 제거
Code Splitting	Dynamic Import로 페이지별 JS 분리
Critical CSS	위쪽 CSS만 먼저 로딩, 나머지 지연 처리
CDN 활용	Cloudflare, AWS CloudFront로 정적 자원 전세계 배포

---

✅ Tree Shaking 실전 예시

// utils.js

// add 함수: 두 수를 더해서 반환
export const add = (a, b) => a + b;

// subtract 함수: 두 수를 빼서 반환
export const subtract = (a, b) => a - b;

// 두 함수 모두 ES6 모듈 방식으로 export (개별 내보내기)
// 중요한 포인트: ES6 모듈은 정적 구조 → Webpack이 사용 여부 쉽게 분석 가능 (Tree Shaking 가능)

---

✅ Code Splitting 실전 예시 (React 기준)

// routes.js
// React에서 lazy loading 기능과 Suspense 컴포넌트 가져오기
import React, { lazy, Suspense } from 'react';

// ---------------------------
// 컴포넌트 "지연 로딩(lazy loading)" 설정
// Home 컴포넌트: 필요할 때 비동기로 불러옴 → 번들 초기 크기 ↓
const Home = lazy(() => import('./pages/Home'));

// About 컴포넌트: 마찬가지로 필요할 때만 비동기로 불러옴
const About = lazy(() => import('./pages/About'));

// ---------------------------
// 메인 App 컴포넌트 정의
function App() {
  return (
    // Suspense: lazy로 로딩 중일 때 보여줄 fallback UI 설정
    <Suspense fallback={<div>Loading...</div>}>
      {/* Home 컴포넌트는 실제로 필요할 때 불러와 렌더링됨 */}
      <Home />

      {/* About 컴포넌트도 필요 시 비동기 로딩됨 */}
      <About />
    </Suspense>
  );
}
// ---------------------------
// 결과:
// - Home & About 컴포넌트는 초기 번들에 포함되지 않고, 필요할 때 개별적으로 로드
// - 로딩 중엔 "Loading..." 메시지가 잠깐 표시
// - **React의 코드 스플리팅 + 성능 최적화 핵심 패턴!**

→ 필요한 페이지에서만 JS 불러옴 → 초기 로딩 속도↑

---

✅ Critical CSS 적용

<style>
  /* 🟢 Critical CSS: 첫 화면에서 바로 보여야 하는 핵심 스타일만 인라인으로 넣기 */
  header {
    background: #fff;       /* 헤더 배경 흰색 */
    position: fixed;        /* 스크롤해도 고정 */
    top: 0;                 /* 화면 맨 위에 위치 */
  }
  /* → Critical CSS는 렌더링 지연 없이 바로 적용되므로 LCP(최대 콘텐츠 표시 시간) 개선! */
</style>

<!-- 🌐 외부 CSS 비동기 로딩 -->
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
<!-- 
1️⃣ media="print": 초기엔 print 전용으로 설정 → 화면 렌더링에 영향 X
2️⃣ onload="this.media='all'": CSS 파일이 다 로드된 후에 media를 'all'로 바꿔 적용
3️⃣ 결과: 외부 CSS가 비동기로 로드 → 페이지 렌더링 블로킹 방지 → 성능 최적화 🚀
-->

---

💎 3-3. 심화: Critical Rendering Path 최적화

단계	설명
HTML 파싱	DOM Tree 생성 📄
CSSOM 파싱	CSS 파싱 후 CSSOM Tree 생성 🎨
JS 파싱	JS는 Blocking → defer/async 필수
Render & Paint	렌더링 완료 → 화면 표시

---

✅ JS 비동기 로딩 예시

<!-- 외부 라이브러리 또는 공통 스크립트 (벤더 스크립트) 불러오기 -->
<script src="vendor.js" defer></script>
<!-- 
  ✅ defer 속성: HTML 파싱이 끝난 후에 스크립트 실행
  ✅ HTML 문서 구조가 모두 준비된 후 실행 → DOM 차단 X → 페이지 로딩 속도 개선
-->

<!-- 메인 스크립트 불러오기 -->
<script src="main.js" defer></script>
<!-- 
  ✅ main.js: 페이지 기능 담당하는 스크립트
  ✅ defer로 인해 vendor.js → main.js 순서 **보장**
  ✅ 둘 다 defer → HTML 파싱과 병렬로 다운로드, 파싱 끝난 후 순서대로 실행
-->

• defer → HTML 파싱 끝나고 JS 실행
• 초기 화면 빠르게 띄우기!

---

🌍 3-4. 실무 실전 최적화 레시피

🛠️ Webpack + 실전 설정 예시:

// webpack.config.js
module.exports = {
  // 🔥 프로덕션 모드 설정
  mode: 'production', 
  // → 자동으로 JavaScript, CSS 등 파일을 **Minify(압축)** 해줌
  // → 콘솔 로그 제거, 최적화 적용 (파일 크기 ↓, 성능 ↑)

  optimization: {
    // ✅ 코드 스플리팅 설정
    splitChunks: { chunks: 'all' }, 
    /* 
      → 여러 JS 파일 간에 공통으로 사용되는 코드를 별도의 파일로 분리
      → 결과:
         - 중복 코드 제거
         - 캐싱 효율 ↑
         - 초기 로딩 속도 개선
    */
    // ✅ Tree Shaking 활성화
    usedExports: true 
    /* 
      → ES6 모듈에서 사용되지 않는 export 코드를 자동으로 제거
      → 결과:
         - 불필요한 코드 줄이고 번들 크기 ↓
         - **import된 코드 중 실제 사용하는 것만 남김**
    */
  }
};

🌐 CDN 설정 간단 예시:

• Cloudflare, AWS S3 + CloudFront 배포 → JS/CSS/Image 전세계 캐싱
• DNS 설정 → www.domain.com → CDN 연결

---

🎯 3-5. 기술면접 대비 질문

질문	심화 답변
웹 성능 최적화 방법?	Minify, Lazy Loading, Tree Shaking, Code Splitting, Critical CSS, CDN
Critical Rendering Path란?	DOM→CSSOM→JS 파싱→Paint, 불필요한 Blocking 최소화
Tree Shaking 원리?	ES6 모듈 export 기준, 사용되지 않는 함수/변수 제거
Code Splitting 언제 필요?	초기 로딩 최적화, 페이지별 기능 별도 로딩

---

📌 실무 포인트 정리

상황	실전 적용
페이지 초기 로딩 느림	Code Splitting + Critical CSS + Lazy Load
JS 번들 용량 ↑	Tree Shaking + Minify
전세계 유저	CDN 활용 필수
렌더링 지연	defer, async + 이미지 최적화

---

---

🚀 정리 요약

🌟 주제	실무 스킬	면접 심화
Minify	HTML/CSS/JS 공백 주석 제거	빌드 설정에 포함 여부
Lazy Load	이미지 지연 로딩	loading=”lazy” 적용 조건
Tree Shaking	Webpack, ES6 모듈 기반	사용하지 않는 export 제거 원리
Code Splitting	Dynamic Import	페이지별 JS 나누기
Critical CSS	위쪽 CSS 먼저 렌더	스타일 충돌 최소화
CDN	정적 자원 전세계 배포	캐시 전략, DNS 설정

🔒 4. 웹 보안 개념

---

🛡️ 4-1. XSS (Cross-Site Scripting)

🚨 XSS란?

• 공격자가 웹 페이지에 악성 스크립트 삽입
• 사용자의 브라우저에서 해당 스크립트가 실행
• 세션 탈취, 피싱 페이지 생성, 웹사이트 변조 등 가능

---

🎯 XSS 발생 원인

원인	설명
🔑 입력값 검증 미흡	<script> 같은 태그가 그대로 반영됨
📝 innerHTML 등 직접 DOM 삽입	사용자 입력을 그대로 DOM 삽입 → 스크립트 실행
🔄 신뢰할 수 없는 외부 데이터 처리	API, 댓글, 게시판 데이터에 대한 검증 부재

---

✅ XSS 방어법

방법	설명
✂️ 입력값 Escape 처리	<, >, ', " → &lt;, &gt; 등으로 변환해 무력화
🔐 CSP(Content Security Policy)	신뢰된 출처만 스크립트 허용 (ex. 외부 스크립트 차단)
🧼 DOM 삽입 시 textContent 사용	innerHTML 사용 자제 → textContent, createTextNode 활용
🚫 HttpOnly 쿠키 사용	세션 쿠키를 JavaScript로 접근 불가하게 설정
✅ 입력값 Validation & Length 제한	입력 가능 길이와 포맷을 엄격히 제한

---

💻 실전 방어 예시 (주석 포함)

// ❌ 취약한 코드: 스크립트가 그대로 실행될 수 있음
div.innerHTML = userInput;

// ✅ 안전한 방법 1: textContent 사용
div.textContent = userInput; // 스크립트 실행 불가, 단순 텍스트 처리

// ✅ 안전한 방법 2: Escape 처리 함수 사용
function escapeHTML(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}
div.innerHTML = escapeHTML(userInput);

<!-- ✅ CSP 적용: 외부 스크립트 차단, 인라인 스크립트 차단 -->
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self';
  object-src 'none';
  frame-ancestors 'none';">

---

📢 비유:

• XSS → 고객이 레스토랑에 와서 음식에 독극물 넣는 상황 💀
• Escape 처리 → 독극물은 포장해서 못 쓰게 만듦 🧯
• CSP → “외부 음식 반입 금지” 규칙 🛑

---

---

🔐 4-2. CSRF (Cross-Site Request Forgery)

🚨 CSRF란?

• 사용자가 로그인된 상태에서 악성 요청이 자동 전송
• 세션 쿠키 자동 전송 → 공격자가 사용자의 권한으로 위조 요청 가능

---

🎯 CSRF 발생 원인

원인	설명
🍪 자동으로 전송되는 세션 쿠키	브라우저가 요청마다 쿠키 자동 첨부
🎯 요청 출처 검증 미비	요청이 어디서 왔는지 확인 안 함

---

✅ CSRF 방어법

방법	설명
🏷️ CSRF Token 발급	요청마다 고유 토큰 포함 → 서버에서 검증
🌐 SameSite 쿠키 설정	외부 사이트 요청 시 쿠키 전송 제한
🔍 Referer/Origin 검증	요청 출처가 정상 도메인인지 확인
📮 POST 요청만 허용	민감한 작업은 GET 금지, POST/PUT만 사용

---

💻 실전 방어 예시 (주석 포함)

<!-- ✅ CSRF Token 포함 -->
<form action="/updateProfile" method="POST">
  <input type="hidden" name="csrfToken" value="secureRandomToken123">
  <button type="submit">Update</button>
</form>

# ✅ SameSite + Secure + HttpOnly 설정
Set-Cookie: sessionId=abc123;
             SameSite=Strict;  /* 외부 사이트에서 쿠키 전송 불가 */
             Secure;           /* HTTPS에서만 */
             HttpOnly;         /* JS에서 접근 불가 */

📢 비유:

• CSRF → 택배를 내 이름으로 도둑이 보냄 📦
• CSRF Token → 내가 쓴 서명 확인 🖊️
• SameSite=Strict → 다른 집(사이트)에서는 내 택배 주문 못 함 🚫

---

---

🔒 4-3. HTTPS 적용 (SSL/TLS)

🚨 HTTPS란?

• HTTP + SSL/TLS 암호화
• 중간에서 데이터 탈취, 위변조, 스니핑 방지
• 사용자에게 신뢰 인증서 제공

---

✅ HTTPS 효과

효과	설명
🔒 데이터 암호화	통신 내용 노출 방지
🏢 서버 신원 인증	피싱, 중간자 공격 방지
📈 SEO & 브라우저 경고 제거	HTTPS 미적용 시 브라우저 경고, 신뢰도↓

---

💻 실전 적용 예시 (주석 포함)

# ✅ Nginx HTTPS 설정 (Let's Encrypt 인증서)
server {
  listen 443 ssl;

  # SSL 인증서 위치
  ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem;

  # HSTS: HTTPS 강제
  add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
}

📢 비유:

• HTTP → 엽서로 보내는 편지 (내용 훤히 보임) 😱
• HTTPS → 봉투로 봉인한 비밀 편지 ✉️

---

---

🍪 4-4. 쿠키 보안 속성 심화

속성	역할	심화 설명
🔒 Secure	HTTPS 환경에서만 쿠키 전송	중간자 공격 시 노출 방지
🛑 HttpOnly	JS 접근 불가 → XSS 방어	document.cookie 차단
🌐 SameSite	다른 사이트 요청 시 쿠키 제한	Strict, Lax, None 세부 구분 필요

---

💻 실전 예시 (주석 포함)

Set-Cookie: sessionId=abc123;
             Secure;          /* HTTPS 필수 */
             HttpOnly;        /* JS 접근 불가 */
             SameSite=Strict; /* 다른 사이트에서 전송 불가 */

---

📢 SameSite 옵션 정리:

옵션	특징	사용 예
Strict	철저 차단 (외부 요청 쿠키 무조건 X)	로그인, 결제 등 민감 작업
Lax	GET은 허용, POST는 차단	블로그 댓글 등
None	제약 없음, Secure 필수	제3자 서비스 필요시 (ex. OAuth)

---

---

🛡️ 4-5. 기타 보안 헤더 (심화)

헤더	역할	설명
🖼️ X-Frame-Options: DENY	클릭재킹 방지	iframe에 내 페이지 삽입 차단
🔎 X-Content-Type-Options: nosniff	MIME 타입 스니핑 방지	브라우저가 타입 자동 추측 못하게
🚀 Strict-Transport-Security	HTTPS 강제 적용	모든 요청 HTTPS로 리다이렉트

---

💻 실전 설정 예시

# 클릭재킹 방지
X-Frame-Options: DENY

# MIME 타입 스니핑 방지
X-Content-Type-Options: nosniff

# HSTS
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

📢 비유:

• X-Frame-Options → 내 가게 앞에 가짜 간판 금지
• nosniff → 브라우저가 마음대로 판단 금지
• HSTS → HTTP로는 입장 금지

---

---

🎯 4-6. 기술면접 대비 심화 질문

질문	심화 답변
XSS 방지 방법은?	Escape 처리, CSP, textContent 사용, HttpOnly, 입력 Validation, 외부 스크립트 출처 제한
CSRF 방지법은?	CSRF Token, SameSite 쿠키, Referer 검증, GET 요청 제한, Token 주기적 갱신
HTTPS 적용 이유는?	데이터 암호화, 서버 인증서로 신뢰성 확보, SEO, 중간자 공격 방어
쿠키 보안 속성은?	Secure → HTTPS 전송, HttpOnly → JS 접근 차단, SameSite → CSRF 방어 (Strict, Lax, None 차이 설명)
기타 헤더 적용 이유는?	클릭재킹(X-Frame), 타입 스니핑(nosniff), HTTPS 강제(HSTS) 등 다층 보안 제공

---

---

🚨 실무 보안 TIP 정리

상황	실전 적용
폼 입력 처리	Escape + Validation + 길이 제한
인증/세션 관리	SameSite=Strict + Secure + HttpOnly 쿠키 필수
서버 배포	HTTPS + HSTS + 보안 헤더
외부 스크립트	CSP로 출처 제한, 인라인 스크립트 최소화
코드 리뷰	XSS, CSRF, HTTPS, 보안 헤더 점검 포함

---

📌 최종 요약

🌟 주제	실무 포인트	면접 심화
XSS	Escape, CSP, textContent 사용, HttpOnly	DOM XSS, Reflected XSS, Stored XSS 차이까지
CSRF	Token, SameSite, Referer 검증	쿠키 자동 전송 원리, Token 방식 장단점
HTTPS	인증서 자동 갱신, HSTS	TLS 핸드셰이크 과정까지
쿠키 보안	Secure, HttpOnly, SameSite 설정	세부 옵션 및 보안 효과 설명
보안 헤더	Frame, Content-Type, HSTS	클릭재킹, MIME 스니핑 공격 원리까지

---