인프런 커뮤니티 질문&답변

✅ 소개 및 경력

- 네카라쿠배당토중의 어딘가에서 업무한 경력이있는 7년차 FE 개발자입니다 :)

- 패캠 리액트 최적화 인강

- 다수 멘토링 경험

✅ 장소와 일시

사당역 근처 스터디룸

선착순 신청으로 조기마감 될 수 있습니다

- 토요일 10:00 ~ 13:00

✅ 누가들으면 좋은가요 ?

- 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만원 (스터디 비용 + 스터디룸 비용이 포함되어 있습니다)

아래링크로 신청주세요

https://docs.google.com/forms/d/1Cc8CeBHWJW-pPPVmc4VguSLDiW9FXQMGl8dAp7JNzjA/preview