1-3주: 프론트엔드의 기초 개념 이해 + TypeScript 기초 도입

1주차: 웹의 기본 구조 이해 + Git 꾸준히 활용해보기

•	Day 1: 웹의 동작 원리 (브라우저, 서버, 클라이언트의 역할)
    - Git과 버전 관리 기초 이해 (Commit, Branch의 개념)
      - GitHub를 통한 협업의 기본 개념 이해 (Pull Request, 코드 리뷰)
    - 개발자 도구 활용 https://www.youtube.com/watch?v=ZaOZFkHTloM
•	Day 2: HTML과 CSS의 기본 구조 (간단한 페이지 레이아웃 이해)
    - Normalize CSS, Reset CSS
•	Day 3: JavaScript의 역할과 중요성 (동적 페이지 구성 이해)
    - DOM API, 이벤트 캡처링 vs 이벤트 버블링, addEventListener https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
•	Day 4: 브라우저 렌더링 과정 이해 (DOM, CSSOM)
    - https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work
•	Day 5: 기본적인 웹 페이지 제작 이해 (아주 간단하게 HTML/CSS 실습)
    - ..

2주차: JavaScript와 TypeScript 기초 이해

•	Day 1: JavaScript의 기본 문법 및 데이터 타입 이해
      - 객체, 반복문, 조건문, 동등연산자, 일치연산자, 논리연산자
•	Day 2: Error 핸들링 및 JS 복사
      - try catch, 원시값과 참조값 (얕은 복사, 깊은 복사, 스프레드 신텍스)
•	Day 3: JavaScript 에서 말하는 함수 이해
      - 호이스팅, 함수 선언식, 함수 표현식, 화살표 함수의 차이점, 변수 컨벤션
•	Day 4: TypeScript 도입 - 기본 타입 시스템 이해 (Primitive Types, Interfaces) 및 함수와 이벤트 처리 (타입 정의와 인터페이스 사용)
      - 타입 정의, 제네릭 https://joshua1988.github.io/ts/guide/generics.html
•	Day 5: 비동기 처리의 개념 (API 통신의 기초 이해) 및 TypeScript의 유틸리티 타입 소개
      - 이벤트 루프, 싱글스레드, Web API, fetch API

3주차: 브라우저와 JavaScript 심화 이해 (TypeScript 활용)

•	Day 1: 브라우저 API의 기본 (LocalStorage, SessionStorage 등)
•	Day 2: 브라우저 렌더링 최적화 기법 이해 (퍼포먼스와 성능 최적화)
•	Day 3: 이벤트 루프와 비동기 처리 심화 이해 (TypeScript의 async/await)
•	Day 4: 웹 보안 기초 (CORS, CSRF, XSS 등 주요 개념) - 쉬어가는 날 (정리 철저히, 보안은 일단 적당히만 알고, 넘어가기)
•	Day 5: 간단한 실습: TypeScript로 작성된 웹 페이지에서의 데이터 저장 및 관리

4-6주: React와 컴포넌트 기반 개발 이해 + TypeScript 통합

4주차: React의 기본 개념 이해

•	Day 1: React의 기본 개념 (컴포넌트, 상태, Props)
•	Day 2: JSX와 Virtual DOM의 이해
•	Day 3: TypeScript로 React 컴포넌트 작성 및 이해
•	Day 4: 상태 관리의 기초 (useState 훅 설명과 TypeScript 사용)
•	Day 5: 간단한 React 앱 제작해보기 (기초 컴포넌트 구성)

5주차: React의 심화 개념 이해 (TypeScript 활용)

•	Day 1: React 컴포넌트 간 데이터 전달 (Props Drilling)과 타입 정의
•	Day 2: 생명주기와 useEffect 훅의 이해 (TypeScript로 안전한 효과 처리)
•	Day 3: React Router 기초 (싱글 페이지 애플리케이션 이해)
•	Day 4: Context API의 기초 (상태 관리를 위한 Context 사용 이해) 및 타입 정의
•	Day 5: 간단한 SPA 구현 및 기본 네비게이션 설정

