코드스쿼드 2024 웹 프론트엔드 스터디

스터디 진행방식

• 각자 매주 수요일까지 스터디 범위에 해당하는 책의 내용을 읽어옵니다.
• 스터디 범위 안에서 4~5개의 퀴즈를 만들고, 그에 대한 퀴즈의 답변을 준비합니다.
• 준비한 문제와 답변을 각자의 원격 저장소에 저장 후 스터디 시간 한시간 전까지 Pull Request 요청을 합니다.
• 2명씩 짝지어 각자 준비해온 퀴즈를 풀어본 뒤, 다 같이 이야기해 볼만한 퀴즈를 모아서 스터디 참여인원 전원이 해당 퀴즈에 대해 토론하고 이야기합니다.

Pull Request 진행방식

1. 해당 프로젝트를 fork 합니다.
2. fork한 원격 저장소에 새로운 브랜치를 생성합니다.
3. 생성한 브랜치에 아래 폴더구조를 참고하여 문제와 답변을 저장합니다.
4. 매주 문제와 답변을 저장하고 Pull Request를 요청합니다.
5. 요청한 Pull Request를 모두 merge 한 후, 스터디를 진행합니다.

• Pull Request 를 요청하는 방법은 링크를 참고합니다.

폴더구조

${topic}/${nickname}/${week_name}/

• 문제 저장 예시) javascript/schnee/week1/questions.md
• 답변 저장 예시) javascript/schnee/week1/solutions.md

Git Commit 컨벤션

태그	설명
docs	문서 내용 변경

각자의 원격 저장소에 저장을 할 때, 위 Git Commit 컨벤션을 참고하여 커밋을 작성합니다.

주제

JavaScript	React	TypeScript	Next.js

주차 별 주제

