웹 개발 완전 정리

웹 개발 완전 정리 - 면접부터 개념까지

면접 예상 질문 및 답변 펼치기

Q1: 웹의 동작 원리를 설명해주세요.

A: 사용자가 브라우저에서 URL을 입력하면 다음 과정을 거칩니다. ① DNS를 통해 도메인을 IP 주소로 변환 ② 브라우저가 해당 서버에 HTTP 요청 전송 ③ 서버가 HTML, CSS, JavaScript 파일을 응답으로 전송 ④ 브라우저가 파일들을 파싱하여 DOM 트리 구성 ⑤ CSS와 함께 렌더링하여 화면에 표시 ⑥ JavaScript 실행으로 동적 기능 제공. 이 모든 과정이 클라이언트-서버 구조로 이루어집니다.

Q2: HTTP와 HTTPS의 차이점을 설명해주세요.

A: HTTP는 평문으로 데이터를 전송하는 프로토콜로 80번 포트를 사용하며, 데이터 노출 위험이 있습니다. HTTPS는 HTTP에 SSL/TLS 암호화를 추가한 것으로 443번 포트를 사용합니다. HTTPS는 데이터 암호화, 서버 인증, 데이터 무결성을 보장하며, SEO 이점과 브라우저 신뢰도 향상 효과도 있습니다. 현재는 보안과 성능상 HTTPS가 웹 표준입니다.

Q3: GET과 POST의 차이점을 설명해주세요.

A: GET은 서버에서 데이터를 조회하는 메서드로 데이터를 URL 쿼리스트링에 포함시켜 전송합니다. 캐싱 가능하고 북마크 저장이 되지만 데이터 길이 제한과 보안 문제가 있습니다. POST는 서버에 데이터를 전송하는 메서드로 데이터를 요청 본문에 포함시킵니다. 데이터 길이 제한이 없고 상대적으로 안전하지만 캐싱되지 않습니다. GET은 멱등성을 가지지만 POST는 그렇지 않습니다.

Q4: 쿠키와 세션의 차이점을 설명해주세요.

A: 쿠키는 클라이언트(브라우저)에 저장되는 작은 데이터로, 서버가 생성하여 클라이언트에 전송하고 클라이언트가 이후 요청 시 함께 전송합니다. 세션은 서버에 저장되는 사용자 정보로 세션 ID를 통해 관리됩니다. 쿠키는 브라우저에 저장되어 보안에 취약하지만 서버 부담이 적고, 세션은 서버에 저장되어 안전하지만 서버 메모리를 사용합니다. 쿠키는 만료시간 설정이 가능하고, 세션은 보통 브라우저 종료 시 삭제됩니다.

Q5: REST API의 특징과 설계 원칙을 설명해주세요.

A: REST는 자원(Resource), 행위(HTTP Method), 표현(Representation)으로 구성되는 아키텍처 스타일입니다. 무상태성, 캐시 가능성, 계층화된 시스템, 통일된 인터페이스를 특징으로 합니다. 설계 원칙은 ① URI는 자원을 표현(명사 사용) ② HTTP 메서드로 행위를 표현(GET, POST, PUT, DELETE) ③ 상태코드로 결과 전달 ④ JSON 형태의 데이터 전송이 일반적입니다.

Frontend 기술

Q6: HTML 시맨틱 요소의 중요성을 설명해주세요.

A: 시맨틱 HTML은 의미를 가진 HTML 요소로 문서의 구조를 명확하게 표현합니다. header, nav, main, article, section, aside, footer 등이 대표적입니다. 중요성은 ① SEO 향상: 검색엔진이 내용을 더 잘 이해 ② 접근성 개선: 스크린 리더 등 보조기술의 이해도 향상 ③ 코드 가독성: 개발자가 구조를 쉽게 파악 ④ 유지보수성: 명확한 구조로 수정이 용이합니다.

Q7: CSS의 Box Model을 설명해주세요.

