2025-2 KERT 웹 스터디

• 총 소요 시간: 1시간 30분
• 이론:실습 비중: 4:6 (이론 36분, 실습 54분)
• 대상: 웹 프론트엔드 개발 입문자
• 목표: 실무에서 바로 사용 가능한 JS/TS + React 핵심 개념 습득

• ✅ Session 1: JavaScript & TypeScript (4개 학습 자료 + 4개 실습)
• ✅ Session 2: React (4개 학습 자료 + 6개 실습 + 완전한 Todo 앱)

📄 01-variables-and-types.md

• 변수 선언 (const, let, var, 호이스팅)
• 데이터 타입 (원시 타입 vs 참조 타입)
• 연산자 (산술, 비교, 논리, 삼항)
• 템플릿 리터럴
• Truthy/Falsy와 단축 평가
• Optional Chaining (?.), Nullish Coalescing (??)
• 객체 단축 표기법
• 구조 분해 할당 (Destructuring)
• Spread/Rest 연산자
• 제어문 (if-else, switch, for, while)

📄 02-functions-and-arrays.md

• 함수 선언 방식 (함수 선언식, 표현식, 화살표 함수)
• 일반 함수 vs 화살표 함수 (this 바인딩)
• 기본 매개변수, 나머지 매개변수
• 배열 메서드 (forEach, map, filter, reduce, find, some, every)
• 메서드 체이닝 (실전 패턴)
• 배열 정렬 (sort)
• 실전 데이터 처리 예제

📄 03-async-programming.md

• 동기 vs 비동기
• 콜백 함수와 콜백 지옥
• Promise (then-catch, 체이닝, 정적 메서드)
• async/await (가장 중요!)
• Fetch API (GET, POST, PUT, PATCH, DELETE)
• JSON 다루기 (stringify, parse)
• 실전 CRUD 구현
• 에러 처리, 재시도 로직, 타임아웃

📄 04-typescript-basics.md

• 기본 타입 (원시 타입, 배열, 튜플, 객체)
• Interface (핵심!)
• Type Alias (Interface vs Type)
• Union과 Intersection 타입
• Literal 타입
• 함수 타입
• Generic (재사용 가능한 타입)
• Type Guard
• React와 TypeScript
• Utility Types (Partial, Pick, Omit, Record, Readonly)

📁 exercises/

1. 01-variables-practice.js

   • 객체 생성, 구조 분해 할당
   • 템플릿 리터럴, 삼항 연산자
   • Optional chaining, Spread 연산자
   • 배열 평균 계산

2. 02-functions-practice.js

   • 화살표 함수 작성
   • map, filter, reduce, some, every
   • 메서드 체이닝 (평균 가격, 카테고리별 개수)
   • 배열 정렬, 그룹화

3. 03-async-practice.js

   • Promise (then-catch)
   • async/await
   • Fetch API (GET, POST, DELETE)
   • 병렬 요청 (Promise.all)
   • CRUD 구현
   • 타임아웃, 재시도 로직

4. 04-typescript-practice.ts

   • Interface 정의 (Product, User, Author, Post)
   • Generic 함수
   • API 응답 타입 (ApiResponse)
   • Type Guard
   • Utility Types
   • Mapped Types

📄 01-react-fundamentals.md

• React 소개 및 개발 환경 설정 (Vite)
• 컴포넌트와 JSX
• Props를 통한 데이터 전달
• children Props
• 컴포넌트 분리와 재사용
• 조건부 렌더링 (삼항 연산자, &&)
• 리스트 렌더링 (map, key)
• 이벤트 처리

📄 02-hooks-and-state.md

• State 개념
• useState Hook (가장 중요!)
• State 업데이트 패턴
• 입력 폼과 State
• 배열 State 조작 (추가, 삭제, 수정)
• 객체 State 조작
• useEffect Hook (Side Effects)
• localStorage와 State 동기화
• State 끌어올리기 (Lifting State Up)
• 실전 쇼핑 카트 예제

📄 03-api-integration.md

