Request edit access
[사당 오프라인] 만들면서 배우는 리액트와 모노레포 (with. 디자인시스템)

1주차 (프로젝트 설정)
  • 패키지 매니저에 대하여
  • 브라우저는 어떻게 화면을 그리는걸까 ? (Critical Rendering Path)
  • 요즘은 왜 jQuery 를 사용하지 않을까 ?
  • 리액트와 컴포넌트 패턴에 대하여
  • pnpm, turbo repo 설정하기
  • react 환경 설정하기
  • 컴포넌트를 만드는 방법에 대해서
  • 상태(state) 는 무엇인가
  • react hook 알아보기
  • 작업을 위한 eslint 와 prettier 설정하기
2주차 (나만의 디자인 시스템 만들기)
  • 디자인시스템이란 ?
  • 좋은 폴더구조 고민해보기
  • 공통 컴포넌트는 어떻게 만들어서 제공하면 좋을까 ?
  • Color 정의하기
  • Text 컴포넌트 만들기
  • Button 컴포넌트 만들기
  • Layout 컴포넌트 만들기
  • 공통 컴포넌트를 이용하여 프로젝트 소개 페이지 구현해보기
3주차 (프로젝트 구현)
  • 다양한 react hook 에 대하여
  • router 를 이용하여 페이지 구현
  • 공통 컴포넌트를 활용하여 상품 소개 리스트 / 상세 페이지 구현하기
  • react-query 에 대하여
  • react-query 를 이용하여 네트워크 리소스 최적화해보기
  • 커스텀 hook 을 구현하여 관심사 분리하기
  • react-query 보다 선언적으로 사용하기
  • 브라우저 스토리를 이용하여 최근 본 목록 구현하기
4주차 (리팩터링)
  • 무한 스크롤 구현하기
  • 에러처리에 대하여
  • error boundary 를 이용하여 에러를 처리하는 방법
  • suspense 를 이용하여 로딩 처리하는 방법
  • hoc를 이용하여 보다 선언적이게 로딩과 에러를 처리하는 방법
  • 렌더링 최적화 요소에 대하여 (보다 빠르게 유저에게 정보를 전달하기 위해서 어떤것을 할 수 있을까)

5주차 (배포)
  • 시멘틱 버저닝에 대하여
  • changeset 을 이용하여 버전관리해보기
  • 패키지 모듈 npm 에 배포하기
  • 프로젝트 vercel 이용하여 배포하기
  • 전체 요소 복습
Sign in to Google to save your progress. Learn more
(필수) 성함 / 번호 (or 카카오톡 아이디) 를 남겨주세요  *
(필수) 왜 학습이 필요하신가요 ? (커리큘럼에 참고하려고합니다)
(필수X) 궁금하신게 있다면 적어주세요 연락드리면서 답변 드릴게요 
Submit
Clear form
Never submit passwords through Google Forms.
This content is neither created nor endorsed by Google. - Terms of Service - Privacy Policy

Does this form look suspicious? Report

Google Forms