9편 | 기술 스택 - Runtime (실행 환경)

기술 스택의 두 번째 요소는 Runtime(실행 환경)입니다. 코드를 작성해도 어딘가에서 실행되어야 합니다. 그 "어딘가"가 바로 Runtime입니다.

1. Runtime이란 무엇인가

1-1. 실행 환경의 정의

Runtime(런타임)은 작성한 코드가 실제로 돌아가는 환경입니다.

JavaScript의 경우:

• 브라우저에서 실행되면 → Browser Runtime
• 서버에서 실행되면 → Node.js Runtime

1-2. 웹사이트 개발의 주요 Runtime

2. Browser Runtime

2-1. 브라우저에서 JavaScript 실행

모든 웹 브라우저에는 JavaScript 엔진이 내장되어 있습니다.

2-2. 브라우저가 제공하는 기능

> 브라우저에서는 버튼 클릭 감지, 데이터 저장, 서버 요청 등이 가능합니다. Claude Code가 이 코드들을 자동으로 작성해줍니다.

2-3. 브라우저 Runtime의 특징

3. Node.js Runtime

3-1. Node.js란?

Node.js는 브라우저 밖에서 JavaScript를 실행할 수 있게 해주는 Runtime입니다. 2009년 Ryan Dahl이 Chrome V8 엔진을 기반으로 만들었습니다.

Node.js가 할 수 있는 일:

• 서버 컴퓨터의 파일 읽기/쓰기
• 웹 서버 만들기 (API 서버)
• 데이터베이스 연결

> SSALWorks에서는 Next.js가 Node.js 위에서 실행됩니다. 서버 코드는 Claude Code가 자동으로 작성해줍니다.

3-2. Node.js의 특징

3-3. 비동기 처리 이해하기

카페 알바생 비유:

3-4. Node.js가 잘하는 일

4. Edge Runtime

4-1. Edge Runtime이란?

Edge Runtime은 CDN의 엣지 서버에서 코드를 실행하는 환경입니다. 사용자와 가까운 곳에서 실행되어 응답이 매우 빠릅니다.

4-2. Edge Runtime의 특징

4-3. Vercel Edge Functions

Vercel Edge Functions은 전 세계 분산된 서버에서 코드를 실행합니다.

SSALWorks 활용:

> Claude Code가 Edge 설정을 자동으로 해줍니다. 여러분은 "빠른 응답이 필요해"라고 요청하면 됩니다.

5. Runtime 선택 가이드

5-1. 상황별 Runtime 선택

5-2. SSALWorks 기술 스택

정리

다음 편에서는 패키지를 관리하는 Package Manager를 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 3,200자 / 작성자: Claude / 프롬프터: 써니

10편 | 기술 스택 - Package Manager (패키지 관리자)

기술 스택의 세 번째 요소는 Package Manager(패키지 관리자)입니다. 다른 개발자들이 만들어 놓은 코드를 쉽게 가져다 쓸 수 있게 해주는 도구입니다.

1. Package Manager란 무엇인가

1-1. 패키지의 정의

패키지(Package)는 다른 개발자가 만들어서 공유한 코드 묶음입니다.

예시:

• 날짜 계산 필요 → moment 패키지 사용
• HTTP 요청 필요 → axios 패키지 사용
• UI 컴포넌트 필요 → react 패키지 사용

1-2. Package Manager의 역할

Package Manager는 패키지를 관리하는 도구입니다.

2. npm (Node Package Manager)

2-1. npm이란?

npm은 JavaScript의 표준 패키지 관리자입니다. Node.js를 설치하면 자동으로 함께 설치됩니다.

> Claude Code가 필요한 패키지를 자동으로 설치해줍니다. 여러분은 "React 프로젝트 만들어줘"라고 요청하면 됩니다.

2-2. npm의 특징

2-3. 주요 npm 명령어

3. package.json 이해하기

3-1. package.json이란?

package.json은 프로젝트의 설명서입니다. 필요한 패키지 목록, 실행 스크립트 등이 기록됩니다.

package.json에 들어가는 내용:

> Claude Code가 package.json을 자동으로 생성하고 관리해줍니다.

3-2. dependencies vs devDependencies

3-3. 버전 표기법

버전 번호의 의미 (4.18.2):

• 4 = Major (큰 변화, 호환성 문제 가능)
• 18 = Minor (새 기능, 호환 유지)
• 2 = Patch (버그 수정)

4. 기타 Package Manager

4-1. yarn

yarn은 Facebook에서 만든 패키지 관리자입니다. npm보다 빠른 설치 속도가 장점입니다.

> npm과 yarn은 같은 역할을 합니다. SSALWorks에서는 npm을 사용합니다.

4-2. pnpm

pnpm은 디스크 공간을 효율적으로 사용하는 패키지 관리자입니다.

4-3. npm vs yarn vs pnpm

5. node_modules와 .gitignore

5-1. node_modules 폴더

패키지가 설치되는 폴더입니다. 용량이 매우 큽니다.

`

my-project/

├── node_modules/ ← 수백 MB ~ 수 GB

├── package.json

└── package-lock.json

`

5-2. Git에 올리면 안 되는 이유

5-3. .gitignore 설정

.gitignore 파일에 node_modules/를 추가하면 Git이 해당 폴더를 무시합니다.

> Claude Code가 .gitignore 파일을 자동으로 설정해줍니다.

협업 방법:

정리

다음 편에서는 개발을 도와주는 Tools를 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 3,400자 / 작성자: Claude / 프롬프터: 써니

11편 | 기술 스택 - Tools (도구)

기술 스택의 네 번째 요소는 Tools(도구)입니다. 코드를 작성하고, 검사하고, 빌드하는 과정을 도와주는 도구들입니다.

1. Tools란 무엇인가

1-1. 개발 도구의 정의

Tools(도구)는 개발 생산성을 높여주는 보조 프로그램입니다. 코드 자체는 아니지만, 코드를 더 잘 작성하고 관리할 수 있게 해줍니다.

도구의 역할:

• 코드 품질 검사
• 코드 자동 정리
• 빌드 및 번들링
• 디버깅 지원

1-2. 주요 도구 분류

2. ESLint - 코드 검사 도구

2-1. ESLint란?

ESLint는 JavaScript/TypeScript 코드의 문법 오류와 잠재적 버그를 찾아주는 도구입니다.

`javascript

// ESLint가 잡아주는 오류 예시

// 1. 사용하지 않는 변수

const unusedVariable = 'hello'; // 경고: 사용되지 않음

// 2. 세미콜론 누락

const name = 'Kim' // 오류: 세미콜론 필요

// 3. 정의되지 않은 변수

console.log(undefined Variable); // 오류: 정의되지 않음

`

2-2. ESLint 설정

`javascript

// .eslintrc.js

module.exports = {

extends: ['next/core-web-vitals'],

rules: {

'no-unused-vars': 'warn', // 미사용 변수 경고

'no-console': 'off', // console 허용

'semi': ['error', 'always'], // 세미콜론 필수

},

};

`

2-3. ESLint 명령어

3. Prettier - 코드 포맷터

3-1. Prettier란?

Prettier는 코드를 일관된 스타일로 자동 정리해주는 도구입니다. 들여쓰기, 따옴표, 줄바꿈 등을 통일합니다.

변환 전:

`javascript

const user={name:'Kim',age:25,email:'kim@email.com'};

function greet(name){return Hello, ${name}!}

`