A: CSS Box Model은 모든 HTML 요소를 직사각형 박스로 표현하는 개념입니다. 안쪽부터 ① Content: 실제 내용이 들어가는 영역 ② Padding: 내용과 테두리 사이의 여백 ③ Border: 테두리 ④ Margin: 요소 간의 외부 여백으로 구성됩니다. box-sizing 속성으로 박스 크기 계산 방식을 변경할 수 있으며, content-box(기본값)와 border-box가 있습니다.

Q8: JavaScript의 호이스팅에 대해 설명해주세요.

A: 호이스팅은 변수와 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 JavaScript의 특성입니다. var 변수는 undefined로 초기화되어 호이스팅되고, let/const는 호이스팅되지만 초기화되지 않아 일시적 사각지대(TDZ)가 발생합니다. 함수 선언문은 전체가 호이스팅되어 선언 전에도 호출 가능하지만, 함수 표현식은 변수 호이스팅 규칙을 따릅니다.

Q9: 클로저(Closure)에 대해 설명해주세요.

A: 클로저는 함수가 선언될 때의 렉시컬 환경(스코프)을 기억하여, 함수가 선언된 스코프 밖에서 실행되어도 그 환경의 변수에 접근할 수 있는 기능입니다. 외부 함수의 변수를 내부 함수에서 참조할 때 발생하며, 외부 함수 실행이 끝나도 내부 함수가 외부 함수의 변수에 접근 가능합니다. 데이터 은닉, 모듈 패턴, 콜백 함수 등에 활용됩니다.

Q10: Promise와 async/await의 차이점을 설명해주세요.

A: Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체로, pending, fulfilled, rejected 상태를 가집니다. then(), catch(), finally() 메서드 체이닝으로 처리하지만 여전히 콜백 지옥이 발생할 수 있습니다. async/await는 Promise를 더 동기적으로 작성할 수 있게 해주는 문법입니다. async 함수는 항상 Promise를 반환하고, await는 Promise가 resolve될 때까지 기다립니다. 코드 가독성이 크게 향상되고 try-catch로 간단한 에러 처리가 가능합니다.

Backend 및 서버

Q11: MVC 패턴에 대해 설명해주세요.

A: MVC는 애플리케이션을 Model, View, Controller로 분리하는 아키텍처 패턴입니다. Model은 데이터와 비즈니스 로직을 담당하고, View는 사용자 인터페이스를 담당하며, Controller는 사용자 입력을 처리하고 Model과 View를 연결합니다. 관심사 분리로 코드 재사용성과 유지보수성이 향상되고, 개발자들 간 역할 분담이 명확해집니다. Spring MVC, Django, Express 등에서 이 패턴을 사용합니다.

Q12: JWT(JSON Web Token)에 대해 설명해주세요.

A: JWT는 JSON 객체를 안전하게 전송하기 위한 토큰 기반 인증 방식입니다. Header(알고리즘 정보), Payload(사용자 정보), Signature(서명)로 구성되며, 점(.)으로 구분됩니다. 서버에서 비밀키로 서명하여 위변조를 방지합니다. Stateless하여 서버 부담이 적고 확장성이 좋지만, 토큰 크기가 크고 만료 전까지 무효화하기 어렵다는 단점이 있습니다. 주로 API 인증에 사용됩니다.

Q13: 데이터베이스 연결 풀에 대해 설명해주세요.

A: 커넥션 풀은 데이터베이스 연결을 미리 생성하여 풀에 저장하고 재사용하는 기법입니다. 매번 연결을 생성/해제하는 오버헤드를 줄이고, 동시 연결 수를 제한하여 DB 서버 부하를 관리합니다. 적절한 풀 크기 설정이 중요한데, 너무 작으면 대기시간이 증가하고 너무 크면 메모리 낭비가 발생합니다. HikariCP, Apache DBCP 등의 라이브러리를 사용하며, 최대 연결 수, 최소 연결 수, 연결 대기 시간 등을 설정할 수 있습니다.

성능 및 보안

Q14: 웹 성능 최적화 방법을 설명해주세요.

