✅ 강사소개
안녕하세요 저는 7 년차 FE 개발자입니다 :)
✅ 경력 및 교육 이력
- 네카라쿠배 업무 경험
- 인강사이트 강의 이력
✅ 만들게되는 프로젝트 및 강의 목적
리액트 기본 문법과 활용, 성능개선과 유저 경험을 올릴 수 있는 포인트들에 대해 학습합니다.
커머스 패턴을 구현하며 리액트의 기본 개념과 상태, 이벤트, 비동기 통신을 다루는법에 익숙해집니다.
학습 키워드는 아래와 같습니다.
React, Webpack, Babel, Css in js, React Query, Suspense, ErrorBoundary, 번들사이즈 최적화, jotai
✅ 시간
매주 토요일 12시 ~ 2시
4주 과정으로 진행됩니다.
✅ 장소
사당역 근처 스터디룸
✏커리큘럼
✨ 들어가기전
- 요즘의 프론트엔드에 개발 대하여 이야기합니다
- node, npm 은 왜 필요한지 학습합니다.
- 모듈 번들러는 무엇이고, Webpack 이 왜 필요한지 학습합니다.
- babel 이 무엇이고, 왜 필요한지 학습합니다
- 왜 요즘 jQuery 를 안쓰지? 가상돔 ?
✨ 1 주차 주제: 상태값은 무엇이고 언제 어떻게 사용하는게 좋을까 ?
✅ 모듈 번들러와 트랜스파일러에 대해 학습합니다
✅ 협업을 위한 프로젝트 규칙은 어떻게 설정하는지 알아봅니다.
✅ 리액트 기본 개념을 학습하며 프로젝트에서 사용할 작은 컴포넌트 조각들을 만듭니다.
- Create React App 을 이용하여 리액트 프로젝트 구성하기
- 기본적인 폴더 구조에 대해서 알아보기
- 컴포넌트를 만드는 여러가지 방법 (class ? function ?)
- 컴포넌트를 이용하여 레이아웃 구성해보기 (컴포넌트의 기본개념)
- 상태 관리란 ? ( state, props )
- React Hook 을 이용하여 상태관리 해보기
- 상태에 따라 변하는 DOM
✨ 2 주차 주제: 상품 리스트 페이지 구현, 상품 찜하기 (feat. 동기와 비동기를 다루는 방법)
✅ re-render 에 대한 이해
✅ State 흐름에 대하여 학습합니다.
✅ Json-Server 를 이용하여 로컬 서버를 띄워보고 Rest API 를 학습합니다
✅ HTTP 통신을 학습합니다 (동기와 비동기)
✅ css in js 알아보기
- 반복과 조건을 이용하여 컴포넌트 다루기
- 이벤트 다뤄보기
- styled-componet 를 이용하여 컴포넌트에 스타일 입히기
- Hook을 이용한 life cycle 흉내내기
- 리액트의 기본 개념을 이해하며 컴포넌트 구조를 설계합니다
- 동기와 비동기
- 서버와 통신하여 상품 목록을 가져와 화면에 노출합니다.
- 조건부 렌더링
- 브라우저 스토리지 다뤄보기
✨ 3 주차 주제: 전역 상태관리와 인증 - 소셜 로그인 회원가입, 로그인
✅ 페이지 분리하기
✅ 인증된 유저만 접근 할 수 있는 Private Router 만들기
✅ 퍼포먼스를 고려한 hook 의 사용 (useCallback, useMemo 등)
✅ Context API 와 jotai 을 학습합니다
- 언제 전역 상태를 관리하는게 좋을지 ? 아니라면 다르게 해결하는 방법이 있는지 학습합니다
- Context API 를 이용하여 전역 상태관리를 하는 방법을 학습합니다
- 성능개선 포인트를 알아봅니다.
- 다양한 hook 을 사용하여 성능 개선하는 방법에 대해 학습합니다.
✨ 4 주차 주제: 상품 삭제, 애플리케이션 성능과 UX 경험 올리기
✅ 인증된 유저만 서버와 통신하여 상품을 삭제, 수정 할 수 있도록합니다.
✅ React Query 를 사용하여 서버 상태 관리해보기
✅ React suspense 를 학습합니다
✅ ErrorBoundary 를 학습합니다
✅ 라우팅 단위의 코드스플리팅을 적용하여 번들사이즈의 용량을 줄이는 방법을 학습합니다
- 선언적으로 코딩하기
- 로딩과 에러에 대한 처리
- Suspense, ErrorBoundary 를 이용해 유저경험을 올립니다.
✅ 비용: 총 4주 25 만원입니다. (스터디룸 비용이 포함되어져 있습니다.)
✅ 신청전 한번 더 고민해주세요
- 시간 약속을 잘 지켜주실 수 있는 분
- 스터디 시간을 최대한 지켜주실 수 있는 분
- 그룹 과외다보니 서로에 대한 배려가 필요합니다
✅ 많이 주시는 질문
A: 몇명정도 함께 진행하나요 ?
B: 원활한 진행과 케어를 위해 최대 4분정도로 진행되어집니다.
A: JS 를 하나도 모르는데 괜찮나요 ..?
B: 객체와 배열정도는 다뤄보셨으면 좋겠습니다.
A: 객체와 배열은 어느정도 알고있는데, 전반적으로 JS 를 잘모르는데 괜찮나요 ..?
B: 주차별 내용을 잘 복습해주실 수 있다면 괜찮다고 생각합니다.
신청은 아래 구글폼으로 주세요 🙂
https://docs.google.com/forms/d/e/1FAIpQLSfQDk2zhIJMb1n_mxpyY7N8J_b96neSLM-uvw6t92EnD-HU_Q/viewform