변환 후:

`javascript

const user = {

name: 'Kim',

age: 25,

email: 'kim@email.com',

};

function greet(name) {

return Hello, ${name}!;

}

`

3-2. Prettier 설정

`json

// .prettierrc

{

"semi": true,

"singleQuote": true,

"tabWidth": 4,

"trailingComma": "es5",

"printWidth": 80

}

`

3-3. ESLint vs Prettier

함께 사용하는 것이 좋습니다:

• ESLint → 버그 잡기
• Prettier → 스타일 통일

4. Vite - 빌드 도구

4-1. Vite란?

Vite는 빠른 개발 서버와 빌드 도구입니다. 기존 Webpack보다 훨씬 빠릅니다.

4-2. Vite vs Webpack

4-3. 빌드 과정 이해

`

[개발 시]

여러 JS/CSS 파일 → Vite 개발 서버 → 브라우저에서 직접 로드

[배포 시]

여러 JS/CSS 파일 → Vite 빌드 → 하나의 번들 파일 → 서버 배포

`

번들링 필요한 이유:

• 파일 수 줄이기 (HTTP 요청 감소)
• 코드 압축 (용량 감소)
• 브라우저 호환성 확보

5. 브라우저 DevTools

5-1. DevTools란?

DevTools(개발자 도구)는 브라우저에 내장된 디버깅 도구입니다. F12 또는 우클릭 → 검사로 열 수 있습니다.

5-2. 주요 탭 기능

5-3. Console 활용

`javascript

// 디버깅용 출력

console.log('일반 로그');

console.warn('경고 메시지');

console.error('에러 메시지');

console.table([{ name: 'Kim', age: 25 }]); // 테이블 형태

`

5-4. Network 탭 활용

6. 기타 유용한 도구

6-1. Postman

Postman은 API를 테스트하는 도구입니다.

6-2. GitHub Copilot

GitHub Copilot은 AI 기반 코드 자동완성 도구입니다.

정리

다음 편에서는 기능별 코드 모음인 Library를 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 4,200자 / 작성자: Claude / 프롬프터: 써니

12편 | 기술 스택 - Library (라이브러리)

기술 스택의 다섯 번째 요소는 Library(라이브러리)입니다. 다른 개발자가 만들어 놓은 기능을 가져다 쓸 수 있게 해주는 코드 모음입니다.

1. Library란 무엇인가

1-1. 라이브러리의 정의

Library(라이브러리)는 특정 기능을 수행하는 코드 모음입니다. 직접 만들지 않고 가져다 쓸 수 있습니다.

예시:

• 날짜 계산 필요 → date-fns 라이브러리 사용
• HTTP 요청 필요 → axios 라이브러리 사용
• UI 구성 필요 → React 라이브러리 사용

1-2. 라이브러리의 특징

2. React - UI 라이브러리

2-1. React란?

React는 Facebook에서 만든 UI 라이브러리입니다. 화면을 컴포넌트 단위로 만듭니다.

컴포넌트 = 레고 블록

→ 이런 컴포넌트들을 조합해서 전체 화면을 만듭니다.

> Claude Code가 React 컴포넌트를 자동으로 생성해줍니다. "로그인 폼 만들어줘"라고 요청하면 됩니다.

2-2. React의 핵심 개념

2-3. 왜 React를 사용하는가?

3. Zustand - 상태 관리

3-1. 상태 관리란?

상태(State)는 애플리케이션의 데이터입니다. 여러 컴포넌트에서 같은 데이터를 공유해야 할 때 상태 관리가 필요합니다.

문제 상황:

`

Header 컴포넌트 ← 로그인 정보 필요

Sidebar 컴포넌트 ← 로그인 정보 필요

Profile 컴포넌트 ← 로그인 정보 필요

`

→ 로그인 정보를 한 곳에서 관리하고 모두가 접근하게 하자!

3-2. Zustand란?

Zustand는 간단하고 가벼운 상태 관리 라이브러리입니다.

Zustand가 하는 일:

> Claude Code가 Zustand 상태 관리 코드를 자동으로 작성해줍니다.

3-3. 상태 관리 라이브러리 비교

4. Zod - 데이터 검증

4-1. 데이터 검증이란?

사용자가 입력한 데이터가 올바른지 확인하는 과정입니다.

검증 필요한 상황:

• 이메일 형식이 맞는지?
• 비밀번호가 8자 이상인지?
• 나이가 숫자인지?

4-2. Zod가 검증하는 것들

> Claude Code가 Zod 검증 코드를 자동으로 작성해줍니다. "회원가입 입력 검증해줘"라고 요청하면 됩니다.

4-3. Zod의 장점

5. Jest - 테스트 라이브러리

5-1. 테스트란?

코드가 예상대로 동작하는지 자동으로 확인하는 것입니다.

테스트 예시:

> Claude Code가 테스트 코드를 자동으로 작성해줍니다. "로그인 테스트 만들어줘"라고 요청하면 됩니다.

5-2. Jest 주요 기능

5-3. 테스트의 이점

6. 기타 유용한 라이브러리

6-1. 자주 사용되는 라이브러리

6-2. UI 컴포넌트 라이브러리

정리

라이브러리 vs 프레임워크 핵심 차이:

• 라이브러리: 내가 호출함 (나에게 주도권)
• 프레임워크: 나를 호출함 (프레임워크에 주도권)

다음 편에서는 전체 구조를 제공하는 Framework를 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 4,500자 / 작성자: Claude / 프롬프터: 써니

13편 | 기술 스택 - Framework (프레임워크)

기술 스택의 여섯 번째 요소는 Framework(프레임워크)입니다. 개발의 전체 구조와 규칙을 제공하는 큰 틀입니다.

1. Framework란 무엇인가

1-1. 프레임워크의 정의

Framework(프레임워크)는 애플리케이션 개발을 위한 뼈대와 규칙을 제공합니다. 정해진 구조 안에서 개발하면 됩니다.

1-2. 라이브러리 vs 프레임워크

쉬운 비교:

> Claude Code가 프레임워크 구조에 맞게 코드를 자동으로 작성해줍니다.

2. Next.js - 풀스택 프레임워크

2-1. Next.js란?

Next.js는 React 기반의 풀스택 웹 프레임워크입니다. Vercel에서 만들었으며, 프론트엔드와 백엔드를 모두 개발할 수 있습니다.

2-2. 파일 기반 라우팅

Next.js에서는 폴더 구조가 곧 URL이 됩니다.

`

app/

├── page.tsx → /

├── about/

│ └── page.tsx → /about

├── blog/

│ ├── page.tsx → /blog

│ └── [id]/

│ └── page.tsx → /blog/1, /blog/2, ...

└── api/

└── users/

└── route.ts → /api/users

`

2-3. 렌더링 방식

2-4. API Routes

Next.js에서 백엔드 API를 만들 수 있습니다.

> Claude Code가 API 코드를 자동으로 작성해줍니다. "회원 목록 API 만들어줘"라고 요청하면 됩니다.

3. Tailwind CSS - 스타일 프레임워크

3-1. Tailwind CSS란?

Tailwind CSS는 유틸리티 기반의 CSS 프레임워크입니다. 미리 정의된 클래스를 조합해서 스타일을 만듭니다.

전통적인 CSS vs Tailwind CSS:

> Tailwind는 bg-blue-500(파란 배경), text-white(흰 글자)처럼 의미가 명확한 클래스를 조합합니다. Claude Code가 Tailwind 클래스를 자동으로 적용해줍니다.

