[사당 오프라인 강의형 스터디] 만들면서 배우는 리액트와 모노레포 (with. 디자인시스템)
✅ 소개 및 경력
- 네카라쿠배당토중의 어딘가에서 업무한 경력이있는 7년차 FE 개발자입니다 :)
- 패캠 리액트 최적화 인강
- 다수 멘토링 경험
✅ 장소와 일시
사당역 근처 스터디룸
선착순 신청으로 조기마감 될 수 있습니다
- 매주 토요일 10:00 ~ 13:00 (7/6) 마감
- 매주 일요일 10:00 ~ 13:00 (6/6)
✅ 누가들으면 좋은가요 ?
- JS 기초는 숙지를 하신분 (배열, 객체, 함수를 다루는데 있어서 생소하지 않으신분)
- 현업에서는 어떻게 일하는지 궁금한 FE 지망생분들
- 패키지배포와 모노레포를 어떻게 다루는지 궁금한 BE, FE 개발자분들
✅ 커리큘럼
필요하지만 쉽게 접해볼 수 없는 요소들로 준비했습니다 :)
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 이용하여 배포하기
전체 요소 복습
✅ 커리큘럼
총 5주 과정으로 진행됩니다.
35만원 (스터디 비용 + 스터디룸 비용이 포함되어 있습니다)
아래링크로 신청주세요
