🖊️ React Study

🗓️ 진행 기간

• 2024년 12월 3일 ~ 2024년 12월 31일

🛠️ 진행 방식

1. 학습 내용 정리 및 공유
   • 각자 학습한 내용을 정리해 GitHub에 PR 제출.
   • src/React/학습한 목차/ 에서 README_이름.md 로 배운 것을 정리합니다.
2. 주간 토론
   • Discord 등의 툴을 활용하여 학습 중 생긴 질문을 GitHub Issue에 작성하고, 주 1~2회 토론 및 답변.
3. 면접 질문 연습
   • 학습한 내용을 바탕으로 면접 질문 자료를 활용해 질문과 답변 연습.

✅ 스터디 개요

1차: React 강의 완강

• 기간: 12월 1주차(3일) ~ 12월 3주차
• 강의
  • [2024 리뉴얼] 실전 프로젝트 감정일기를 만들며 배우는 리액트(React)
  • 【한글자막】 React 완벽 가이드 2024 with React Router & Redux

2차: 자기소개 페이지 제작

• 기간: 1차 종료 후 ~ 12/30(월)
• 내용:
  • 자기소개 페이지 제작 (React, Vue, HTML+CSS+JS, Django+HTML, PPT 등 자유 선택).
  • GitHub Pages를 이용한 배포.
  • EC2 + Docker를 활용한 배포 실습 가능(희망자에 한해 스터디장이 지원).

3차: TypeScript 강의 완강

• 기간: 12/31(화) ~ ing
• 내용:
  1. 리액트 공식문서 읽기
  2. 타입스크립트 강의 듣기
     • 인프런 제로초 강의
  3. 프로젝트를 진행하면서 구현한 로직 공유
  4. 프로젝트를 진행하면서 문제를 해결한 방법 공유

📚 진행 과정

01주차 : ✅ 24/12/03 ~ 24/12/11 => JS, React 앱 구조, JSX 구문, Props, State, Hooks, LifeCycle, Context API

학습 내용

• 00_Vanilla_JS

  • (선택 사항)

• 01_React_structure

• 02_JSX

• 03_Props_State_Hooks

• 04_LifeCycle

• 05_Context_API

• 99_Styled_components

  • (선택 사항, 하지만 추천)

  📅 세부 일정

날짜	학습 내용
24/12/04(수)	00_Vanilla_JS (기본 문법 복습: 선택 사항)
24/12/05(목)	01_React_structure (React 앱 구조 이해 및 설정), 02_JSX (JSX 기본 구문 학습 및 코드 실습)
24/12/06(금)	03_Props_State_Hooks (Props 전달 및 컴포넌트 재사용성 학습), (State 관리와 React의 상태 변화 이해), (useState, useEffect 훅 학습 및 실습)
24/12/07(토)	03_Props_State_Hooks 복습 & 자율 학습
24/12/08(일)	03_Props_State_Hooks 복습 & 자율 학습
24/12/09(월)	04_LifeCycle (React 컴포넌트 생명주기 이해)
24/12/10(화)	05_Context_API (전역 상태 관리 학습)
24/12/11(수)	복습 & 온라인 스터디 모임

02주차 : ✅ 24/12/12 ~ 24/12/18 => LifeCycle, Context API, useReducer hook, Redux, TailwindCSS

학습 내용

• React 완벽 가이드 추천 목차

  • (15). "import" 및 "export"
  • (25). 스프레드 연산자
  • (64). 문제: 내부 요소에 Props(속성)이 전달되지 않을 경우
  • (65). 감싸진 요소에 Props(속성) 전달하기
  • (67). 컴포넌트 타입 동적으로 설정하기
  • (71). 세부 과정: 이미지 저장소 public/ VS assets/
  • (78). 사용자 입력 & 양방향 바인딩
  • (81). State(상태) 끌어올리기 [핵심 개념]

• PJT1_카운터 앱 실습

• 04_LifeCycle

• 05_Context_API

  • (162. ~ 172.) (완벽 가이드 목차)

• PJT2_투두리스트 실습

• 06_useReducer_hook

• PJT3_감성일기장 실습

• 07_Redux (선택)

• 10_Optimization (Vue의 computed 와 유사한 Hook, useMemo)

• 99_Styled_components

  • (선택 사항, 하지만 추천)
  • 완벽 가이드 목차 섹션 6.

• 99_TailwindCSS

  • 완벽 가이드 목차 섹션 6.

  📅 세부 일정

날짜	학습 내용
24/12/12(목)	완벽 가이드 추천 목차 학습
24/12/13(금)	PJT1_카운터 앱 실습, 04_LifeCycle (React 컴포넌트 생명주기 이해), 05_Context_API (전역 상태 관리 학습), Styled_components (선택), TailwindCSS (선택)
24/12/14(토)	PJT2_투두리스트 실습, 06_useReducer_hook, 07_Redux (선택)
24/12/15(일)	PJT3_감성일기장 실습
24/12/16(월)	PJT3_감성일기장 실습
24/12/17(화)	10_Optimization (Vue의 computed 와 유사한 Hook, useMemo)
24/12/18(수)	자율 학습 및 스터디 모임

03주차 : ✅ 24/12/19 ~ 24/12/30 => 자기소개 페이지 제작 및 배포

학습 내용