3-2. Tailwind의 장점

3-3. 반응형 디자인

Tailwind는 접두사로 화면 크기별 스타일을 쉽게 지정합니다.

3-4. 자주 사용하는 클래스

레이아웃:

여백:

색상:

4. 프레임워크 선택 가이드

4-1. 프론트엔드 프레임워크 비교

4-2. CSS 프레임워크 비교

4-3. SSALWorks 기술 선택 이유

정리

핵심 개념:

• 프레임워크 = 뼈대 + 규칙
• 라이브러리와 달리 주도권이 프레임워크에 있음
• Next.js로 프론트엔드 + 백엔드 모두 개발 가능

다음 편에서는 외부 제공 기능인 External Service (외부 서비스, XaaS)를 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 4,800자 / 작성자: Claude / 프롬프터: 써니

14편 | 기술 스택 - External Service (외부 서비스, XaaS)

기술 스택의 마지막 요소는 External Service(외부 서비스)입니다. 외부 회사가 제공하는 완성된 기능을 API로 가져다 쓰는 방식입니다.

1. External Service란 무엇인가

1-1. 외부 서비스의 정의

External Service(외부 서비스)는 외부 회사가 인프라나 기능을 제공하고, 개발자는 API로 사용하는 방식입니다. 직접 구축하지 않아도 됩니다.

장점:

• 직접 구축/관리 부담 없음
• 전문 업체가 운영하므로 안정적
• 빠른 개발 가능
• 필요한 만큼만 비용 지불

1-2. XaaS 종류

XaaS = "X as a Service" (X를 서비스로 제공)

1-3. 직접 구축 vs 외부 서비스

2. Supabase - BaaS

2-1. Supabase란?

Supabase는 오픈소스 Firebase 대안입니다. 데이터베이스, 인증, 스토리지, 실시간 기능을 모두 제공합니다.

2-2. Supabase로 할 수 있는 일

> Claude Code가 Supabase 연동 코드를 자동으로 작성해줍니다. "회원 목록 가져와줘"라고 요청하면 됩니다.

2-3. Supabase vs Firebase

3. Vercel - PaaS

3-1. Vercel이란?

Vercel은 프론트엔드 배포 플랫폼입니다. Next.js를 만든 회사이며, Git push만 하면 자동 배포됩니다.

3-2. Vercel 배포 과정

`

↓

↓

↓

↓

`

3-3. Vercel 장점

4. Resend - 이메일 외부 서비스

4-1. Resend란?

Resend는 개발자 친화적인 이메일 발송 외부 서비스입니다. 회원가입 확인, 비밀번호 재설정 등 트랜잭션 이메일에 사용합니다.

4-2. Resend로 할 수 있는 일

> Claude Code가 Resend 이메일 발송 코드를 자동으로 작성해줍니다. "환영 이메일 보내줘"라고 요청하면 됩니다.

4-3. 이메일 외부 서비스 비교

5. 기타 유용한 외부 서비스

5-1. 인증/결제 외부 서비스

5-2. AI/분석 외부 서비스

5-3. 파일/미디어 외부 서비스

6. SSALWorks 외부 서비스 스택

6-1. 핵심 외부 서비스

6-2. 외부 서비스 연동 구조

`

[사용자]

↓

[Vercel - 호스팅]

↓

[Next.js 앱]

↓

┌───────────┬───────────┬───────────┐

│ Supabase │ Resend │ Toss Pay │

│ (DB/Auth) │ (이메일) │ (결제) │

└───────────┴───────────┴───────────┘

`

6-3. 비용 구조 (무료 티어)

정리

핵심 개념:

• XaaS = 외부 서비스로 제공받는 것
• 직접 구축 대신 API로 사용
• 빠른 개발, 유지보수 부담 감소
• 스타트업/MVP에 특히 유용

다음 편부터는 개발 영역 7가지를 자세히 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 4,600자 / 작성자: Claude / 프롬프터: 써니

15편 | 개발 영역 - Frontend (프론트엔드)

사용자가 직접 보고 상호작용하는 화면, 바로 Frontend입니다. 버튼을 클릭하고, 폼에 입력하고, 애니메이션을 보는 모든 것이 프론트엔드 영역입니다.

15.1 Language (언어)

프론트엔드의 3대 언어와 TypeScript를 알아봅니다.

HTML (HyperText Markup Language)

웹페이지의 구조를 정의합니다.

`html

`