A: 프론트엔드 최적화로는 ① 이미지 최적화(압축, WebP 포맷, lazy loading) ② 코드 분할과 번들 최적화 ③ CSS/JS 압축 및 최소화 ④ CDN 사용 ⑤ 브라우저 캐싱 활용이 있습니다. 백엔드 최적화로는 ① 데이터베이스 쿼리 최적화 ② 인덱스 활용 ③ 캐싱 전략(Redis, Memcached) ④ 로드 밸런싱 ⑤ 비동기 처리가 있습니다. Core Web Vitals(LCP, FID, CLS) 지표를 모니터링하여 사용자 경험을 개선합니다.

Q15: CORS에 대해 설명해주세요.

A: CORS(Cross-Origin Resource Sharing)는 웹 브라우저의 동일 출처 정책을 완화하여 다른 도메인의 리소스에 접근할 수 있게 해주는 메커니즘입니다. 브라우저는 보안상 같은 프로토콜, 도메인, 포트의 리소스만 접근을 허용합니다. CORS는 서버에서 Access-Control-Allow-Origin 등의 헤더를 설정하여 특정 도메인의 접근을 허용합니다. Preflight 요청으로 실제 요청 전에 서버 정책을 확인하며, 잘못 설정하면 보안 위험이 있으므로 필요한 도메인만 허용해야 합니다.

Q16: 주요 웹 보안 취약점과 대응 방법을 설명해주세요.

A: 주요 취약점으로는 ① XSS: 악성 스크립트 삽입 → 입력값 검증과 출력값 인코딩으로 방지 ② CSRF: 의도하지 않은 요청 → CSRF 토큰과 SameSite 쿠키로 방지 ③ SQL Injection: 악의적 SQL 삽입 → Prepared Statement와 입력값 검증으로 방지 ④ 인증 취약점 → 강력한 비밀번호 정책, HTTPS 사용, 세션 타임아웃 설정으로 대응합니다. 정기적인 보안 감사와 최신 패치 적용도 중요합니다.

Q17: SPA와 SSR의 차이점과 장단점을 설명해주세요.

A: SPA(Single Page Application)는 하나의 HTML 페이지에서 JavaScript로 동적으로 콘텐츠를 변경하는 방식입니다. 빠른 사용자 경험, 서버 부하 감소가 장점이지만 초기 로딩 시간이 길고 SEO에 불리합니다. SSR(Server-Side Rendering)은 서버에서 HTML을 완전히 렌더링하여 전송하는 방식입니다. 빠른 초기 로딩과 SEO 친화적이지만 서버 부하가 크고 페이지 전환 시 새로고침이 필요합니다. 현재는 Next.js, Nuxt.js 같은 프레임워크로 하이브리드 방식을 많이 사용합니다.

Q18: 캐싱 전략에 대해 설명해주세요.

A: 캐싱은 자주 사용되는 데이터를 빠른 저장소에 임시 보관하여 성능을 향상시키는 기법입니다. ① Cache-Aside: 애플리케이션이 캐시를 직접 관리 ② Write-Through: 캐시와 DB에 동시에 쓰기 ③ Write-Behind: 캐시에 먼저 쓰고 나중에 DB 반영 ④ Write-Around: 캐시를 거치지 않고 DB에 직접 쓰기가 있습니다. TTL 설정, 캐시 무효화 전략, 캐시 키 설계, 메모리 사용량 관리 등을 고려해야 합니다.

웹 개발 기초 개념

1. 웹의 기본 구조

1.1 웹의 동작 원리

웹은 클라이언트-서버 모델을 기반으로 동작합니다.

기본 흐름

URL 입력 → 브라우저 주소창에 URL 입력
DNS 조회 → 도메인명을 IP 주소로 변환
HTTP 요청 → 서버에 리소스 요청
서버 처리 → 요청 처리 후 응답 생성
HTTP 응답 → HTML, CSS, JS 파일 전송
렌더링 → 브라우저에서 페이지 렌더링

1.2 프로토콜

HTTP (HyperText Transfer Protocol)

웹에서 데이터를 주고받는 프로토콜
무상태성(Stateless): 각 요청이 독립적
요청-응답 구조

HTTPS (HTTP Secure)

HTTP에 SSL/TLS 보안 계층 추가
데이터 암호화, 인증, 무결성 보장
443 포트 사용

