📖 React Study  

☕ 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) 안수진 - 3) 엄세원 - 몽고DB로 작업하기 ~ 모듈 리소스
24..	17	섹션 :	1) 안수진 - 2) 엄세원 - 3) 조용운 -
24..	18	섹션 :	1) 엄세원 - 2) 조용운 - 3) 안수진 -
24..	19	섹션 :	1) 조용운 - 2) 안수진 - 3) 엄세원 -
24..	20	섹션 :	1) 안수진 - 2) 엄세원 - 3) 조용운 -
24..	21	섹션 :	1) 엄세원 - 2) 조용운 - 3) 안수진 -
24..	22	섹션 :	1) 조용운 - 2) 안수진 - 3) 엄세원 -
24..	23	섹션 :	1) 안수진 - 2) 엄세원 - 3) 조용운 -
24..	24	섹션 :	1) 엄세원 - 2) 조용운 - 3) 안수진 -

🙆‍♂️🙆 Contributors

조용운	엄세원	안수진