• 태그로 요소를 정의
• 시맨틱 태그로 의미 부여 (
• 접근성과 SEO에 직접 영향

CSS (Cascading Style Sheets)

웹페이지의 스타일을 정의합니다.

`css

.button {

background: #10B981;

color: white;

padding: 12px 24px;

border-radius: 8px;

}

`

• 색상, 크기, 여백, 레이아웃 지정
• Flexbox, Grid로 복잡한 레이아웃 구성
• 반응형 디자인 (미디어 쿼리)

JavaScript

웹페이지의 동작을 정의합니다.

`javascript

button.addEventListener('click', () => {

alert('클릭!');

});

`

• 사용자 이벤트 처리
• DOM 조작
• API 호출 (fetch)
• 동적 콘텐츠 렌더링

TypeScript

JavaScript에 타입을 추가한 언어입니다.

`typescript

function greet(name: string): string {

return 안녕, ${name}!;

}

`

• 컴파일 타임에 오류 발견
• 자동완성, 리팩토링 지원
• 대규모 프로젝트에 필수

SSALWorks: TypeScript를 기본으로 사용합니다.

15.2 Runtime (실행 환경)

Browser (브라우저)

프론트엔드 코드가 실행되는 곳입니다.

브라우저가 하는 일:

• HTML 파싱 → DOM 트리 생성
• CSS 파싱 → CSSOM 생성
• JavaScript 실행
• 렌더링 (화면에 그리기)

주의: 브라우저마다 약간의 차이가 있어 크로스 브라우저 테스트가 필요합니다.

15.3 Package Manager (패키지 관리자)

npm (Node Package Manager)

가장 널리 쓰이는 패키지 관리자입니다.

`bash

npm install react # 패키지 설치

npm install -D eslint # 개발 의존성 설치

npm run build # 스크립트 실행

`

yarn

npm의 대안으로, 더 빠른 설치 속도를 제공합니다.

`bash

yarn add react

yarn add -D eslint

yarn build

`

SSALWorks: npm을 기본으로 사용합니다.

15.4 Tools (도구)

Vite

빠른 개발 서버와 빌드 도구입니다.

`bash

npm create vite@latest my-app

cd my-app && npm install && npm run dev

`

• HMR (Hot Module Replacement) 지원
• 빠른 콜드 스타트
• 최적화된 프로덕션 빌드

ESLint

코드 품질을 검사합니다.

`javascript

// ❌ ESLint 경고: 사용하지 않는 변수

const unused = 'hello';

// ✅ 올바른 코드

const message = 'hello';

console.log(message);

`

Prettier

코드 포맷을 자동으로 정리합니다.

`javascript

// 저장 전

const x={a:1,b:2}

// Prettier 적용 후

const x = { a: 1, b: 2 };

`

DevTools (브라우저 개발자 도구)

• Elements: DOM, CSS 검사
• Console: JavaScript 로그, 에러
• Network: API 호출 모니터링
• Performance: 성능 분석

15.5 Library (라이브러리)

React

UI를 컴포넌트 단위로 구성하는 라이브러리입니다.

`jsx

function Button({ label, onClick }) {

return {label};

}

`

• 컴포넌트 기반 개발
• Virtual DOM으로 효율적 렌더링
• 풍부한 생태계

Zustand

가벼운 상태 관리 라이브러리입니다.

`javascript

import { create } from 'zustand';

const useStore = create((set) => ({

count: 0,

increase: () => set((state) => ({ count: state.count + 1 })),

}));

`

• Redux보다 간단한 문법
• 보일러플레이트 최소화
• TypeScript 지원 우수

React Hook Form

폼 상태 관리를 쉽게 해주는 라이브러리입니다.

`jsx

const { register, handleSubmit } = useForm();

`

• 비제어 컴포넌트 방식
• 렌더링 최적화
• 유효성 검사 통합

SSALWorks: React + Zustand + React Hook Form 조합을 사용합니다.

15.6 Framework (프레임워크)

Next.js

React 기반 풀스택 프레임워크입니다.

`

app/

├── page.tsx # / 라우트

├── about/

│ └── page.tsx # /about 라우트

└── api/

└── hello/

└── route.ts # API 엔드포인트

`

주요 기능:

• 파일 기반 라우팅
• SSR (Server-Side Rendering)
• API Routes (백엔드 통합)
• 이미지 최적화

Tailwind CSS

유틸리티 기반 CSS 프레임워크입니다.

`html

버튼

`

• 클래스 조합으로 스타일링
• CSS 파일 따로 안 만들어도 됨
• 일관된 디자인 시스템

SSALWorks: Next.js + Tailwind CSS를 기본 스택으로 사용합니다.

15.7 External Service (외부 서비스)

Frontend 영역에서는 별도의 외부 서비스를 사용하지 않습니다. 필요한 서비스는 다른 영역(Database, DevOps 등)에서 연동합니다.

정리

프론트엔드는 사용자와 직접 만나는 영역입니다. 다음 편에서는 서버 환경을 구축하는 Backend Infra를 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 5,100자 / 작성자: Claude / 프롬프터: 써니

16편 | 개발 영역 - Backend Infra (백엔드 기반)

서버가 돌아가는 기반 환경, Backend Infra입니다. 실시간 통신, 파일 처리, 이메일 발송 등 서버 인프라를 구성하는 기술들을 다룹니다.

16.1 Language (언어)

JavaScript & TypeScript

백엔드에서도 프론트엔드와 동일한 언어를 사용합니다.

`typescript

// 서버 사이드 TypeScript

import express from 'express';

const app = express();

app.get('/api/hello', (req, res) => {

res.json({ message: 'Hello from server!' });

});

`

장점:

• 프론트엔드/백엔드 동일 언어 → 학습 비용 감소
• 코드 공유 가능 (유틸리티, 타입 정의)
• npm 생태계 공유

SSALWorks: TypeScript를 기본으로 사용합니다.

16.2 Runtime (실행 환경)

Node.js

서버에서 JavaScript를 실행하는 런타임입니다.

`bash

node server.js # Node.js로 서버 실행

`

특징:

• V8 엔진 기반 (Chrome과 동일)
• 비동기 I/O (높은 동시성)
• 이벤트 루프 기반
• 단일 스레드 (멀티 프로세스로 확장)

버전 관리:

`bash

nvm으로 Node.js 버전 관리

nvm install 20

nvm use 20

node -v # v20.x.x

`

SSALWorks: Node.js 20 LTS를 사용합니다.

Node.js vs Browser

16.3 Package Manager (패키지 관리자)

npm & yarn

프론트엔드와 동일한 패키지 관리자를 사용합니다.

`bash

백엔드 패키지 설치 예시

npm install express socket.io

npm install -D nodemon typescript

`

package.json 스크립트:

`json

{

"scripts": {

"dev": "nodemon src/server.ts",

"build": "tsc",

"start": "node dist/server.js"

}

}

`

16.4 Tools (도구)

Webpack

모듈 번들러입니다. 여러 파일을 하나로 묶어줍니다.

`javascript

// webpack.config.js

module.exports = {

entry: './src/index.ts',

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist'),

},

module: {

rules: [

{ test: /\.ts$/, use: 'ts-loader' },

],

},

};

`

하는 일:

• 여러 파일 → 하나의 번들로
• TypeScript → JavaScript 변환
• 코드 압축 (minify)
• 트리 쉐이킹 (사용 안 하는 코드 제거)

참고: Next.js를 사용하면 Webpack 설정이 자동으로 처리됩니다.

nodemon

개발 중 파일 변경 시 자동으로 서버를 재시작합니다.

`bash

npx nodemon src/server.ts

파일 저장할 때마다 서버 자동 재시작

`

16.5 Library (라이브러리)

Socket.io

실시간 양방향 통신 라이브러리입니다.

`javascript

// 서버

import { Server } from 'socket.io';

const io = new Server(server);

io.on('connection', (socket) => {

console.log('사용자 연결됨');

socket.on('chat', (message) => {

io.emit('chat', message); // 모든 사용자에게 전송

});

});

`

`javascript

// 클라이언트

import { io } from 'socket.io-client';

const socket = io();

socket.emit('chat', '안녕하세요!');

socket.on('chat', (msg) => console.log(msg));

`

사용 사례:

• 실시간 채팅
• 실시간 알림
• 협업 도구 (동시 편집)
• 게임

chokidar

파일 시스템 변경을 감지하는 라이브러리입니다.

`javascript

import chokidar from 'chokidar';

chokidar.watch('./uploads').on('all', (event, path) => {

console.log(event, path);

// add, change, unlink 등 이벤트 감지

});

`

사용 사례:

• 파일 업로드 감지
• 자동 빌드 트리거
• 로그 파일 모니터링

16.6 Framework (프레임워크)

Backend Infra 영역에서는 별도의 프레임워크를 사용하지 않습니다. Next.js가 API Routes를 통해 백엔드 기능을 제공하므로, 별도의 Express 등을 사용하지 않아도 됩니다.

16.7 External Service (외부 서비스)

Resend (이메일 발송 서비스)

개발자 친화적인 이메일 API 서비스입니다.

`typescript

import { Resend } from 'resend';

const resend = new Resend('re_xxxxx');

await resend.emails.send({

from: 'SSALWorks ',

to: 'user@example.com',

subject: '가입을 환영합니다!',

html: '

환영합니다!

SSALWorks에 가입해 주셔서 감사합니다.

});

`

특징:

• 간단한 API
• React Email 지원 (React 컴포넌트로 이메일 작성)
• 높은 전달률
• 상세한 분석 (열람, 클릭 추적)

사용 사례:

• 회원가입 확인 이메일
• 비밀번호 재설정
• 결제 영수증
• 마케팅 이메일

SSALWorks: Resend를 이메일 발송에 사용합니다.

왜 Resend인가?

정리

Backend Infra는 서버가 돌아가는 기반을 담당합니다. 다음 편에서는 비즈니스 로직을 처리하는 Backend API를 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 4,800자 / 작성자: Claude / 프롬프터: 써니

17편 | 개발 영역 - Backend API (백엔드 API)

프론트엔드와 데이터베이스를 연결하는 다리, Backend API입니다. 비즈니스 로직을 처리하고, 데이터를 검증하고, 응답을 반환하는 핵심 영역입니다.

17.1 Language (언어)

JavaScript & TypeScript

API 개발에도 TypeScript를 사용합니다.

TypeScript의 이점:

> Claude Code가 TypeScript API를 자동으로 작성해줍니다.

17.2 Runtime (실행 환경)

Node.js

전통적인 서버 실행 환경입니다. 파일 읽기/쓰기 등 모든 서버 기능을 사용할 수 있습니다.

Edge Runtime

CDN 엣지에서 실행되는 경량 런타임입니다. 사용자와 가까운 곳에서 빠르게 응답합니다.

Node.js vs Edge Runtime:

SSALWorks: 대부분 Node.js, 간단한 API는 Edge 사용.

17.3 Package Manager (패키지 관리자)

npm

API 개발에 필요한 패키지를 관리합니다.

SSALWorks API 필수 패키지:

> Claude Code가 필요한 패키지를 자동으로 설치해줍니다.

17.4 Tools (도구)

Postman

API를 테스트하는 도구입니다.

주요 기능:

• 요청 보내기 (GET, POST, PUT, DELETE)
• 헤더, 바디 설정
• 환경 변수 관리
• 자동화 테스트

사용 예시: 로그인 API를 테스트할 때, Postman에서 URL, 이메일, 비밀번호를 입력하고 요청을 보내면 결과를 바로 확인할 수 있습니다.

Thunder Client

VS Code 확장 프로그램으로, Postman과 유사한 기능을 제공합니다.

장점:

• VS Code 내에서 바로 사용
• 가볍고 빠름
• 무료

SSALWorks: Thunder Client를 주로 사용합니다.

17.5 Library (라이브러리)

Zod

TypeScript 기반 데이터 검증 라이브러리입니다.

Zod가 하는 일: "이메일은 이메일 형식이어야 해", "비밀번호는 8자 이상이어야 해" 같은 규칙을 정의하고, 입력값이 규칙에 맞는지 자동으로 검증합니다.

Zod의 장점:

> Claude Code가 Zod 검증 코드를 자동으로 작성해줍니다. 여러분은 "이메일과 비밀번호 검증해줘"라고 요청하면 됩니다.

17.6 Framework (프레임워크)

Next.js API Routes

Next.js의 내장 API 기능입니다. 폴더 구조가 곧 API URL이 됩니다.

폴더 구조 = API URL:

HTTP 메서드:

> Claude Code가 API 코드를 자동으로 생성해줍니다. 여러분은 "로그인 API 만들어줘"라고 요청하면 됩니다.

17.7 External Service (외부 서비스)

Backend API 영역에서는 별도의 외부 서비스를 사용하지 않습니다. 필요한 서비스는 다른 영역에서 연동합니다:

• 데이터베이스 → Database 영역 (Supabase)
• 인증 → Security 영역 (Supabase Auth)
• 이메일 → Backend Infra 영역 (Resend)

API 설계 원칙

RESTful API

응답 형식

정리

Backend API는 비즈니스 로직의 핵심입니다. 다음 편에서는 데이터를 저장하는 Database를 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 5,200자 / 작성자: Claude / 프롬프터: 써니

18편 | 개발 영역 - Database (데이터베이스)

모든 데이터를 저장하고 관리하는 창고, Database입니다. 회원 정보, 게시글, 주문 내역 등 애플리케이션의 모든 데이터가 여기에 저장됩니다.

18.1 Language (언어)

SQL (Structured Query Language)

데이터베이스와 대화하는 언어입니다.

데이터 조회 (SELECT):

`sql

-- 모든 사용자 조회

SELECT * FROM users;

-- 특정 조건으로 조회

SELECT name, email FROM users WHERE status = 'active';

-- 정렬

SELECT * FROM posts ORDER BY created_at DESC;

-- 제한

SELECT * FROM posts LIMIT 10;

`

데이터 삽입 (INSERT):

`sql

INSERT INTO users (name, email, password)

VALUES ('홍길동', 'hong@example.com', 'hashed_password');

`

데이터 수정 (UPDATE):

`sql

UPDATE users

SET name = '김철수'

WHERE id = 123;

`

데이터 삭제 (DELETE):

`sql

DELETE FROM users WHERE id = 123;

`

테이블 생성:

`sql

CREATE TABLE users (

id UUID PRIMARY KEY DEFAULT gen_random_uuid(),

name VARCHAR(100) NOT NULL,

email VARCHAR(255) UNIQUE NOT NULL,

created_at TIMESTAMP DEFAULT NOW()

);

`

18.2 Runtime (실행 환경)

PostgreSQL

오픈소스 관계형 데이터베이스입니다.

특징:

• ACID 트랜잭션 지원
• JSON 데이터 타입 지원
• 전문 검색 (Full-Text Search)
• 확장성 (Extensions)

주요 데이터 타입:

SSALWorks: Supabase가 제공하는 PostgreSQL을 사용합니다.

18.3 Package Manager (패키지 관리자)

Database 영역에서는 패키지 관리자를 사용하지 않습니다. 데이터베이스는 SQL로 직접 관리합니다.

18.4 Tools (도구)

Supabase Dashboard

웹 기반 데이터베이스 관리 도구입니다.

주요 기능:

• Table Editor: 테이블 생성/수정/삭제
• SQL Editor: SQL 쿼리 직접 실행
• Database: 스키마, 인덱스, 정책 관리
• Authentication: 사용자 관리
• Storage: 파일 저장소
• Logs: 쿼리 로그, 에러 로그

사용법:

pgAdmin

PostgreSQL 전용 GUI 관리 도구입니다.

특징:

• 로컬 설치형
• 복잡한 쿼리 작성에 유용
• ERD (Entity Relationship Diagram) 지원

SSALWorks: Supabase Dashboard를 주로 사용합니다.

18.5 Library (라이브러리)

@supabase/supabase-js

Supabase JavaScript 클라이언트입니다.

설치:

`bash

npm install @supabase/supabase-js

`

초기화:

`typescript

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(

process.env.SUPABASE_URL!,

process.env.SUPABASE_ANON_KEY!

);

`

데이터 조회:

`typescript

// 전체 조회

const { data, error } = await supabase

.from('users')

.select('*');

// 조건 조회

const { data } = await supabase

.from('users')

.select('name, email')

.eq('status', 'active')

.order('created_at', { ascending: false })

.limit(10);

`

데이터 삽입:

`typescript

const { data, error } = await supabase

.from('users')

.insert({ name: '홍길동', email: 'hong@example.com' })

.select();

`

데이터 수정:

`typescript

const { data, error } = await supabase

.from('users')

.update({ name: '김철수' })

.eq('id', 123)

.select();

`

데이터 삭제:

`typescript

const { error } = await supabase

.from('users')

.delete()

.eq('id', 123);

`

SSALWorks: 모든 DB 작업에 supabase-js를 사용합니다.

18.6 Framework (프레임워크)

Database 영역에서는 별도의 프레임워크를 사용하지 않습니다. Supabase가 ORM 없이도 충분한 기능을 제공합니다.

18.7 External Service (외부 서비스)

Supabase (BaaS - Backend as a Service)

Firebase의 오픈소스 대안으로, PostgreSQL 기반의 BaaS입니다.

Supabase가 제공하는 기능:

왜 Supabase인가?

Supabase 무료 플랜:

• 500MB 데이터베이스
• 1GB 파일 스토리지
• 50,000 MAU (월간 활성 사용자)
• 무제한 API 요청

SSALWorks: Supabase를 데이터베이스 서비스로 사용합니다.

데이터베이스 설계 원칙

1. 정규화

데이터 중복을 최소화합니다.

`sql

-- ❌ 나쁜 예: 중복 데이터

CREATE TABLE orders (

id UUID PRIMARY KEY,

user_name VARCHAR(100), -- 중복!

user_email VARCHAR(255), -- 중복!

product_name VARCHAR(100)

);

-- ✅ 좋은 예: 정규화

CREATE TABLE users (

id UUID PRIMARY KEY,

name VARCHAR(100),

email VARCHAR(255)

);

CREATE TABLE orders (

id UUID PRIMARY KEY,

user_id UUID REFERENCES users(id), -- 외래 키

product_name VARCHAR(100)

);

`

2. 인덱스

자주 검색하는 컬럼에 인덱스를 추가합니다.

`sql

CREATE INDEX idx_users_email ON users(email);

CREATE INDEX idx_orders_user_id ON orders(user_id);

`

3. RLS (Row Level Security)

행 단위 보안 정책입니다.

`sql

-- RLS 활성화

ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- 정책: 본인 게시글만 수정 가능

CREATE POLICY "Users can update own posts"

ON posts FOR UPDATE

USING (auth.uid() = user_id);

`

정리

Database는 애플리케이션의 심장입니다. 다음 편에서는 인증과 인가를 담당하는 Security를 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 5,400자 / 작성자: Claude / 프롬프터: 써니

19편 | 개발 영역 - Security (보안)

누가 접근하고 무엇을 할 수 있는지 관리하는 영역, Security입니다. 인증(Authentication)과 인가(Authorization)를 통해 애플리케이션을 보호합니다.

인증 vs 인가

시작하기 전에 두 개념을 명확히 구분합니다.

흐름:

`

사용자 → [인증] 로그인 → [인가] 권한 확인 → 리소스 접근

`

19.1~19.4 Language, Runtime, Package Manager, Tools

Security 영역에서는 별도의 언어, 런타임, 패키지 관리자, 도구를 사용하지 않습니다. 기존 스택(TypeScript, Node.js)을 그대로 활용하며, Supabase Auth가 대부분의 기능을 제공합니다.

19.5 Library (라이브러리)

Supabase Auth

Supabase에 내장된 인증 시스템입니다.

지원하는 인증 방식:

• 이메일/비밀번호
• 매직 링크 (비밀번호 없이 이메일로 로그인)
• 소셜 로그인 (Google, GitHub, Kakao 등)
• 전화번호 (SMS)

이메일/비밀번호 인증

회원가입:

`typescript

const { data, error } = await supabase.auth.signUp({

email: 'user@example.com',

password: 'securePassword123',

});

`

로그인:

`typescript

const { data, error } = await supabase.auth.signInWithPassword({

email: 'user@example.com',

password: 'securePassword123',

});

`

로그아웃:

`typescript

const { error } = await supabase.auth.signOut();

`

현재 사용자 확인:

`typescript

const { data: { user } } = await supabase.auth.getUser();

if (user) {

console.log('로그인됨:', user.email);

} else {

console.log('로그인 안 됨');

}

`

세션 관리

Supabase Auth는 JWT(JSON Web Token) 기반으로 세션을 관리합니다.

`typescript

// 세션 확인

const { data: { session } } = await supabase.auth.getSession();

// 세션 토큰

const accessToken = session?.access_token;

// 세션 갱신

const { data, error } = await supabase.auth.refreshSession();

`

JWT 구조:

`

header.payload.signature

예시:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.

eyJzdWIiOiIxMjM0NTY3ODkwIiwiZW1haWwiOiJ1c2VyQGV4YW1wbGUuY29tIn0.

SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

`

19.6 Framework (프레임워크)

Security 영역에서는 별도의 프레임워크를 사용하지 않습니다. Supabase Auth가 프레임워크 역할을 합니다.

19.7 External Service (외부 서비스)

OAuth (Open Authorization)

타사 서비스를 통해 로그인하는 표준 프로토콜입니다.

흐름:

`

`

Google OAuth

가장 널리 쓰이는 소셜 로그인입니다.

Supabase에서 Google 로그인:

`typescript

const { data, error } = await supabase.auth.signInWithOAuth({

provider: 'google',

options: {

redirectTo: 'https://yourapp.com/auth/callback',

},

});

`

설정 필요:

Kakao OAuth

한국에서 많이 사용하는 소셜 로그인입니다.

Supabase에서 Kakao 로그인:

`typescript

const { data, error } = await supabase.auth.signInWithOAuth({

provider: 'kakao',

options: {

redirectTo: 'https://yourapp.com/auth/callback',

},

});

`

설정 필요:

SSALWorks: Google OAuth와 Kakao OAuth를 지원합니다.

보안 모범 사례

1. 비밀번호 보안

`typescript

// ❌ 절대 안 됨: 평문 저장

const password = 'mypassword123';

db.insert({ password: password });

// ✅ Supabase Auth 사용 (자동으로 해싱)

await supabase.auth.signUp({

email: 'user@example.com',

password: 'mypassword123', // 자동으로 bcrypt 해싱됨

});

`

2. HTTPS 필수

`

❌ http://yourapp.com → 데이터 노출 위험

✅ https://yourapp.com → 암호화된 통신

`

Vercel, Supabase 모두 HTTPS를 기본 제공합니다.

3. 환경 변수 관리

`typescript

// ❌ 절대 안 됨: 코드에 키 노출

const supabase = createClient(

'https://xxx.supabase.co',

'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // 노출!

);

// ✅ 환경 변수 사용

const supabase = createClient(

process.env.SUPABASE_URL!,

process.env.SUPABASE_ANON_KEY!

);

`

4. RLS (Row Level Security)

데이터베이스 수준에서 접근 제어합니다.

`sql

-- 본인 데이터만 조회 가능

CREATE POLICY "Users can view own data"

ON profiles FOR SELECT

USING (auth.uid() = user_id);

-- 본인 데이터만 수정 가능

CREATE POLICY "Users can update own data"

ON profiles FOR UPDATE

USING (auth.uid() = user_id);

`

5. 입력값 검증

`typescript

import { z } from 'zod';

const LoginSchema = z.object({

email: z.string().email(),

password: z.string().min(8),

});

// 검증 후 사용

const result = LoginSchema.safeParse(input);

if (!result.success) {

throw new Error('Invalid input');

}

`

인증 흐름 예시

회원가입 흐름

`

`

소셜 로그인 흐름

`

`

정리

Security는 애플리케이션의 방패입니다. 다음 편에서는 코드 품질을 검증하는 Testing을 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 5,100자 / 작성자: Claude / 프롬프터: 써니

20편 | 개발 영역 - Testing (테스트)

코드가 제대로 작동하는지 검증하는 영역, Testing입니다. 버그를 사전에 발견하고, 리팩토링에 자신감을 갖게 해주는 안전망입니다.

테스트의 종류

테스트 피라미드

`

△ E2E 테스트 (적음)

╱ ╲ - 실제 사용자 시나리오

╱ ╲ - 느리고 비용 높음

╱ ╲

╱ 통합 테스트 (중간)

╱ ╲ - 여러 모듈 연결

╱ ╲ - 중간 속도

╱ 단위 테스트 (많음)

╱ ╲ - 함수/컴포넌트 단위

━━━━━━━━━━━━━━━━━ - 빠르고 저렴

`

20.1 Language (언어)

JavaScript & TypeScript

테스트 코드도 동일한 언어로 작성합니다.

`typescript

// 테스트 코드 예시

import { add } from './math';

test('1 + 2 = 3', () => {

expect(add(1, 2)).toBe(3);

});

`

20.2 Runtime (실행 환경)

Node.js

테스트는 Node.js 환경에서 실행됩니다.

`bash

Jest 실행

npm test

특정 파일만 테스트

npm test -- auth.test.ts

`

20.3 Package Manager (패키지 관리자)

npm

테스트 도구를 설치합니다.

`bash

npm install -D jest @types/jest ts-jest

npm install -D playwright @playwright/test

`

package.json 스크립트:

`json

{

"scripts": {

"test": "jest",

"test:watch": "jest --watch",

"test:e2e": "playwright test"

}

}

`

20.4 Tools (도구)

Testing 영역에서는 별도의 도구를 사용하지 않습니다. Jest와 Playwright가 CLI 도구를 제공합니다.

20.5 Library (라이브러리)

Jest

JavaScript 테스트 프레임워크입니다.

설치:

`bash

npm install -D jest @types/jest ts-jest

`

설정 (jest.config.js):

`javascript

module.exports = {

preset: 'ts-jest',

testEnvironment: 'node',

testMatch: ['*/.test.ts'],

};

`

기본 문법:

`typescript

// describe: 테스트 그룹

describe('Math functions', () => {

// test 또는 it: 개별 테스트

test('add function works', () => {

expect(add(1, 2)).toBe(3);

});

it('subtract function works', () => {

expect(subtract(5, 3)).toBe(2);

});

});

`

매처(Matcher):

`typescript

// 값 비교

expect(value).toBe(3); // 정확히 같음

expect(value).toEqual({ a: 1 }); // 객체 내용 같음

expect(value).not.toBe(5); // 같지 않음

// 타입 확인

expect(value).toBeNull();

expect(value).toBeDefined();

expect(value).toBeTruthy();

// 숫자

expect(value).toBeGreaterThan(3);

expect(value).toBeLessThan(10);

// 문자열

expect(str).toMatch(/hello/);

// 배열

expect(array).toContain('item');

// 에러

expect(() => func()).toThrow();

expect(() => func()).toThrow('error message');

`

비동기 테스트:

`typescript

// async/await

test('fetches user data', async () => {

const user = await fetchUser(1);

expect(user.name).toBe('홍길동');

});

// Promise

test('fetches user data', () => {

return fetchUser(1).then(user => {

expect(user.name).toBe('홍길동');

});

});

`

Mock:

`typescript

// 함수 모킹

const mockFn = jest.fn();

mockFn.mockReturnValue(42);

expect(mockFn()).toBe(42);

// 모듈 모킹

jest.mock('./api', () => ({

fetchUser: jest.fn().mockResolvedValue({ name: '홍길동' }),

}));

`

Playwright

E2E(End-to-End) 테스트 도구입니다.

설치:

`bash

npm install -D @playwright/test

npx playwright install # 브라우저 설치

`

설정 (playwright.config.ts):

`typescript

import { defineConfig } from '@playwright/test';

export default defineConfig({

testDir: './e2e',

use: {

baseURL: 'http://localhost:3000',

},

});

`

테스트 작성:

`typescript

import { test, expect } from '@playwright/test';

test('로그인 페이지 테스트', async ({ page }) => {

// 페이지 이동

await page.goto('/login');

// 요소 찾기 및 입력

await page.fill('input[name="email"]', 'user@example.com');

await page.fill('input[name="password"]', 'password123');

// 버튼 클릭

await page.click('button[type="submit"]');

// 결과 확인

await expect(page).toHaveURL('/dashboard');

await expect(page.locator('h1')).toContainText('대시보드');

});

`

주요 기능:

`typescript

// 페이지 이동

await page.goto('/about');

// 요소 찾기

const button = page.locator('button');

const input = page.locator('input[name="email"]');

const text = page.locator('text=로그인');

// 액션

await button.click();

await input.fill('hello');

await page.keyboard.press('Enter');

// 대기

await page.waitForURL('/dashboard');

await page.waitForSelector('.loading', { state: 'hidden' });

// 스크린샷

await page.screenshot({ path: 'screenshot.png' });

`

SSALWorks: Jest(단위/통합)와 Playwright(E2E)를 사용합니다.

20.6 Framework (프레임워크)

Testing 영역에서는 별도의 프레임워크를 사용하지 않습니다. Jest와 Playwright가 프레임워크 역할을 합니다.

20.7 External Service (외부 서비스)

Testing 영역에서는 별도의 외부 서비스를 사용하지 않습니다.

테스트 작성 모범 사례

1. AAA 패턴

`typescript

test('사용자 생성', async () => {

// Arrange (준비)

const userData = { name: '홍길동', email: 'hong@example.com' };

// Act (실행)

const user = await createUser(userData);

// Assert (검증)

expect(user.name).toBe('홍길동');

expect(user.id).toBeDefined();

});

`

2. 명확한 테스트 이름

`typescript

// ❌ 나쁜 예

test('test1', () => { ... });

// ✅ 좋은 예

test('이메일 형식이 올바르지 않으면 에러를 반환한다', () => { ... });

`

3. 독립적인 테스트

`typescript

// ❌ 나쁜 예: 다른 테스트에 의존

let user;

test('사용자 생성', () => { user = createUser(); });

test('사용자 조회', () => { getUser(user.id); }); // 첫 번째 테스트에 의존!

// ✅ 좋은 예: 독립적

test('사용자 조회', () => {

const user = createUser(); // 각 테스트에서 직접 생성

const result = getUser(user.id);

expect(result).toBeDefined();

});

`

정리

Testing은 코드의 안전망입니다. 다음 편에서는 배포와 운영을 담당하는 DevOps를 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 5,000자 / 작성자: Claude / 프롬프터: 써니

21편 | 개발 영역 - DevOps (데브옵스)

개발(Development)과 운영(Operations)을 연결하는 영역, DevOps입니다. 코드를 서버에 배포하고, 자동화하고, 모니터링하는 모든 활동을 다룹니다.

DevOps의 핵심

CI/CD 파이프라인

`

[개발] → [커밋] → [빌드] → [테스트] → [배포] → [모니터링]

└─────────── 자동화 ───────────┘

`

21.1 Language (언어)

YAML

설정 파일 작성에 사용하는 언어입니다.

`yaml

GitHub Actions 예시

name: Deploy

on:

push:

branches: [main]

jobs:

deploy:

runs-on: ubuntu-latest

steps:

• uses: actions/checkout@v4
• name: Install dependencies

run: npm install

• name: Build

run: npm run build

`

특징:

• 들여쓰기로 구조 표현
• JSON보다 읽기 쉬움
• 주석 지원 (#)

Bash

쉘 스크립트 작성에 사용합니다.

`bash

#!/bin/bash

빌드 스크립트

echo "Building..."

npm run build

배포

echo "Deploying..."

vercel --prod

`

21.2~21.3 Runtime, Package Manager

DevOps 영역에서는 별도의 런타임이나 패키지 관리자를 사용하지 않습니다.

21.4 Tools (도구)

Git

분산 버전 관리 시스템입니다.

기본 명령어:

`bash

저장소 초기화

git init

변경사항 추적

git add .

git commit -m "feat: 로그인 기능 추가"

원격 저장소

git push origin main

git pull origin main

브랜치

git checkout -b feature/login

git merge feature/login

`

커밋 메시지 규칙:

`

feat: 새 기능 추가

fix: 버그 수정

docs: 문서 수정

style: 코드 포맷팅

refactor: 리팩토링

test: 테스트 추가

chore: 기타 변경

`

GitHub

Git 저장소 호스팅 서비스입니다.

주요 기능:

• 코드 저장소
• Pull Request (코드 리뷰)
• Issues (이슈 관리)
• Actions (CI/CD)
• Pages (정적 사이트 호스팅)

Vercel CLI

Vercel 배포를 위한 CLI 도구입니다.

설치:

`bash

npm install -g vercel

`

사용법:

`bash

로그인

vercel login

배포 (프리뷰)

vercel

프로덕션 배포

vercel --prod

환경 변수 설정

vercel env add SUPABASE_URL

`

21.5~21.6 Library, Framework

DevOps 영역에서는 별도의 라이브러리나 프레임워크를 사용하지 않습니다.

21.7 External Service (외부 서비스)

Vercel (PaaS - Platform as a Service)

Next.js를 만든 회사의 호스팅 서비스입니다.

특징:

• Next.js 완벽 지원
• Git 연동 자동 배포
• 서버리스 함수
• Edge 네트워크 (CDN)
• 무료 HTTPS

배포 방법:

방법 1: Git 연동 (권장)

`

`

방법 2: CLI 배포

`bash

vercel --prod

`

환경 변수 설정:

`

Vercel Dashboard → Project → Settings → Environment Variables

SUPABASE_URL=https://xxx.supabase.co

SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...

`

도메인 연결:

`

Vercel Dashboard → Project → Settings → Domains

yourapp.com → Vercel DNS 설정

`

무료 플랜:

• 무제한 사이트
• 100GB 대역폭/월
• 서버리스 함수 100GB-hours
• 자동 HTTPS

GitHub Actions

GitHub에서 제공하는 CI/CD 서비스입니다.

워크플로우 파일 위치:

`

.github/

└── workflows/

├── ci.yml # CI 파이프라인

└── deploy.yml # 배포 파이프라인

`

CI 워크플로우 예시:

`yaml

.github/workflows/ci.yml

name: CI

on:

push:

branches: [main]

pull_request:

branches: [main]

jobs:

test:

runs-on: ubuntu-latest

steps:

• uses: actions/checkout@v4

• name: Setup Node.js

uses: actions/setup-node@v4

with:

node-version: '20'

cache: 'npm'

• name: Install dependencies

run: npm ci

• name: Run linter

run: npm run lint

• name: Run tests

run: npm test

• name: Build

run: npm run build

`

주요 개념:

SSALWorks: Vercel + GitHub Actions를 사용합니다.

배포 전략

1. 브랜치 전략

`

main (프로덕션)

↑

develop (개발)

↑

feature/xxx (기능 개발)

`

2. 환경 분리

3. 롤백

문제 발생 시 이전 버전으로 되돌립니다.

`bash

Vercel: 이전 배포로 롤백

vercel rollback

Git: 이전 커밋으로 되돌리기

git revert HEAD

git push

`

모니터링

Vercel Analytics

`

Vercel Dashboard → Project → Analytics

• 방문자 수
• 페이지 조회수
• Core Web Vitals

`

로그 확인

`

Vercel Dashboard → Project → Logs

• 함수 실행 로그
• 에러 로그
• 빌드 로그

`

정리

DevOps는 개발과 운영의 다리입니다. 다음 편에서는 SEO와 웹 접근성을 알아봅니다.

작성일: 2025-12-21 / 글자수: 약 5,000자 / 작성자: Claude / 프롬프터: 써니

22편 | 최적화 - SEO (검색 엔진 최적화)

검색 엔진에서 찾기 쉬운 웹사이트를 만드는 기술, SEO(Search Engine Optimization)입니다. 구글, 네이버 등에서 검색 순위를 높이는 방법을 다룹니다.

SEO의 핵심

검색 엔진이 보는 것

`

[사용자] → 검색어 입력 → [검색 엔진] → 웹사이트 순위 결정

↓

• 메타 태그
• 콘텐츠 품질
• 페이지 속도
• 모바일 최적화

`

22.1 Language (언어)

HTML (시맨틱 태그)

시맨틱 태그는 의미를 가진 HTML 태그입니다. 검색 엔진이 콘텐츠 구조를 이해하는 데 도움됩니다.

`html

`

주요 시맨틱 태그:

메타 태그

`html

`

22.2~22.3 Runtime, Package Manager

SEO 영역에서는 별도의 런타임이나 패키지 관리자를 사용하지 않습니다.

22.4 Tools (도구)

Lighthouse

Chrome DevTools에 내장된 웹 품질 측정 도구입니다.

사용법:

`

`

측정 항목:

PageSpeed Insights

Google의 웹 성능 분석 서비스입니다.

사용법:

`

`

SSALWorks: Lighthouse + PageSpeed Insights를 사용합니다.

22.5 Library (라이브러리)

next-seo

Next.js용 SEO 라이브러리입니다.

설치:

`bash

npm install next-seo

`

사용법:

`tsx

// app/layout.tsx

import { DefaultSeo } from 'next-seo';

export default function RootLayout({ children }) {

return (

title="SSALWorks"

description="AI 기반 학습 플랫폼"

openGraph={{

type: 'website',

locale: 'ko_KR',

url: 'https://ssalworks.com',

siteName: 'SSALWorks',

}}

/>

{children}

);

}

`

페이지별 SEO:

`tsx

// app/about/page.tsx

import { NextSeo } from 'next-seo';

export default function AboutPage() {

return (

<>

title="소개 | SSALWorks"

description="SSALWorks 서비스를 소개합니다"

/>

);

}

`

22.6 Framework (프레임워크)

Next.js (SEO 기능)

Next.js는 SEO에 최적화된 기능을 제공합니다.

Metadata API:

`tsx

// app/page.tsx

import type { Metadata } from 'next';

export const metadata: Metadata = {

title: 'SSALWorks - 홈',

description: 'AI 기반 학습 플랫폼',

keywords: ['AI', '학습', '교육'],

openGraph: {

title: 'SSALWorks',

description: 'AI와 함께 성장하는 학습 플랫폼',

images: ['/og-image.png'],

},

};

export default function HomePage() {

return

}

`

동적 메타데이터:

`tsx

// app/posts/[id]/page.tsx

export async function generateMetadata({ params }) {

const post = await getPost(params.id);

return {

title: post.title,

description: post.excerpt,

openGraph: {

title: post.title,

images: [post.thumbnail],

},

};

}

`

sitemap.xml 생성:

`tsx

// app/sitemap.ts

export default async function sitemap() {

const posts = await getAllPosts();

return [

{ url: 'https://ssalworks.com', lastModified: new Date() },

{ url: 'https://ssalworks.com/about', lastModified: new Date() },

...posts.map(post => ({

url: https://ssalworks.com/posts/${post.id},

lastModified: post.updatedAt,

})),

];

}

`

SSALWorks: Next.js Metadata API를 사용합니다.

22.7 External Service (외부 서비스)

Google Search Console

Google 검색 성능을 모니터링하는 서비스입니다.

주요 기능:

• 검색 노출 현황 확인
• 클릭률(CTR) 분석
• 색인 상태 확인
• 사이트맵 제출

설정 방법: