D-Cording - React 심화 스터디

본 페이지는 이 노션페이지의 내용을 기반으로 구성되었습니다.

1. 학습 방향

1) 야생학습

• 야생 학습은 대부분 협력적이다 (학교 학습은 대부분 개별적이다)
• 야생 학습은 대부분 비순차적이다 (학교 학습은 대부분 공부 순서가 정해져 있다)
• 야생 학습은 대부분 자료에 한정이 없다 (학교 학습은 대부분 교과서, 교재, 시험 범위 등이 정해져 있다)
• 야생 학습은 대부분 명확한 평가가 없다 (학교 학습은 대부분 시험이라는 명확한 평가 기준이 있다)
• 야생 학습은 대부분 정답이 없다 (학교 학습은 무엇이 정답이라고 하는 것이 명확하다)
• 야생 학습은 대부분 목표가 불분명하고 바뀌기도 한다 (학교 학습은 대부분 합격, 자격증 같은 목표가 분명하다)

2) 지속 성장

• 학습 자체에 대해 고민하기
• 기술을 학습하기 이전에 기술이 왜 필요한지 고민하기
• 학습할 필요가 있는지 고민하기
• 깊게 학습하기

3) 함께 성장 + 페어프로그래밍

• 지식은 어떻게든 슥듭할 수 있다 → 혼자서도 가능하다
• 사회에 나가면 같이 성장해야한다 → 혼자서는 불가능하다
  • 같이 고민하고
  • 같이 공부하고
  • 같이 성장하자
• 같이 성장하기 위한 도구 → 페어프로그래밍, 페어잡

4) 스터디가 끝났을 때

• 스터디 후에 나의 모습을 그려보자
• 즉, 스터디에서 얻어가고 싶은 것을 명확하게 그려보자
  • 같이 공부할 수 있는 동료
  • 공부하는 습관 혹은 환경

2. 미션 진행 방법

미션에 대한 이야기 나누기

• 매주 모일 수 있는 날을 정해서 미션에 대한 이야기를 나눕니다.
• 미션 학습에 필요한 최소 지식 등을 공유합니다.
• 필요하다면, 코드에 대해서도 다룹니다.

이론 학습

• 각 단계별로 이론학습을 하도록 가이드하고 있습니다.
• 각자 학습한 내용을 정리해서 issue에 올려주세요.

실습

• style(css)는 고려하지 않아도 무방합니다.
• 각 단계를 진행할 때, 최소 2회 이상 페어프로그래밍으로 진행합니다.
  • 오프라인으로 해도 좋고, 온라인으로 해도 좋습니다.
  • 페어를 진행할 때, 간단하게 같이 있는 사진을 찍어주세요!
    • 얼굴이 나오는게 부담스럽다면 손만 나오게라도?
  • 돌아가면서 30분씩 코딩합니다.
• 미션을 진행 후에 PR을 올려주세요.
  • PR에는 어떤 미션을 진행했는지, 어떤 고민을 했는지, 어떤 결과가 나왔는지, 어떤 느낀점이 있는지 적어주세요.

코드리뷰

• 미션을 완료 후에, 서로의 PR에 대해 코드리뷰를 진행합니다.
  • 기본적으로 모든 사람들의 PR에 대해 리뷰를 남겨야합니다.
• 코드리뷰 그라운드룰
  • 변경이 필요한 근거를 제시하기
    • 명령 X, 제안 O
  • “정답”이 아닌 “의견”을 이야기 한다는 느낌으로!

3. Git 기본 학습

Git에 대한 학습은 git에 대해 아는 사람이 git에 대해 모르는 사람에게 알려줍니다.

• git이란 무엇인가?
• 명령어
  • add
  • commit
  • push
  • pull
  • origin
• github란 무엇인가?

4. 미션

1주일에 1개의 미션을 수행합니다.

Step	학습태그
Step 1. 프레임워크에 대한 이해	react vue framework web
Step 2. Vanilla Javascript로 무작정 TodoList 만들기	array api ECMAScript prototype clousre this event
Step 3. Component 구성하기	state class OOP component
Step 4. 옵저버 패턴 학습	proxy object api observer
Step 5. Store 직접 만들기	observer pattern
Step 6. Router 직접 만들기	router history api hash bang
Step 7. 패키지로 구성하기	bundler monorepo
Step 8. 나만의 코드로 SPA 만들기	single page application

스스로 난이도 조절하기

• 타입스크립트 사용
• 단위테스트 작성
• e2e테스트 작성
  • cypress 등의 도구 이용
• 선택 요구사항에 대한 고민

5. 멘토의 역할

• 올라온 PR에 대해 코드리뷰를 남긴다.
• 정답을 제공하는게 아닌, 정답을 스스로 찾아볼 수 있도록, 근접할 수 있도록 가이드한다.
  • 부득이한 경우를 제외하곤, 정답을 제시하지 않는다.
  • 멘티가 스스로 정답에 근접할 수 있게, 혹은 자기 자신만의 정답을 가질 수 있게 가이드한다.
• 공부에 대한 키워드를 제시한다.
  • 예시) React가 왜 등장한걸까요? React를 안 써도 되는 상황은 언제일까요? React가 렌더링 최적화를 어떻게 할까요? 가상돔이 꼭 필요한걸까요? …
• 기술적으로 궁금한 부분들에 대해 답변한다.
  • 앞서 제시한 것들과 마찬가지로 정답을 제시하기보단, 정답에 근접할 수 있도록 가이드한다.