1.3 HTTP 메서드

GET: 리소스 조회
POST: 데이터 전송/생성
PUT: 리소스 전체 수정
PATCH: 리소스 부분 수정
DELETE: 리소스 삭제

1.4 HTTP 상태 코드

2xx: 성공 (200 OK, 201 Created)
3xx: 리다이렉션 (301 Moved Permanently)
4xx: 클라이언트 오류 (404 Not Found)
5xx: 서버 오류 (500 Internal Server Error)

2. Frontend 개발

2.1 HTML (HyperText Markup Language)

웹페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다.

HTML 기본 구조


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
</head>
<body>
    <h1>메인 제목</h1>
    <p>문단 내용</p>
</body>
</html>

시맨틱 HTML

의미를 가진 HTML 요소로 구조를 명확하게 표현합니다.

</code>: 페이지/섹션 헤더</li>
</code>: 내비게이션</li>
</code>: 주요 콘텐츠</li>
</code>: 독립적 콘텐츠</li>
</code>: 문서 구역</li>
</code>: 사이드바</li>
</code>: 페이지/섹션 푸터</li>
</ul>

2.2 CSS (Cascading Style Sheets)
HTML 요소의 스타일을 정의하는 언어입니다.

CSS 선택자

/* 요소 선택자 */
h1 { color: blue; }

/* 클래스 선택자 */
.header { background: red; }

/* ID 선택자 */
#main { width: 100%; }

/* 속성 선택자 */
input[type="text"] { border: 1px solid gray; }


Box Model
모든 HTML 요소는 박스 모델을 가집니다.

Content: 실제 내용
Padding: 내용과 테두리 사이 여백
Border: 테두리
Margin: 요소 간 외부 여백


CSS 레이아웃
Flexbox: 1차원 레이아웃

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}


Grid: 2차원 레이아웃

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
}


2.3 JavaScript
웹페이지에 동적 기능을 추가하는 프로그래밍 언어입니다.

기본 문법

// 변수 선언
let name = "홍길동";
const age = 25;

// 함수 선언
function greet(name) {
    return `안녕하세요, ${name}님!`;
}

// 화살표 함수
const add = (a, b) => a + b;


DOM 조작

// 요소 선택
const element = document.getElementById('myId');
const elements = document.querySelectorAll('.myClass');

// 내용 변경
element.textContent = '새로운 내용';
element.innerHTML = '<strong>강조된 내용</strong>';

// 이벤트 처리
element.addEventListener('click', function() {
    alert('클릭되었습니다!');
});


비동기 처리

// Promise
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// async/await
async function fetchData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}


2.4 프론트엔드 프레임워크

React
컴포넌트 기반 JavaScript 라이브러리입니다.

특징:

Virtual DOM
단방향 데이터 흐름
JSX 문법
Hooks (useState, useEffect 등)



import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                증가
            </button>
        </div>
    );
}


Vue.js
점진적 도입이 가능한 프레임워크입니다.

특징:

반응형 데이터 바인딩
템플릿 문법
컴포넌트 기반
낮은 학습 곡선


3. Backend 개발

3.1 서버의 역할

클라이언트 요청 처리
비즈니스 로직 실행
데이터베이스 연동
API 제공


3.2 Node.js
Chrome V8 엔진 기반의 JavaScript 런타임입니다.

특징

이벤트 기반 비동기 I/O
단일 스레드 (이벤트 루프)
npm 생태계
크로스 플랫폼


Express.js
Node.js를 위한 웹 프레임워크입니다.


const express = require('express');
const app = express();

// 미들웨어
app.use(express.json());

// 라우트
app.get('/api/users', (req, res) => {
    res.json({ users: [] });
});

app.post('/api/users', (req, res) => {
    const user = req.body;
    // 사용자 생성 로직
    res.status(201).json(user);
});

app.listen(3000, () => {
    console.log('서버가 3000번 포트에서 실행 중입니다.');
});


3.3 데이터베이스 연동
관계형 데이터베이스 (MySQL, PostgreSQL)