• React에서의 API 호출
• fetch API 사용하기
• 로딩/에러/데이터 상태 관리 (핵심 패턴!)
• POST, PUT/PATCH, DELETE 요청
• axios 라이브러리
• 커스텀 Hook (useFetch, useAsync)
• 실전 검색, 페이지네이션
• 에러 처리 Best Practices

📄 04-todo-app-tutorial.md

• 완전한 Todo 앱 구현 가이드
• 컴포넌트 설계
• TypeScript 타입 정의
• LocalStorage 연동
• 완전한 CSS 스타일링
• 추가 기능 구현 방법
• 성능 최적화 (useMemo, useCallback)

📁 todo-app/ - 완성된 Todo 앱 코드

• ✅ Todo 추가/완료/삭제
• ✅ 필터링 (전체/완료/미완료)
• ✅ LocalStorage 자동 저장
• ✅ TypeScript 완벽 적용
• ✅ 반응형 디자인

📁 exercises/ - 사용 가이드

📁 01-react-basics-practice/

1. ProfileCard.tsx - 사용자 프로필 카드

   • Props 사용
   • 선택적 Props
   • 조건부 렌더링

2. ProductList.tsx - 상품 목록

   • 배열 렌더링
   • 리스트와 key
   • 카테고리별 배지

📁 02-hooks-practice/

1. CounterWithHistory.tsx - 히스토리 카운터

   • useState
   • 배열 State 조작
   • 이벤트 핸들링

2. TodoListWithFilter.tsx - 필터링 Todo 목록

   • 여러 State 관리
   • 배열 CRUD
   • 필터링 로직

📁 03-api-practice/

1. UserList.tsx - 사용자 목록

   • fetch API
   • useEffect
   • 로딩/에러/데이터 상태

2. PostManager.tsx - 게시글 관리

   • CRUD 구현
   • POST, DELETE 요청
   • 폼 처리

web-study/
├── README.md # 📘 이 파일
├── CLAUDE.md # Claude Code 작업 가이드
├── references/ # 참고 자료
│ └── 프론트엔드_2차시_JS.pdf
│
├── session1-js-ts/ # 📚 JavaScript & TypeScript
│ ├── 01-variables-and-types.md
│ ├── 02-functions-and-arrays.md
│ ├── 03-async-programming.md
│ ├── 04-typescript-basics.md
│ └── exercises/ # 실습 문제
│ ├── 01-variables-practice.js
│ ├── 02-functions-practice.js
│ ├── 03-async-practice.js
│ └── 04-typescript-practice.ts
│
└── session2-react/ # ⚛️ React
 ├── 01-react-fundamentals.md
 ├── 02-hooks-and-state.md
 ├── 03-api-integration.md
 ├── 04-todo-app-tutorial.md
 ├── exercises/ # 실습 문제
 │ ├── README.md # 실습 가이드
 │ ├── 01-react-basics-practice/
 │ │ ├── ProfileCard.tsx
 │ │ ├── ProfileCard.css
 │ │ ├── ProductList.tsx
 │ │ └── ProductList.css
 │ ├── 02-hooks-practice/
 │ │ ├── CounterWithHistory.tsx
 │ │ ├── CounterWithHistory.css
 │ │ ├── TodoListWithFilter.tsx
 │ │ └── TodoListWithFilter.css
 │ └── 03-api-practice/
 │ ├── UserList.tsx
 │ ├── UserList.css
 │ ├── PostManager.tsx
 │ └── PostManager.css
 └── todo-app/ # 🎯 완성된 Todo 앱
 ├── package.json
 ├── tsconfig.json
 ├── vite.config.ts
 ├── index.html
 └── src/
 ├── main.tsx
 ├── App.tsx
 ├── App.css
 ├── index.css
 ├── types/
 │ └── todo.ts
 └── components/
 ├── TodoInput.tsx
 ├── TodoInput.css
 ├── TodoList.tsx
 ├── TodoList.css
 ├── TodoItem.tsx
 ├── TodoItem.css
 ├── TodoFilter.tsx
 └── TodoFilter.css