6주차: 상태 관리 및 성능 최적화 이해 (TypeScript 통합)

•	Day 1: Redux의 기초 개념 이해 (Actions, Reducers, Store)와 TypeScript 통합
•	Day 2: Redux를 이용한 간단한 상태 관리 예시 (타입 정의 및 사용)
•	Day 3: 성능 최적화 기법 (Memoization, Lazy Loading)과 TypeScript의 역할
•	Day 4: TypeScript를 활용한 컴포넌트 디자인 패턴 이해 (Container-Presentational 패턴 등)
•	Day 5: 프로젝트 성능 분석 도구 이해 (Chrome DevTools)와 TypeScript 코드 최적화

7-9주: 프로젝트 협업 및 유지보수 이해 + TypeScript 실전 활용

7주차: 프로젝트 워크플로우와 협업 도구 이해

•	Day 1: Git과 버전 관리 기초 이해 (Commit, Branch의 개념)
•	Day 2: GitHub를 통한 협업의 기본 개념 이해 (Pull Request, 코드 리뷰)
•	Day 3: 프로젝트 관리 도구 이해 (JIRA, Trello 등)
•	Day 4: CI/CD의 기본 개념 이해 (지속적인 통합 및 배포)
•	Day 5: 간단한 실습: Git을 활용한 프로젝트 관리 체험

8주차: 유지보수 가능한 코드 작성 및 테스트

•	Day 1: 코드 일관성 유지 기법 이해 (Linting, Prettier 등)과 TypeScript 설정
•	Day 2: 단위 테스트의 중요성 및 기초 이해 (Jest, React Testing Library)
•	Day 3: E2E 테스트와 그 중요성 이해 (Cypress 기초)
•	Day 4: 코드 리팩토링 기법의 이해 (TypeScript로 중복 코드 제거, 가독성 향상)
•	Day 5: 유지보수 가능한 프로젝트 구조 설계 예시

9주차: 유지보수 및 성능 최적화 기법 이해

•	Day 1: 코드 스플리팅과 번들링 기법 이해 (Webpack 기초) 및 TypeScript 설정
•	Day 2: 프로젝트 배포 및 성능 최적화 (Netlify, Vercel 등)
•	Day 3: Lighthouse를 활용한 성능 분석
•	Day 4: 프로젝트 유지보수 방안 계획 (로그 관리, 버전 관리)
•	Day 5: 프로젝트 전체 리뷰 및 개선 방향 논의

10-12주: 실무 프로젝트 경험과 커뮤니케이션 개선 - 이 부분은 디자이너도 이미 기본 소양을 가지고 있다고 정의합니다.

10주차: 실무 프로젝트의 기획과 설계

•	Day 1: 프로젝트 요구 사항 분석 및 기획 (TypeScript 환경 설정)
•	Day 2: UI/UX 관점에서의 설계 (개발자와의 협업 포인트 논의)
•	Day 3: 프론트엔드 개발을 위한 명세서 작성 (TypeScript의 인터페이스와 타입 정의)
•	Day 4: 초기 개발 환경 세팅 논의 (프로젝트 구조, 개발 환경)
•	Day 5: 개발자와의 효과적인 커뮤니케이션 방법론 정리

11주차: 프로젝트 진행 및 피드백

•	Day 1: 프로젝트 초기 개발 진행 상황 리뷰 및 피드백
•	Day 2: 중간 점검 및 성과 분석 (UI/UX와의 연계 논의)
•	Day 3: 협업 중 발생할 수 있는 이슈와 해결 방안 논의
•	Day 4: 사용자 피드백 반영 및 개선 방향 협의
•	Day 5: 프로젝트 최종 리뷰 및 발표 준비

12주차: 프로젝트 마무리 및 발표

•	Day 1: 최종 발표 준비 및 문서화
•	Day 2: 프로젝트 최종 검토 및 발표
•	Day 3: 성과 분석 및 후속 작업 논의
•	Day 4: 학습 및 프로젝트 경험 회고
•	Day 5: 개발자와의 협업에 대한 전반적인 피드백 및 향후 계획 수립