Doeunnkimm/Mobi

🌱 모비 활동을 하며 구현한 내용들

mobi

🌏 react-router-dom : react-router-dom v6 동작원리 관련 구현

📝 이력을 보존하는 방법 : 게시글 작성 중 뒤로가기 버튼을 눌렀을 때 이를 보존하는 방안

⚙️ State 최적화 : 불필요한 렌더링을 줄이기 위한 방법들

💉 React 의존성 주입 : Custom Hook과 Context-api를 활용한 의존성 주입 구현

🙌 Yup과 React-Hook-Form 같이 사용하기

• Yup을 사용해서 유효성 검사
• React-Hook-Form의 Controller 사용
• Controller 없이 동일한 동작을 구현해보기

📔 Storybook

• Storybook을 활용한 ui inventory 관리, CDD 개념 확립
• Button, Input, Select, Pagination 컴포넌트를 스토리북 구현

🙊 반복되는 UI의 중복되는 스타일 코드 감소 : 중복되는 스타일 코드를 객체로 관리하여 DX 고려

👮 TS-Handbook

• 사전과제(개인정리) : 모비 타입스크립트 핸드북 작성 이전 사전과제 개인 정리 (typescript-krkorea)

🍝 스파게티 코드 리팩터링

• 커스텀 훅을 활용한 느슨한 관계 만들기
• 재사용 가능하고, 복잡한 상태의 변화를 useReducer로 관리하기
• 전역 상태 관리를 통한 프롭스 드릴링 해결 및 관심사 분리

💙 path1-typescript

• 1주차
  • 타입스크립트란?
  • 기본타입과 고급타입
  • ts&react project init(with vite)
  • react에서의 타입
• 2주차
  • tsconifg 파헤치기
  • 타입 가드란? 타입 가드의 종류?
  • axios와 타입
  • 타입가드로 유동적인 타입에 자동완성 부여하기
  • export한 타입을 import type 해야하는 이유
  • as const와 enum은 어떤 차이? 각각 어느 순간에 사용해야 하는가?
• 🔥 기억에 남는 점
  • 즉시실행함수와 타입 가드를 활용하는 방법이 가장 기억에 남는다.

⛰️ path2-NextJS

• 1주차
  • ssr, csr 차이를 정의하고 이해하기
  • nextJS 프로젝트 생성
  • nextJS에서 SSR을 지원하는 방법에 대해서 알아보기
  • 12v, 13v 차이
  • nextJS route system
  • 라우트를 만들고 SSR을 구현해보는 실습
  • nextJS에서 CSR을 구현하기 위한 방법
  • swc는 무엇이고, babel과의 차이점
  • nextJS에서 웹 스토리지에 접근하는 방법
• 2주차
  • App Router와 Pages Router의 차이점
  • App Router에서 지원하는 File Convention의 종류와 활용도
  • multiple layout
  • 가장 좋은 폴더 구조 짜보기
  • Image, Font Optimization