Skip to content

KERT-core/web-study

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
session1-js-ts
session1-js-ts
 
 
session2-react
session2-react
 
 
CLAUDE.md
CLAUDE.md
 
 
README.md
README.md
 
 

Repository files navigation

web-study

2025-2 KERT 웹 스터디

📖 프로젝트 개요

스터디 정보

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

완성 현황

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

📚 Session 1: JavaScript & TypeScript 기초 (45분)

학습 자료

1.1 JavaScript 핵심 개념 (20분: 이론 8분, 실습 12분)

📄 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 구현
  • 에러 처리, 재시도 로직, 타임아웃

1.2 TypeScript 기초 (15분: 이론 6분, 실습 9분)

📄 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/)

📁 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

⚛️ Session 2: React 기초 (45분)

학습 자료

2.1 React 핵심 개념 (18분: 이론 8분, 실습 10분)

📄 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

2.2 실전 프로젝트: Todo 앱 (27분: 이론 6분, 실습 21분)

📄 04-todo-app-tutorial.md

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

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

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

실습 자료 (exercises/)

📁 exercises/ - 사용 가이드

01. React 기초 실습

📁 01-react-basics-practice/

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

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

  2. ProductList.tsx - 상품 목록

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

02. Hooks와 State 실습

📁 02-hooks-practice/

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

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

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

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

03. API 통신 실습

📁 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

🚀 빠른 시작

1. 학습 자료 읽기

# 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

2. 실습 문제 풀기

Session 1 실습

# 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

Session 2 실습

# 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 참고

3. Todo 앱 실행

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

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

🎯 학습 목표

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

JavaScript 기초 ✅

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

TypeScript ✅

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

React ✅

  1. React 컴포넌트 기반 UI 구현
    • 함수형 컴포넌트, JSX, Props
  2. React Hooks를 사용한 상태 관리
    • useState, useEffect
  3. 컴포넌트 간 데이터 전달
    • Props, State 끌어올리기
  4. 완전한 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)

📖 추가 학습 자료

공식 문서

온라인 튜토리얼

API 실습용 서비스

💡 학습 팁

효과적인 학습 순서

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

디버깅 방법

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

실전 연습

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

📝 다음 학습 주제

이 스터디를 완료했다면:

심화 React

  • 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

About

2025-2 KERT 웹 스터디

Resources

Readme
Activity
Custom properties

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages