☕ React 위주의 프론트 공부 모임
- 리액트 강의를 매주 합의된 분량 이상 학습한다.
- 분량을 3부분으로 다시 나눠 담당을 정하고 각자 맡은 부분 내용을 정리하여 발표를 준비한다.
- 매주 일요일 9시 디스코드에 접속하여 학습 공유 및 발표를 진행한다.
- 매주 발표 자료는 스터디 전까지 git에 올린다.
- 폴더/파일 이름은
섹션/순서_from part to part로 한다. - 특수 기호는 clone 오류에 대비해 모두 언더바(_)로 수정한다.
- (CS 및 알고리즘 스터디 시작으로 보류)
| 날짜 | 주차 | 섹션 | 각자 맡은 강의 |
|---|---|---|---|
| 24.01.07 | 1 | 섹션 2: 자바스크립트 새로고침 | 1) 엄세원 - 모듈 소개 ~ 연습: 함수 다루기 2) 안수진 - 화살표 함수 ~ 스프레드 연산자 3) 조용운 - 컨트롤 구조 다시 살펴보기 ~ 모듈 리소스 |
| 24.01.13 | 2 | 섹션 3: 리액트 핵심 - 컴포넌트, JSX, 속성, 상태 등 | 1) 안수진 - 모듈 소개 ~ 동적 HTML Attributes(속성) 설정 & 이미지 파일 로딩 2) 조용운 - Prop(속성)으로 컴포넌트 재사용 [핵심 개념] ~ 퀴즈 3: 추천 실습 및 이벤트 핸들링 3) 엄세원 - UI를 업데이트하지 않는 법 - 리액트의 뒷편 살펴보기 [핵심 개념] ~ 모듈 요약 |
| 24.02.04 | 3 | 섹션 4: 리액트 핵심 - 심화 단계 | 1) 조용운 - JSX ~ 내부 컴포넌트 2) 엄세원 - 여러 JSX 슬롯 활용법 ~ 세부 과정: 이미지 저장소는 public/ VS assets/ 3) 안수진 - 새 프로젝트: 틱택토 게임 ~ 옛 State 기반 상태 업데이트 |
| 24.02.12 | 4 | 섹션 4: 리액트 핵심 - 심화 단계 | 1) 엄세원 - 사용자 입력 & 양방향 바인딩 ~ 교차 State(상태) 방지하기 2) 안수진 - 불필요한 상태 관리 방지 ~ 계산된 값 끌어올리기 3) 조용운 - 계산된 값 처리 ~ 마무리 |
| 24.02.18 | 5 | 섹션 5: 리액트 핵심 - 연습 프로젝트 섹션 6: 리액트 컴포넌트 스타일링 |
1) 안수진 - 모듈 소개 ~ 이벤트 핸들링 & 양방향 바인딩 2) 조용운 - State 끌어올리기 ~ 조건적 컨텐츠 출력 3) 엄세원 - 모듈 소개 & 프로젝트 시작하기 ~ 동적 및 조건적 Inline(인라인) 스타일 |
| 24.02.25 | 6 | 섹션 6: 리액트 컴포넌트 스타일링 섹션 7: 리액트 앱 디버깅하기 |
1) 엄세원 - CSS 파일과 CSS 클래스를 사용한 동적 및 조건적 스타일링 ~ 재사용 가능 컴포넌트 생성 및 컴포넌트 조합 2) 조용운 - Tailwind CSS ~ Exercise4 3) 안수진 - 모듈 소개 ~ 리액트 DevTools 사용하기 |
| 24.03.03 | 7 | 섹션 8: Refs(참조) & Portals(포탈) 활용하기 | 1) 조용운 - state 복습하기 ~ 도전과제 추가하기 2) 안수진 - 타이머 설정 상태 관리 ~ 커스텀 컴포넌트로 참조 전달 3) 엄세원 - useImperativeHandle 훅으로 컴포넌트 API 노출시 ~ Portals(포탈) 소개 및 이해하기 |
| 24.03.10 | 8 | 섹션 9: 연습 프로젝트: 프로젝트 관리 앱 (컴포넌트, 상태, 참조 등 적용) | 1) 안수진 - 모듈 소개 ~ 컴포넌트간 교환을 위한 State 관리 2) 엄세원 - Refs(참조)와 전달된 Refs(참조)로 사용자 입력 받아오기 ~ 테일윈드 CSS로 모달 스타일링 3) 조용운 - 선택 가능한 프로젝트 구현 및 프로젝트 정보 보기 ~ Task 지우기 + 버그 고치기 |
| 24.03.17 | 9 | 섹션 10: 리액트의 컨테스트 API & useReducer - 상태 관리 심화 단계 | 1) 엄세원 - 모듈 소개 ~ 컨텍스트 소개 및 부여 2) 조용운 - 컨텍스트 소비하기 ~ 전체 데모 앱에 컨텍스트 API 적용하기 3) 안수진 - 컨텍스트 아웃소싱 ~ useReducer로 State 수정하기 |
| 24.03.24 | 10 | 섹션 11: Side Effects 다루기 & useEffect() 훅 활용 | 1) 조용운 - Side Effect 소개 ~ 모든 Side Effect가 useEffect를 사용하지 않는 이유 2) 안수진 - useEffect가 필요 없는 경우 ~ useEffect의 도움으로 고칠 수 있는 문제들 3) 엄세원 - useEffect의 Cleanup 함수 소개 ~ State(상태) 업데이트 최적화 |
| 24.04.07 | 11 | 섹션 12: 연습 프로젝트: 퀴즈 앱 만들기 | 1) 안수진 - 모듈 소개 ~ 질문 타이머 추가 2) 엄세원 - Effect 의존성 & useCallback 활용법 ~ 컴포넌트 분리를 통해 문제 해결하기 3) 조용운 - 컴포넌트에 필요한 로직 이동하기 ~ 퀴즈 결과 출력하기 |
| 24.04.14 | 12 | 섹션 13: 리액트와 최적화 테크닉 살펴보기(A Look Behind The Scenes Of React & Optimization Techniques) 섹션 14: 컴포넌트를 구축하는 다른 방법: 클래스 컴포넌트 |
1) 엄세원 - 모듈 소개 ~ 리액트의 가상 DOM 사용 - 직접 살펴보기 2) 조용운 - 상태를 관리할 때 key의 역할 ~ 퍼스트 클래스 기반 컴포넌트 추가 3) 안수진 - State 및 이벤트 작업하기 ~ 오류 경계 소개 |
| 24.04.21 | 13 | 섹션 15: HTTP 요청 보내기(예: 데이터베이스 연결) 섹션 16: 커스텀 리액트 Hook 빌드 |
1) 조용운 - 데이터베이스 연결/해지하는 법 ~ Http 에러 다루기 2) 안수진 - Fetch된 데이터 변환 ~ 데이터 가져오기 3) 엄세원 - 모듈 소개 & 초기 프로젝트 ~ 유동성 있는 커스텀 Hooks(훅) 생성하기 |
| 24.04.28 | 14 | 섹션 25: (Pretty deep dive) Next.js 소개 | 1) 안수진 - 모듈 소개 ~ 레이아웃 개념 다시 보기 2) 엄세원 - 레이아웃에 커스텀 컴포넌트 추가 ~ 클라이언트 컴포넌트의 효율적 사용 3) 조용운 - 규격이 불분명한 이미지 출력 ~ 동적 경로와 경로 매개변수를 활용한 Meals 세부내용 로딩 및 렌더링 |
| 24.05.06 | 15 | 섹션 25: (Pretty deep dive) Next.js 소개 | 1) 엄세원 - 개별 Meals에 대한 Not Found 오류 전송 ~ 업로드된 이미지 저장 및 데이터베이스에 데이터 저장 2) 조용운 - useFormStatus를 이용한 양식 제출 관리 ~ 업로드한 이미지를 클라우드에 업로드(AWS S3) 3) 안수진 - 정적 메타데이터 추가 ~ 페이지 간 연결하기 |
| 24.06.02 | 16 | 섹션 25: (Pretty deep dive) Next.js 소개 | 1) 조용운 - 프로젝트 페이지 준비하기 ~ 사용자 정의 컴포넌트 및 CSS 모듈 추가하기 2) 안수진 - 사전 렌더링 작동 방식의 문제 ~ API 경로 소개 3) 엄세원 - 몽고DB로 작업하기 ~ 모듈 리소스 |
 |
 |
 |
| 조용운 | 엄세원 | 안수진 |