const mysql = require('mysql2');

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'user',
    password: 'password',
    database: 'mydb'
});

// 데이터 조회
app.get('/users', async (req, res) => {
    const [rows] = await connection.execute('SELECT * FROM users');
    res.json(rows);
});


NoSQL (MongoDB)

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
    name: String,
    email: String,
    createdAt: { type: Date, default: Date.now }
});

const User = mongoose.model('User', userSchema);

// 사용자 생성
app.post('/users', async (req, res) => {
    const user = new User(req.body);
    await user.save();
    res.status(201).json(user);
});


3.4 API 설계

RESTful API

// 리소스 기반 URL 설계
GET    /api/users      // 사용자 목록 조회
POST   /api/users      // 사용자 생성
GET    /api/users/:id  // 특정 사용자 조회
PUT    /api/users/:id  // 사용자 전체 수정
DELETE /api/users/:id  // 사용자 삭제


GraphQL
단일 엔드포인트에서 필요한 데이터만 요청하는 쿼리 언어입니다.


const typeDefs = `
    type User {
        id: ID!
        name: String!
        email: String!
    }

    type Query {
        users: [User!]!
        user(id: ID!): User
    }
`;

const resolvers = {
    Query: {
        users: () => User.find(),
        user: (_, { id }) => User.findById(id)
    }
};


4. 웹 보안

4.1 주요 보안 취약점

XSS (Cross-Site Scripting)
악성 스크립트를 웹페이지에 삽입하는 공격입니다.

방어 방법:

입력값 검증 및 필터링
출력값 HTML 인코딩
CSP(Content Security Policy) 적용



// 입력값 검증
function sanitizeInput(input) {
    return input.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
}

// HTML 인코딩
function escapeHtml(text) {
    return text
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}


CSRF (Cross-Site Request Forgery)
사용자 모르게 의도하지 않은 요청을 보내는 공격입니다.

방어 방법:

CSRF 토큰 사용
SameSite 쿠키 설정
Referer 헤더 검증



// CSRF 토큰 생성 및 검증
const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });

app.use(csrfProtection);

app.get('/form', (req, res) => {
    res.render('form', { csrfToken: req.csrfToken() });
});


SQL Injection
악의적인 SQL 코드를 삽입하여 데이터베이스를 조작하는 공격입니다.

방어 방법:

Prepared Statement 사용
입력값 검증
최소 권한 원칙



// 취약한 코드 (하지 말 것)
const query = `SELECT * FROM users WHERE id = '${userId}'`;

// 안전한 코드 (Prepared Statement)
const query = 'SELECT * FROM users WHERE id = ?';
connection.execute(query, [userId]);


4.2 인증과 인가

세션 기반 인증

const session = require('express-session');

app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: false,
    cookie: {
        secure: false, // HTTPS에서는 true
        maxAge: 1000 * 60 * 60 // 1시간
    }
}));

// 로그인
app.post('/login', (req, res) => {
    // 사용자 인증 로직
    if (isValidUser) {
        req.session.userId = user.id;
        res.json({ message: '로그인 성공' });
    }
});


JWT 기반 인증

const jwt = require('jsonwebtoken');

// 토큰 생성
app.post('/login', (req, res) => {
    // 사용자 인증 로직
    if (isValidUser) {
        const token = jwt.sign(
            { userId: user.id, email: user.email },
            'your-secret-key',
            { expiresIn: '1h' }
        );
        res.json({ token });
    }
});

// 토큰 검증 미들웨어
function authenticateToken(req, res, next) {
    const authHeader = req.headers['authorization'];
    const token = authHeader && authHeader.split(' ')[1];

    if (!token) {
        return res.sendStatus(401);
    }

    jwt.verify(token, 'your-secret-key', (err, user) => {
        if (err) return res.sendStatus(403);
        req.user = user;
        next();
    });
}

// 보호된 라우트
app.get('/protected', authenticateToken, (req, res) => {
    res.json({ message: '인증된 사용자만 접근 가능' });
});


5. 웹 성능 최적화

5.1 프론트엔드 최적화

이미지 최적화

