Hellomarket Onboarding

1주차

---

• 개발환경 세팅
• 개발 환경 세팅
• Github 사용하기
  • GIT학습 사이트 https://backlog.com/git-tutorial/kr/stepup/stepup2_4.html
  • 계정 생성 / 팀 멤버 등록
  • 테스트 레포 checkout https://github.com/hellomarket-projects/hellomarket-git-test
  • branch 추가
  • 내용 수정 commit / push
  • 커밋 여러개 작성하기
    • 커밋 1개 취소, 커밋 2개 취소
    • 커밋 합치기
  • push
  • github에서 pull request
  • release 만들기
  • Git-flow와 Github-flow 학습 발표 (Test case 작성)우린 Git-flow를 사용하고 있어요 - 우아한형제들 기술 블로그
  • Git 브랜칭 전략 : Git-flow와 Github-flow

2주차

---

• Nextjs 앱 만들기 (Todo App)
  • 테스트 레포 checkout https://github.com/hellomarket-projects/hellomarket-git-test
  • Function Component로만 이용
  • 헬로마켓 코딩 컨벤션 및 가이드에 따른다.
  • 브랜치 생성 (feature-onboarding-web-nextjs)
  • custom webpack , babel을 이용한 nextjs 어플리케이션 생성
  • Built-In CSS 적용
  • next/router 활용
  • next/link 활용
  • import 절대경로 구성
  • next/image 활용
  • next/head 활용
  • getServerSideProps (Server-side Rendering) 활용
  • getStaticProps (Static Generation) 활용
  • getStaticPaths (Static Generation) 활용
• ESLint & Prettier Recommendation 세팅
• Styled-Component 적용
• useMemo,useRef,useState,useCallback,useEffect 활용

3주차

---

• Redux 적용 (Todo App)
  • next-redux-wrapper 활용
  • react-redux 활용
  • Redux Toolkit 활용
  • Ducks Pattern 활용

4주차

---

• Redux-saga 적용 (Todo App)
  • next-redux-saga
  • axios를 활용한 오픈api 연동 (아무거나)

5~6주차

---

• 지금까지 작업한 Application Typescript 마이그레이션

7주차

---

• Jest & RTL (React Testing Library) 활용한 테스트 케이스 도입
• Todo App 코드 커버리지 90프로 이상

8주차

---

• Service Worker를 활용한 기능1개 구현
• Express Framework를 활용해서 Nextjs Custom Server 구축

최종미션

---

💡 Final Mission