• 페이지 제작
• 각자 피드백
• github pages 혹은 EC2, docker를 이용한 간단 배포

04주차 : ✅ 24/12/31 ~ 25/01/02 => React 공식 문서, TypeScript 강의

학습 내용

1. 리액트 공식문서 읽기
   • https://ko.react.dev/learn 한글 ver
   • https://react.dev/learn 영어 ver
   • 어떤 걸로 볼 지는 각자 알아서 (Quick start)
   • src/React/77_Official_docs/{본인 이름}/ 에 정리
2. 타입스크립트 강의 듣기
   • 코딩앙마 https://www.youtube.com/playlist?list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0 다 보기
   • src/TypeScript/{본인 이름}/ 에 정리

05주차 : ✅ 25/01/08 ~ 25/01/15 => React + TypeScript

학습 내용

• 프로젝트 관련 내용 노션 공유
• 섹션 1. 구구단, 끝말잇기 (6개 ∙ 1시간 17분)
• 섹션 2. 숫자야구, 반응속도체크 (4개 ∙ 53분)

📅 세부 일정

날짜	학습 내용
25/01/08(수)	섹션 1. 강좌 소개 (13:22), 기본 타입스크립트 세팅하기 (12:14)
25/01/09(목)	섹션 1. 이벤트 핸들러, useRef 타이핑 (16:24), Class State 타이핑 (12:09)
25/01/10(금)	섹션 1. useCallback 타이핑 (11:31), 끝말잇기 Class 타이핑과 Q&A (11:42)
25/01/11(토)	섹션 2. 숫자야구 타이핑 (09:34), Props 타이핑 (12:06)
25/01/12(일)	섹션 2. setTimeout, useRef 타이핑 (14:52)
25/01/13(월)	섹션 2. Class State에서의 주의점 (17:22)

06주차 : ✅ 25/01/15 ~ 25/01/22 => React + TypeScript

학습 내용

• 프로젝트 관련 내용 노션 공유
• 섹션 3. 가위바위보, 로또추첨기 (4개 ∙ 46분)
• 섹션 4. 틱택토 (5개 ∙ 1시간 3분)

📅 세부 일정

날짜	학습 내용
25/01/15(화)	섹션 3. useCallback과 keyof, typeof (12:07)
25/01/16(수)	섹션 3. 가위바위보 타이핑하기 (12:08), 로또 추첨기와 FC, useMemo (13:20)
25/01/17(목)	섹션 3. Class 라이프사이클 타이핑 (08:27)
25/01/18(금)	섹션 4. useReducer 타이핑 (11:36), Dispatch, children (14:38)
25/01/19(토)	섹션 4. Reducer 타이핑 (07:24), React JSX 부분 타이핑 (18:14)
25/01/20(일)	섹션 4. Q&A (11:30)

07주차 : ✅ 25/01/22 ~ 25/01/29 => React + TypeScript

학습 내용

• 프로젝트 관련 내용 노션 공유
• 섹션 5. 지뢰찾기 (5개 ∙ 1시간 6분)
• 섹션 6. React Router (4개 ∙ 42분)

📅 세부 일정

날짜	학습 내용
25/01/22(월)	섹션 5. 지뢰찾기와 복습 (16:36)
25/01/23(화)	섹션 5. Context API 타이핑 (08:29), useContext 타이핑 (16:23)
25/01/24(수)	섹션 5. useContext 타이핑2 (13:22), 지뢰찾기 완성과 Q&A (11:34)
25/01/25(목)	섹션 6. 리액트 라우터 타이핑 준비하기 (10:34), match와 location, history (14:22)
25/01/26(금)	섹션 6. withRouter (05:44), react router hooks (12:14)

08주차 : ✅ 25/01/29 ~ 25/02/05 => React + TypeScript

학습 내용

• 프로젝트 관련 내용 노션 공유
• 섹션 7. Redux (6개 ∙ 1시간 9분)
• 섹션 8. MobX (2개 ∙ 38분)

📅 세부 일정

날짜	학습 내용
25/01/29(월)	섹션 7. 리덕스 구조 잡기 (17:11)
25/01/30(화)	섹션 7. action, reducer 타이핑 (12:02), 리덕스 컴포넌트 타이핑 (07:31)
25/01/31(수)	섹션 7. redux-thunk 타이핑 (18:14)
25/02/01(목)	섹션 7. ThunkDispatch와 immer (09:41), redux hooks 타이핑 (04:47)
25/02/02(금)	섹션 8. MobX 세팅하기 (17:39)
25/02/03(토)	섹션 8. MobX 타이핑하기 (21:18)

09주차 : ✅ 25/02/05 ~ 24/02/12 => 추후 추가

학습 내용

• 추후 추가

💡 페널티

• 중도 하차 시 잔여 스터디원들에게 랜덤으로 아이스 아메리카노 4잔 제공 ☕️.

🚀 참여 방법

Contributing Guide Link !

1. GitHub Repository를 포크 후 학습 내용을 정리하여 PR 제출.
2. Discord를 통해 공지 및 토론 스케줄 확인.
3. 지속적인 참여를 통해 React와 TypeScript를 깊이 이해하고 활용 능력을 높입니다.

👨‍👩‍👧‍👦 참여 인원

정도영	안주민	김민지	박희원	이아영	김정우	이다이	김희수	문상혁