<!-- 반응형 이미지 -->
<picture>
    <source media="(max-width: 768px)" srcset="image-mobile.webp">
    <source media="(min-width: 769px)" srcset="image-desktop.webp">
    <img src="image-fallback.jpg" alt="설명">
</picture>

<!-- 지연 로딩 -->
<img src="image.jpg" alt="설명" loading="lazy">


코드 분할 (Code Splitting)

// React에서 동적 import
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
    return (
        <React.Suspense fallback={<div>Loading...</div>}>
            <LazyComponent />
        </React.Suspense>
    );
}

// Webpack 코드 분할
import(/* webpackChunkName: "my-chunk" */ './myModule')
    .then(module => {
        // 모듈 사용
    });


브라우저 캐싱

// Express.js에서 정적 파일 캐싱
app.use('/static', express.static('public', {
    maxAge: '1d', // 1일 캐싱
    etag: true
}));

// 캐시 컨트롤 헤더 설정
app.get('/api/data', (req, res) => {
    res.set('Cache-Control', 'public, max-age=3600'); // 1시간 캐싱
    res.json(data);
});


5.2 백엔드 최적화

데이터베이스 최적화

-- 인덱스 생성
CREATE INDEX idx_user_email ON users(email);
CREATE INDEX idx_post_created ON posts(created_at);

-- 쿼리 최적화
SELECT u.name, p.title 
FROM users u
INNER JOIN posts p ON u.id = p.user_id
WHERE u.active = 1
ORDER BY p.created_at DESC
LIMIT 10;


캐싱 전략

const redis = require('redis');
const client = redis.createClient();

// Cache-Aside 패턴
async function getUser(userId) {
    // 캐시에서 먼저 확인
    const cachedUser = await client.get(`user:${userId}`);
    if (cachedUser) {
        return JSON.parse(cachedUser);
    }

    // 캐시에 없으면 DB에서 조회
    const user = await User.findById(userId);
    
    // 캐시에 저장 (TTL: 1시간)
    await client.setex(`user:${userId}`, 3600, JSON.stringify(user));
    
    return user;
}


API 응답 최적화

// 페이지네이션
app.get('/api/posts', async (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const limit = parseInt(req.query.limit) || 10;
    const offset = (page - 1) * limit;

    const posts = await Post.find()
        .limit(limit)
        .skip(offset)
        .sort({ createdAt: -1 });

    const totalCount = await Post.countDocuments();
    const totalPages = Math.ceil(totalCount / limit);

    res.json({
        posts,
        pagination: {
            currentPage: page,
            totalPages,
            totalCount,
            hasNext: page < totalPages
        }
    });
});

// 필드 선택 (Projection)
app.get('/api/users', async (req, res) => {
    const users = await User.find({}, 'name email createdAt'); // 필요한 필드만 선택
    res.json(users);
});


6. 개발 도구와 환경

6.1 패키지 관리자

npm (Node Package Manager)

# 패키지 설치
npm install express
npm install -D nodemon  # 개발 의존성

# 스크립트 실행
npm run dev
npm run build
npm test

# package.json
{
  "scripts": {
    "dev": "nodemon server.js",
    "build": "webpack --mode production",
    "test": "jest"
  }
}


6.2 빌드 도구

Webpack
모듈 번들러로 여러 파일을 하나로 묶어주는 도구입니다.


// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.[contenthash].js',
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|gif)$/,
                type: 'asset/resource'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};


Vite
빠른 빌드 도구로 개발 서버가 매우 빠릅니다.


// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [react()],
    build: {
        outDir: 'dist',
        sourcemap: true
    },
    server: {
        port: 3000,
        open: true
    }
});


6.3 테스팅

Jest (JavaScript 테스트 프레임워크)

// math.js
function add(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}

module.exports = { add, multiply };

// math.test.js
const { add, multiply } = require('./math');

test('2 + 3 equals 5', () => {
    expect(add(2, 3)).toBe(5);
});

test('3 * 4 equals 12', () => {
    expect(multiply(3, 4)).toBe(12);
});