Week	주제 (JavaScript)	주제 (React)	주제 (TypeScript)	주제(Next.js)
Week 1 (2024/03/06)	▣ 4장: 변수와 상수 ▣ 6장: 데이터 타입 Week 1 - Question
Week 2 (2024/03/13)	▣ 23장: 실행 컨텍스트 Week 2 - Question
Week 3 (2024/03/19)	▣ 24장: 클로저 Week 3 - Question
Week 4 (2024/03/26)	▣ 12장: 함수 Week 4 - Question
Week 5 (2024/04/02)	▣ 22장: this Week 5 - Question
Week 6 (2024/04/09)	▣ 40장: event Week 6 - Question
Week 7 (2024/04/16)	▣ 45장: 프로미스 Week 7 - Question
Week 8 (2024/04/23)	▣ 38장: 브라우저의 렌더링 과정 ▣ 42장: 비동기 프로그래밍 ▣ 46장: 제너레이터와 async/await Week 8 - Question
Week 9 (2024/04/30)	▣ 41장: 타이머 ▣ 43장: Ajax ▣ 44장: REST API Week 9 - Question
Week 10 (2024/05/08)		▣ 2.3장: 클래스 컴포넌트와 함수 컴포넌트 ▣ 2.4장: 렌더링은 어떻게 일어나는가? Week 10 - Question
Week 11 (2024/05/16)		▣ 2.2장: 가상 DOM과 리액트 파이버 Week 11 - Question
Week 12 (2024/05/22)		▣ 3.1장: 리액트의 모든 훅 파헤치기 - 1 Week 12 - Question
Week 13 (2024/06/05)		▣ 3.1장: 리액트의 모든 훅 파헤치기 - 2 Week 13 - Question
Week 14 (2024/06/12)		▣ 3.2장: 사용자 정의 훅과 고차 컴포넌트 Week 14 - Question
Week 15 (2024/06/19)		▣ 5.1장: 상태 관리는 왜 필요한가? Week 15 - Question
Week 16 (2024/06/26)		▣ 5.2장: 리액트 훅으로 시작하는 상태 관리 ▣ 5.2.1장: 가장 기본적인 방법: useState와 useReducer ▣ 5.2.2장: 지역 상태의 한계를 벗어나보자: useState 의 상태를 바깥으로 분리하기 Week 16 - Question
Week 17 (2024/07/03)	▣ 19.8장: 오버라이딩과 프로퍼티 섀도잉 ▣ 19.9장: 프로토타입의 교체 Week 17 - Question
Week 18 (2024/07/10)		▣ 5.2.3장: useState와 Context동시에 사용해 보기 ▣ 5.2.4장: 상태 관리 라이브러리 Recoil, Jotai, Zustand 살펴보기 Week 18 - Question
Week 19 (2024/07/17)		▣ State: 컴포넌트의 기억 저장소 ▣ 렌더링 그리고 커밋 ▣ 스냅샷으로서의 State Week 19 - Question
Week 20 (2024/07/26)		▣ state 업데이트 큐 ▣ 객체 State 업데이트하기 ▣ 배열 State 업데이트하기 Week 20 - Question
Week 21 (2024/07/31)		▣ State를 사용해 Input 다루기 ▣ State 구조 선택하기 ▣ 컴포넌트 간 State 공유하기 Week 21 - Question
Week 22 (2024/08/05)		▣ State를 보존하고 초기화하기 ▣ state 로직을 reducer로 작성하기 ▣ Context를 사용해 데이터를 깊게 전달하기 Week 22 - Question
Week 23 (2024/08/15)		▣ Reducer와 Context로 앱 확장하기 ▣ Ref로 값 참조하기 ▣ Ref로 DOM 조작하기 Week 23 - Question
Week 24 (2024/08/23)		▣ Effect로 동기화하기 ▣ Effect가 필요하지 않을 수도 있습니다 ▣ 반응형 effects의 생명주기 Week 24 - Question
Week 25 (2024/08/29)		▣ Effect에서 이벤트 분리하기 Week 25 - Question
Week 26 (2024/09/06)			▣ 1장: 타입스크립트 알아보기 Week 26 - Question
Week 27 (2024/09/13)			▣ 2장: 타입스크립트의 타입 시스템 ▣ 아이템6: 편집기를 사용하여 타입 시스템 탐색하기 ▣ 아이템7: 타입이 값들의 집합이라고 생각하기 ▣ 아이템8: 타입 공간과 값 공간의 심벌 구분하기 Week 27 - Question
Week 28 (2024/09/19)			▣ 2장: 타입스크립트의 타입 시스템 ▣ 아이템9 : 타입 단언보다는 타입 선언을 사용하기 ▣ 아이템10 : 객체 래퍼 타입 피하기 ▣ 아이템11 : 잉여 속성 체크의 한계 인지하기 ▣ 아이템12 : 함수 표현식에 타입 적용하기 ▣ 아이템13 : 타입과 인터페이스 차이점 알기 ▣ 아이템14 : 타입 연산과 제너릭 사용으로 반복줄이기 Week 28 - Question
Week 29 (2024/09/27)			▣ 2장: 타입스크립트의 타입 시스템 ▣ 아이템15 : 동적 데이터에 인덱스 시그니처 사용하기 ▣ 아이템16 : number 인덱스 시그니처보다는 Array, 튜플, ArrayLike를 사용하기 ▣ 아이템17 : 변경 관련된 오류 방지를 위해 readonly 사용하기 ▣ 아이템18 : 매핑된 타입을 사용하여 값을 동기화하기 Week 29 - Question
Week 30 (2024/10/02)			▣ 3장 : 타입 추론 ▣ 아이템19 : 추론 가능한 타입을 사용해 장황한 코드 방지하기 ▣ 아이템20 : 다른 타입에는 다른 변수 사용하기 ▣ 아이템21 : 타입 넓히기 ▣ 아이템22 : 타입 좁히기 Week 30 - Question
Week 31 (2024/10/08)			▣ 3장 : 타입 추론 ▣ 아이템23 : 한꺼번에 객체 생성하기 ▣ 아이템24 : 일관성 있는 별칭 사용하기 ▣ 아이템25 : 비동기 코드에는 콜백 대신 async 함수 사용하기 ▣ 아이템26 : 타입 추론에 문맥이 어떻게 사용되는지 이해하기 ▣ 아이템27 : 함수형 기법과 라이브러리로 타입 흐름 유지하기 Week 31 - Question
Week 32 (2024/10/16)			▣ 4장 : 타입 설계 ▣ 아이템28 : 유효한 상태만 표현하는 타입을 지향하기 ▣ 아이템29 : 사용할 때는 너그럽게, 생성할 때는 엄격하게 ▣ 아이템30 : 문서에 타입 정보를 쓰지 않기 ▣ 아이템31 : 타입 주변에 null 값 배치하기 ▣ 아이템32 : 유니온 인터페이스보다는 인터페이스의 유니온을 사용하기 Week 32 - Question
Week 33 (2024/10/23)			▣ 4장 : 타입 설계 ▣ 아이템33 : string타입보다 더 구체적인 타입 사용하기 ▣ 아이템34 : 부정확한 타입보다는 미완성 타입을 사용하기 ▣ 아이템35 : 데이터가 아닌, API와 명세를 보고 타입 만들기 ▣ 아이템36 : 해당 분야의 용어로 타입 이름 짓기 ▣ 아이템37 : 공식 명칭에는 상표를 붙이기 Week 33 - Question
Week 34 (2024/10/29)			▣ 5장 : any 다루기 ▣ ㄴ 아이템 38: any 타입은 가능한 한 좁은 범위에서만 사용하기 ▣ ㄴ 아이템 39: any를 구체적으로 변형해서 사용하기 ▣ ㄴ 아이템 40: 함수 안으로 타입 단언문 감추기 ▣ ㄴ 아이템 41: any의 진화를 이해하기 ▣ ㄴ 아이템 42: 모르는 타입의 값에는 any 대신 unknown을 사용하기 ▣ ㄴ 아이템 43: 몽키 패치보다는 안전한 타입을 사용하기 ▣ ㄴ 아이템 44: 타입 커버리지를 추적하여 타입 안전성 유지하기 Week 34 - Question
Week 35 (2024/11/10)			▣ 6장 : 타입 선언과 @types ▣ 아이템 45: devDependencies에 typescript와 @types 추가하기 ▣ 아이템 49: 콜백에서 this에 대한 타입 제공하기 ▣ 아이템 50: 오버로딩 타입보다는 조건부 타입을 사용하기 ▣ 아이템 51: 의존성 분리를 위해 미러 타입을 사용하기 ▣ 아이템 52: 테스팅 타입의 함정에 주의하기 Week 35 - Question
Week 36 (2024/11/17)			▣ 7장: 코드를 작성하고 실행하기 ▣ 아이템 53: 타입스크립트 기능보다는 ECMAScript 기능을 사용하기 ▣ 아이템 54: 객체를 순회하는 노하우 ▣ 아이템 55: DOM 계층 구조 이해하기 ▣ 아이템 56: 정보를 감추는 목적으로 private 사용하지 않기 ▣ 아이템 57: 소스맵을 사용하여 타입스크립트 디버깅하기 Week 36 - Question
Week 37 (2024/12/01)				▣ dashboard ▣ 챕터1 Getting Started ▣ 챕터2 CSS Styling ▣ 챕터3 Font/Image 최적화 ▣ 챕터4 레이아웃과 페이지 Week 37 - Question
Week 38 (2024/12/08)				▣ dashboard ▣ 챕터5 페이지 탐색 ▣ 챕터6 데이터베이스 설정 ▣ 챕터7 데이터 가져오기 ▣ 챕터8 정적 및 동적 렌더링 Week 38 - Question
Week 39 (2024/12/15)				▣ dashboard ▣ 챕터9 스트리밍 ▣ 챕터10 부분 사전 렌더링 ▣ 챕터11 검색, 페이징 ▣ 챕터12 데이터 변형 Week 39 - Question
Week 40 (2024/12/22)				▣ dashboard ▣ 챕터13 에러 처리 ▣ 챕터14 접근성 향상 ▣ 챕터15 인증 추가하기 ▣ 챕터16 메타데이터 추가하기 Week 40 - Question