# Session 1 - JavaScript & TypeScript
session1-js-ts/01-variables-and-types.md
session1-js-ts/02-functions-and-arrays.md
session1-js-ts/03-async-programming.md
session1-js-ts/04-typescript-basics.md
# Session 2 - React
session2-react/01-react-fundamentals.md
session2-react/02-hooks-and-state.md
session2-react/03-api-integration.md
session2-react/04-todo-app-tutorial.md

# JavaScript 파일 실행
node session1-js-ts/exercises/01-variables-practice.js
node session1-js-ts/exercises/02-functions-practice.js
node session1-js-ts/exercises/03-async-practice.js
# TypeScript 파일은 ts-node로 실행
npx ts-node session1-js-ts/exercises/04-typescript-practice.ts

# Vite 프로젝트 생성
npm create vite@latest react-practice -- --template react-ts
cd react-practice
npm install
# 실습 파일 복사
mkdir src/components
cp session2-react/exercises/01-react-basics-practice/*.tsx src/components/
cp session2-react/exercises/01-react-basics-practice/*.css src/components/
# 개발 서버 실행
npm run dev

상세한 실습 방법은 exercises/README.md 참고

cd session2-react/todo-app
npm install
npm run dev

브라우저에서 http://localhost:5173 열기

이 스터디를 마치면 다음을 할 수 있습니다:

1. 모던 JavaScript(ES6+) 문법 활용
   • const/let, 화살표 함수, 구조 분해, 스프레드
2. 배열 메서드를 활용한 데이터 처리
   • map, filter, reduce, find, some, every
3. 비동기 프로그래밍
   • Promise, async/await, try-catch
4. API 통신
   • fetch API, JSON 처리

5. 기본 타입 시스템 이해
   • Interface, Type, Union, Generic
6. 타입 안정성을 갖춘 코드 작성
   • 컴파일 타임 에러 방지

7. React 컴포넌트 기반 UI 구현
   • 함수형 컴포넌트, JSX, Props
8. React Hooks를 사용한 상태 관리
   • useState, useEffect
9. 컴포넌트 간 데이터 전달
   • Props, State 끌어올리기
10. 완전한 CRUD 애플리케이션 개발
    • Todo 앱 (추가/수정/삭제/필터링)

# Node.js 확인 (v18 이상 권장)
node --version
npm --version
# Vite로 React + TypeScript 프로젝트 생성
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
# 개발 서버 실행
npm run dev

• 코드 에디터: VS Code
• VS Code 확장 프로그램:
  • ES7+ React/Redux/React-Native snippets
  • Prettier - Code formatter
  • ESLint

• HTML 기본 구조 이해
• CSS 기본 스타일링
• 터미널 기본 명령어 (cd, ls, npm)

• JavaScript MDN
• TypeScript 공식 문서
• React 공식 문서
• Vite 공식 문서

• JavaScript.info - 모던 JavaScript 튜토리얼
• React 베타 문서 (한글)
• TypeScript Handbook (한글)

• JSONPlaceholder - 무료 테스트 API

1. 학습 자료 읽기 - 개념 이해
2. 예제 코드 따라하기 - 직접 타이핑
3. 실습 문제 풀기 - 스스로 구현
4. 솔루션 비교 - 더 나은 방법 찾기
5. 커스터마이징 - 추가 기능 구현

• 브라우저 개발자 도구 (F12) 적극 활용
• console.log()로 데이터 확인
• React DevTools 확장 프로그램 설치
• TypeScript 에러 메시지 꼼꼼히 읽기

• GitHub에 코드 업로드
• 포트폴리오 프로젝트 만들기
• 다른 사람의 코드 리뷰
• 오픈소스 프로젝트 기여

이 스터디를 완료했다면:

• React Router (페이지 라우팅)
• Context API (전역 상태 관리)
• React Query (서버 상태 관리)
• 커스텀 Hooks
• 성능 최적화 (memo, useMemo, useCallback)

• Redux Toolkit
• Zustand
• Recoil

• Styled Components
• Tailwind CSS
• CSS Modules

• Jest
• React Testing Library
• E2E 테스트 (Playwright, Cypress)

• Vercel
• Netlify
• GitHub Pages