React Testing Library

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('counter increments when button is clicked', () => {
    render(<Counter />);
    
    const button = screen.getByText('증가');
    const count = screen.getByText('Count: 0');
    
    fireEvent.click(button);
    
    expect(screen.getByText('Count: 1')).toBeInTheDocument();
});


7. 현대 웹 개발 트렌드

7.1 JAMstack
JavaScript, APIs, Markup으로 구성된 현대적 웹 아키텍처입니다.

Next.js (React 기반)

// pages/index.js
export default function Home({ posts }) {
    return (
        <div>
            <h1>블로그</h1>
            {posts.map(post => (
                <article key={post.id}>
                    <h2>{post.title}</h2>
                    <p>{post.excerpt}</p>
                </article>
            ))}
        </div>
    );
}

// Static Site Generation (SSG)
export async function getStaticProps() {
    const posts = await fetchPosts();
    
    return {
        props: { posts },
        revalidate: 60 // 1분마다 재생성
    };
}


Nuxt.js (Vue 기반)

// pages/index.vue
<template>
  <div>
    <h1>블로그</h1>
    <article v-for="post in posts" :key="post.id">
      <h2></h2>
      <p></p>
    </article>
  </div>
</template>

<script>
export default {
  async asyncData() {
    const posts = await $http.$get('/api/posts');
    return { posts };
  }
}
</script>


7.2 서버리스 아키텍처

AWS Lambda

// lambda 함수
exports.handler = async (event) => {
    const { name } = JSON.parse(event.body);
    
    // 비즈니스 로직
    const greeting = `Hello, ${name}!`;
    
    return {
        statusCode: 200,
        headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
        },
        body: JSON.stringify({ message: greeting })
    };
};


Vercel Functions

// api/hello.js
export default function handler(req, res) {
    const { name } = req.query;
    
    res.status(200).json({
        message: `Hello, ${name || 'World'}!`
    });
}


7.3 마이크로프론트엔드
여러 팀이 독립적으로 프론트엔드를 개발할 수 있는 아키텍처입니다.


// Module Federation (Webpack 5)
const ModuleFederationPlugin = require('@module-federation/webpack');

module.exports = {
    plugins: [
        new ModuleFederationPlugin({
            name: 'shell',
            remotes: {
                productApp: 'productApp@http://localhost:3001/remoteEntry.js',
                cartApp: 'cartApp@http://localhost:3002/remoteEntry.js'
            }
        })
    ]
};

// 동적 로딩
const ProductApp = React.lazy(() => import('productApp/ProductList'));


8. DevOps와 배포

8.1 Git 워크플로우

Git Flow

# 기능 개발
git checkout -b feature/user-authentication
git add .
git commit -m "Add user authentication"
git push origin feature/user-authentication

# Pull Request 생성 후 병합
git checkout develop
git pull origin develop
git merge feature/user-authentication


8.2 CI/CD (Continuous Integration/Continuous Deployment)

GitHub Actions

# .github/workflows/deploy.yml
name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npm test
      
  deploy:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to server
        run: |
          echo "Deploying to production server"
          # 배포 스크립트 실행


8.3 컨테이너화

Docker

# Dockerfile
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install --only=production

COPY . .

EXPOSE 3000

CMD ["node", "server.js"]



# docker-compose.yml
version: '3.8'

services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - DB_HOST=db
    depends_on:
      - db

  db:
    image: postgres:13
    environment:
      - POSTGRES_DB=myapp
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=password
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:


9. 모니터링과 로깅

9.1 애플리케이션 모니터링

로깅

const winston = require('winston');

const logger = winston.createLogger({
    level: 'info',
    format: winston.format.combine(
        winston.format.timestamp(),
        winston.format.json()
    ),
    transports: [
        new winston.transports.File({ filename: 'error.log', level: 'error' }),
        new winston.transports.File({ filename: 'combined.log' })
    ]
});

// 사용 예시
app.get('/api/users', async (req, res) => {
    try {
        logger.info('Fetching users', { userId: req.user.id });
        const users = await User.find();
        res.json(users);
    } catch (error) {
        logger.error('Failed to fetch users', { error: error.message });
        res.status(500).json({ error: 'Internal server error' });
    }
});


성능 모니터링

// 응답 시간 측정
app.use((req, res, next) => {
    const start = Date.now();
    
    res.on('finish', () => {
        const duration = Date.now() - start;
        logger.info('Request completed', {
            method: req.method,
            url: req.url,
            statusCode: res.statusCode,
            duration: `${duration}ms`
        });
    });
    
    next();
});


9.2 에러 처리

글로벌 에러 핸들러

// Express.js 에러 핸들러
app.use((err, req, res, next) => {
    logger.error('Unhandled error', {
        error: err.message,
        stack: err.stack,
        url: req.url,
        method: req.method
    });

    if (err.name === 'ValidationError') {
        return res.status(400).json({
            error: 'Validation Error',
            details: err.details
        });
    }

    res.status(500).json({
        error: 'Internal Server Error',
        message: process.env.NODE_ENV === 'production' 
            ? 'Something went wrong' 
            : err.message
    });
});

// 처리되지 않은 Promise rejection 처리
process.on('unhandledRejection', (reason, promise) => {
    logger.error('Unhandled Rejection', { reason, promise });
    process.exit(1);
});


10. 웹 접근성과 SEO

10.1 웹 접근성 (Web Accessibility)

ARIA 활용

<!-- 버튼 역할을 하는 div -->
<div role="button" 
     aria-label="메뉴 열기" 
     tabindex="0"
     onclick="openMenu()">
    ☰
</div>

<!-- 폼 라벨링 -->
<label for="email">이메일 주소</label>
<input type="email" 
       id="email" 
       aria-describedby="email-help"
       required>
<div id="email-help">이메일 형식: user@example.com</div>


키보드 네비게이션

/* 포커스 스타일 */
button:focus,
input:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* 포커스가 보이지 않을 때만 아웃라인 숨기기 */
.js-focus-visible button:focus:not(.focus-visible) {
    outline: none;
}


10.2 SEO (Search Engine Optimization)

메타 태그 최적화

<head>
    <!-- 기본 메타 태그 -->
    <title>페이지 제목 - 사이트명</title>
    <meta name="description" content="페이지에 대한 간결한 설명">
    <meta name="keywords" content="키워드1, 키워드2, 키워드3">
    
    <!-- Open Graph (소셜 미디어) -->
    <meta property="og:title" content="페이지 제목">
    <meta property="og:description" content="페이지 설명">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com/page">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="페이지 제목">
    <meta name="twitter:description" content="페이지 설명">
    
    <!-- 정규 URL -->
    <link rel="canonical" href="https://example.com/page">
</head>


구조화된 데이터

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "웹 개발 가이드",
  "author": {
    "@type": "Person",
    "name": "홍길동"
  },
  "datePublished": "2023-01-01",
  "dateModified": "2023-01-15",
  "description": "웹 개발에 대한 종합적인 가이드"
}
</script>


웹 개발 학습 로드맵

1단계: 기초 (2-3개월)

HTML/CSS 기초
JavaScript 기초
Git 기본 사용법
브라우저 개발자 도구


2단계: 프론트엔드 심화 (3-4개월)

JavaScript ES6+ 문법
DOM 조작과 이벤트 처리
반응형 웹 디자인
CSS 전처리기 (Sass)


3단계: 백엔드 기초 (3-4개월)

Node.js와 Express.js
데이터베이스 (MySQL, MongoDB)
REST API 설계와 구현
인증과 보안 기초


4단계: 프레임워크 (2-3개월)

React 또는 Vue.js
상태 관리 (Redux, Vuex)
컴포넌트 기반 개발
SPA 개발


5단계: 고급 개념 (지속적)

TypeScript
테스팅 (Jest, Cypress)
DevOps 기초 (Docker, CI/CD)
성능 최적화
웹 보안


웹 개발은 계속 발전하는 분야이므로, 기초를 탄탄히 하고 꾸준히 학습하는 것이 중요합니다. 실제 프로젝트를 만들어보면서 경험을 쌓아가시길 추천합니다!
  </div>
</details>