초격차 패키지 Online
고성능 대규모 프론트엔드 10개 프로젝트 :
최적화부터 유지보수까지 한 번에 끝내기

01
10개 대규모 실전 프로젝트

설계-최적화-재사용-유지보수 등
FE 개발자라면 반드시 고려해야 할 것들을
프로젝트로 구현하며 익힙니다.
02
빅테크 출신 강사님 노하우 압축

네이버파이낸셜(토스증권), 당근마켓, 핀다 등
경력을 응축하여 강의에 담았습니다
빅테크의 업무 방식대로 학습합니다
03
이직을 위한 부록 2종

연봉과 경력의 퀀텀 점프를 위하여
강사님들의 성공적인 이직 준비 방법의
노하우를 담아 부록으로 제공합니다.

코스 프로모션 배너 전용입니다.

0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.

(자동)

정가 ~~(자동)~~

할인 금액 (자동)

현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시

바로 구매하기

기본 정보

1. 기본 정보
• 4개 대주제(①다양한 웹 앱 구조 ②최적화 ③개발생산성(재사용성) ④유지보수성)을 담은 약 90시간 강의
• 초중급 - 실전/심화

2. 선수지식 및 수강대상
• 프론트엔드 개발의 핵심 4가지 문제
(기능구현, 최적화, 생산성, 유지보수) 중 하나라도 어려움을 느끼고 있으신 분
• Main: 프론트엔드 개발 2~3년차
• Sub: 프론트엔드 개발 1년차
(올인원 패키지 React 강의, 시그니처 프론트엔드 강의를 수강하신 분)

3. 기대효과
• 커리큘럼이 포함하는 약 100가지의 기능 구현 가능
• 대규모 유저 기반의 프론트엔도 고성능으로 운영 가능
• 개발 생산성을 높이는 방법을 알고 적용하기 가능
• 개발 스펙 추가 등에 따른 유지보수 방식을 개선하게 됨

4. 버전 정보
node 16.17.1
yarn 3.2
react 18.2.0
react-router-dom 6.14.1
typescript 4.4.2
firebase 10.0.0
recoil 0.7.7
Vercel CLI 31.0.3
sass 1.63.6
tailwind 3.3.2
prisma 4.15.0
next-auth 4.22.1
react-query 3.39.3
next 13.4.3
nx 16.6.0
storybook 7.2.1
esbuild 0.18.17
react-hook-form 7.45.2
react-query 3.39.3

강의 특징

• 수강료 1회 결제로 평생 소장
• 부가 학습 자료 제공

1. 기획 의도
• 신입 채용은 줄고, 경력직 채용만 남은 사회 추세에 따라 바로 실무에서 적용하며 실력을 쌓고 빅테크로 이직할 수 있는 강의
• 프론트엔드 개발, React 개발을 200% 잘하도록 실력을 높이는 강의

2. 프로젝트 특징
• 프로젝트마다 구현 기능이 풍부하게 담긴 커리큘럼 구성
• 코스1: 다양한 웹 앱 구조(SPA, 반응형, Next.js)를 경험, 다양한 스택 학습으로 다채로운 상태관리, 스타일링 학습으로 워밍업
• 코스2: 사용자 기반의 사고를 할 수 있도록 서비스별 유저 시나리오에 따른 최적화 학습으로 대규모 유저 기반 고성능 프론트엔드 개발 가능
• 코스3: 개발 생산성의 대표 컴포넌트 재사용성부터 기능 추가에 따른 유지보수 학습으로 빅테크 기업의 업무 방식 학습

“경력 개발자 선호”, “채용 양극화”
이 시대에 살아남는 개발자는 어떻게 다를까요?

생존의 필수, 네카라쿠배토당야의 채용공고 키워드!
이 모든 것을 하나로 담아
생존 보장은 물론! 빅테크로 점프하는 강의를 만들었습니다.

타사와 비교하세요!
이 프로젝트 구성이 특별한 9가지 이유.

이 모든 것을 약 90시간의 강의로!
월 1만 원대 평생 소장으로 무제한 반복 수강!

이 강의는 단순히 서비스를 따라 만드는 React 활용법 강의가 아닙니다.

실제 업계에서 프론트엔드 개발 실력을 판단하는 건 프로젝트 구현 이후 입니다.
패스트캠퍼스와 함께 진짜 빅테크에서 일하듯,
“유저가 사용하는 서비스”를 만들기 위한 모든 것을 실제 웹 서비스를 만들면서 배워보세요.

Point 1

경력 채용 공고의 키워드를 모두 담은
10개 대규모 프로젝트

기술 역량을 빅테크의 업무 방식 그대로!
성능, 재사용, 유지 보수로 풀어낸 ‘진짜' 웹 프로젝트들을 소개합니다.

프론트엔드 개발 필수 스택 & 프로세스 학습을 위한 3개 프로젝트

사용자를 중심 서비스 개발을 위한 성능 최적화 4개 프로젝트

재사용성 & 안정적인 유지보수를 위한 3개 프로젝트

100개 이상 기능이 담긴 상세 커리큘럼 확인

빅테크에서 쓰는 스택을 강의에 그대로!
따라만 오면 30개 기술 스택을 한 번에 경험할 수 있습니다.

Point 2

구현 → 최적화 → 생산성 → 유지보수까지
대규모 프론트엔드를 위해 모든 것을 담은 심화 프로젝트

잘하는 개발자는 기능 구현만 잘하지 않습니다.
사용성 + 유지 보수성 + 개발 생산성까지 모든 개발 요소를 골고루 챙깁니다.
대규모 웹 서비스의 제작 과정 그대로, 진짜 잘하는 개발자가 되는 프로젝트로 학습하세요!

Project 7 | 개인 예산 관리 프로젝트

주요 구현 기능

1. 메인 홈 페이지 (로그인 전)
- 이벤트 배너 노출 (계좌 추가 유도)
- 계좌별 자산 연결 가이드 유도 컨텐츠
- 신용점수 확인 가이드 유도 컨텐츠
- 카드 개설 유도 컨텐츠

1-1. 메인 홈 페이지 (로그인 후)
- 계좌별 자산 노출
- 이번달 소비 그래프
- 신용점수 확인
- 추천 카드 (검색, 페이징)

2. 계좌 상세 페이지
- 계좌 자산 노출
- 계좌별 입출금 내역 (입출금 필터링, 페이징, 최신순, 오래된순)
- 월별 자산 그래프
- 카테고리별 지출 그래프
- 저축 목표 설정

2-1. 계좌 설정 페이지
- 계좌 정보 노출
- 계좌 별명 설정
- 홈에서 계좌 금액 정보 노출 여부 업데이트

2-2. 계좌 가져오기 페이지
- 외부 계좌 가져오기
- 약관 동의

4. 유저 정보
- 로그인
- 회원가입
- 거래시 비밀번호 설정
- 약관 동의

5. 약관 페이지
- 동의 약관 목록
- 약관 철회

5. 이벤트 페이지
- 계좌 추가
- 회원가입 유도

사용 기술 스택

• Next.js
 • Vercel
 • Emotion
 • Recoil
 • React query
 • Eslint

사용자가 신뢰하는 제품 만들기

• 효율적인 타입 설계
• 안전한 서비스 구성을 위한 에러 관리
• Next.js 기반 Universal Rendering (SSR + CSR) 사용
• SSR 환경에서 UX 경험 올리기

지루한 금융 정보를 재밌게 전달하기

• 스크롤 애니메이션
• 차트 라이브러리
• 성능에 최적화된 Framer motion 이용 애니메이션

최적화 끝판왕! 성능 측정부터 최적화까지

• LCP 속도 체크와 개선(실제 서비스에서 최적화의 시작)
• Preload & Prefetch로 로딩 속도 향상하기
• SEO 개선
• UX 개선 - ErrorBoundary 를 좀 더 확장성 있게 구성하고 타이핑 추가하기

사용자 경험을 유지한 개발 생산성 올리기

• 코드 추상화를 이용하여 렌더링을 위한 로직과 비즈니스 로직 분리
• 중복 코드 제거 및 공통 기능을 분리하여 코드 응집도/ 가독성 개선
• 효율적으로 서버 - 클라이언트 통신 다뤄보기
• 컴포넌트의 재사용성 유지보수성을 고려하여 설계

Project 10 | 유지 보수를 위한 유튜브

주요 구현 기능

• 인기 동영상 목록 API
• 페이지네이션
• React-Query를 사용해 인기 동영상 목록 데이터 가져오기
• 무한 스크롤 & Grid
• 스켈레톤 뷰
• 네비게이션 바
• 데이터 Mocking 하기: 프론트엔드 서버간 생산성 높이기
• 통합 테스트
• 검색 결과 페이지
• 댓글 목록 데이터 가져오기
• 숏츠 테크스펙 문서 작성하기
• 숏츠 URL 체크하기

사용 기술 스택

• Next.js
• Vercel
• Emotion
• MSW
• React query
• React Testing Library

사용자가 신뢰하는 제품 만들기

• 운영: Nextjs 프론트 ↔ Nextjs 서버 ↔ 유튜브 API
• 개발 환경: Nextjs프론트 ↔ MSW 모킹 데이터
컴포넌트 재사용을 통한 Post유튜브 구현

• Next.js API 라우트를 통한 API 설계(별도의 서버 없이 API를 효과적으로 다루는 법)
• MSW를 통해 프론트엔드 생산성 높이기
• 지역성을 고려한 폴더 구조 만들기
• API 기반으로 유튜브 화면 구현
• Mock데이터를 기반으로 통합 테스트 작성
실무 그대로 기능 추가 시나리오

• “재생목록 추가해주세요”
• “숏츠 추가해주세요”
• 테크 스펙 작성하기
• 문제 정의 & 문제 해결 방법 탐색
• 새로운 기능 개발
• 변경된 내용을 통합 테스트에 반영하기

Step 04. 개발 생산성을 고려한 개발

Point 3

잠깐! 심화 학습도 탄탄한 기초 공사는 필수!
다양한 웹 앱 구조를 학습하는 프로젝트

필수 스택, 다양한 상태 관리, 놓칠 수 없는 빵빵한 기능 구현까지!
탄탄한 이론 학습 후, 바로 실습으로 적용하며 기본기를 다집니다.

Project 1 |
SPA(Single Page Application) 개발 블로그

주요 학습 내용

• 웹 구조 : SPA(Single Page Application)
• 스타일링 : CSS를 활용한 BEM 구조
• 상태관리 : 소규모 프로젝트를 위한 Context API
• 백엔드 관련 : 사용자 인증 및 권한 관리(Firebase Auth)
• 배포 방식 : 단순 배포(Firebase)

주요 구현 기능

1. 메인페이지
- 최신 글 목록, 특징 콘텐츠 보여주기
2. 글 목록 페이지
- 블로그에 작성된 모든 글의 목록 보여주기
- 해당 글 선택시 상세페이지 이동
3. 글 상세 페이지
- 글 제목, 내용, 작성자, 작성일 등 표시
4. 글 & 댓글 CRUD
5. 카테고리 메뉴
6. 사용자 프로필 페이지(Velog,Medium st)
7. 내가 쓴 글 모아보기
8. 다크모드

사용 기술 스택

• React
• Firebase(로그인, 보안, 통신)
• CSS
• Vercel

Project 2 |
반응형 웹 개발 프로젝트 실시간 트위터 프로젝트

주요 학습 내용

• 웹 구조 : 반응형 웹
• 스타일링 : SCSS(모바일 대응 스타일링)
• 상태관리 : 대규모 프로젝트에 적합한 라이브러리 Recoil
• 백엔드 관련 : 실시간 데이터 업데이트(Firebase)
• 배포 방식: 단순배포(Vercel)

주요 구현 기능

1. 홈 타임라인
- Firestore 실시간으로 적용
- React 컴포넌트로 트윗 표시
2. 트윗 작성/편집 페이지
- 이미지 업로드 CRUD
- 글 CRUD
3. 사용자 개별 프로필 페이지
- 본인의 트윗 목록과 프로필 정보 보여주기(Firebase의 데이터베이스 사용하여 사용자 정보 저장, 가져오기)
4. 검색 결과 페이지
5. 실시간 업데이트
- Firebase의 실시간 데이터베이스 기능을 활용해 새 트윗 추가시 화면 자동 업데이트
- 좋아요
6. 팔로우 & 취소 기능
7. 다국어 지원(메뉴명들만 변경)
8. 해쉬태그 &검색 기능
9. 알림 기능
- 알림과 관련된 게시글로 이동 & 미확인 게시글 표시

사용 기술 스택

• React
• Firebase(auth, storage)(구글 로그인, 보안, 통신)
• Tailwind
• Recoil
• Vercel

Project 3 |
Next.js 완벽 학습을 위한 맛집 지도 프로젝트

주요 학습 내용

• 웹 구조 : Next.js SSR
• 스타일링 : 심화된 스택 사용을 위한 Tailwind
• 상태관리 : 전역 상태관리를 위한 Recoil + 캐싱을 위한 React-query
• 백엔드 관련 : 외부 API 사용과 데이터 처리에 대한 경험(Prisma)
• 배포 관련: CI/CD(Vercel)

주요 구현 기능

1. 메인 페이지(맛집 게시판)
- 맛집 목록 나열
2. 맛집 목록 페이지
- 다양한 맛집 목록 표시
- Kakao Map API로 지도 위에 맛집 마커 표시
- 사용자는 맛집을 클릭하여 상세 정보를 확인
- 필터링, 정렬 기능(목록, 리뷰)
3. 프로필페이지(마이페이지)
- 개인 정보 & 작성 리뷰 보여주기
4. 맛집 상세 페이지
- 특정 맛집 정보 보여주기(주소,연락처, 지도, 메뉴, 리뷰 등)
5. 검색 페이지
- 키워드, 위치 검색
6. 맛집 저장 기능(구글 지도에서 장소 저장 후 모아볼 수 있는 것처럼)

사용 기술 스택

• Next.js
• Prisma
• Supabase
• Next-auth
• React-hook-form
• React-query
• Tailwind
• Kakao map API
• GoDaddy

더 자세한 내용이 궁금하다면,
강의 미리보기 영상을 확인해 보세요! 😎

Point 4

대규모 앱의 필연, 성능 이슈를 한 강의로 해결!
실력 급상승을 이끄는 UX 고려 최적화 프로젝트

사용자와 직접 만나는 프론트엔드 개발자에게 성능 최적화 역량은 필수입니다.
서비스 특성별로 다르게 요구되는 성능 최적화 방법을 학습한 후, 웹에 바로 적용해보는 프로젝트는 오직 패스트캠퍼스에서만!

Project 4 | 청첩장 프로젝트

Keypoint | 멀티미디어 콘텐츠 최적화

주요 구현 기능

1. 메인 영상 랜딩페이지
2. 상세 페이지
• 지도 API 사용
• 갤러리
• Context API 를 이용한 모달 상태 관리
• 캘린더
3. 기타 기능
• 카카오페이 송금 기능
• 카톡 공유 기능
4 기타
• 예상치못한 에러를 대비하는 방법

웹 리소스 최적화 방법

1. 랜딩페이지 인트로 동영상 최적화
2. 이미지 최적화
3. Font 최적화(종류,장담점, 시점별 차이)
4. 캘린더 & 지도 렌더링 최적화(React memo)
5. 로직 추상화(1) - Custom Hook의 추상화와 타이핑 적용
6. 로직 추상화(2) - 폼과 함께 사용하는 타입스크립트

Project 5 | 신용카드 프로젝트

Keypoint | 퍼널 최적화 설계로 빠른 발급

[경력 채용과제 출제] ★신용카드 발급 퍼널 설계 ★

STEP 01: 멀티 라우트 1차 구현
신청 페이지를 라우팅 단위로 관리 & 전역 상태관리를 이용한 신청 퍼널 구현
STEP 02: 싱글 라우트로 1차 최적화
라우팅 단위가 아닌 하나의 페이지로 유연하게 풀 수 있는 방법에 대한 고민 및 설계
STEP 03: 하나의 페이지로 유연하게 STEP 관리 및 전역 상태 제거
불필요한 전역 상태관리 코드를 제거하여 상태 값을 응집시키고 가독성을 올립니다

지치지 않는 UX를 위한 최적화 방법

7. 초기 로딩속도 빠르게 하기 1 - 트리쉐이킹 초기 로딩속도 빠르게 하기
8. 초기 로딩속도 빠르게 하기 2 - 필요한 컴포넌트만 미리 부르기(Intersection observer를 이용)
9. 쓰레드를 점유하는 병목코드 코드 개선하기
10. Scroll 이벤트 대신 Infinite scroll(React Query 와 함께 사용)
11. 렌더링 경로를 고려한 속도 최적화
12. Layout shift 를 개선하여 ux 경험 올리기

Project 6 | 여행 예약 사이트

Keypoint | 렌더링 최적화로 수 백개의 이미지를 빠르게 한 눈에

Firebase를 이용한 중복 예약 방지(실시간 예외처리)

STEP 01: 예약에 따른 실시간 잔여 객실 처리
STEP 02: 여러 유저 간의 동시 객실 예약 시도 조율
STEP 03: 중복 예약 방지

유저의 정보 획득 속도를 줄이는 최적화 방법

13. 정적 리소스 캐시 활용 진입 속도 올리기
14. 대용량의 리스트를 아름답게 다루는 법
(예: 여행 상품 찜하기 목록이 2000개일 때)
15. 애니메이션 최적화
16. 불필요한 코드를 덜어내는 코드 스플리팅
17. Re-render 를 최소화하는 interval 컴포넌트
18. 캐러셀에 보여줘야할 이미지가 많을때 최적화

Project 7 | 지루하지 않게 금융 정보를 전달하는 개인 예산 관리

Keypoint | 설계 ~ 최적화까지 신뢰성 높은 안전한 프로젝트 만들기

주요 구현 기능

1. 메인 홈 페이지 (로그인 전)
- 이벤트 배너 노출 (계좌 추가 유도)
- 계좌별 자산 연결 가이드 유도 컨텐츠
- 신용점수 확인 가이드 유도 컨텐츠
- 카드 개설 유도 컨텐츠

1-1. 메인 홈 페이지 (로그인 후)
- 계좌별 자산 노출
- 이번달 소비 그래프
- 신용점수 확인
- 추천 카드 (검색, 페이징)

2. 계좌 상세 페이지
- 계좌 자산 노출
- 계좌별 입출금 내역 (입출금 필터링, 페이징, 최신순, 오래된순)
- 월별 자산 그래프
- 카테고리별 지출 그래프
- 저축 목표 설정

2-1. 계좌 설정 페이지
- 계좌 정보 노출
- 계좌 별명 설정
- 홈에서 계좌 금액 정보 노출 여부 업데이트

2-2. 계좌 가져오기 페이지
- 외부 계좌 가져오기
- 약관 동의

4. 유저 정보
- 로그인
- 회원가입
- 거래시 비밀번호 설정
- 약관 동의

5. 약관 페이지
- 동의 약관 목록
- 약관 철회

5. 이벤트 페이지
- 계좌 추가
- 회원가입 유도

복잡한 UI 및 인터랙션을 포함한 최적화

19. SEO 최적화
20. SSR과 CSR 을 함께 사용하여 렌더링 속도 개선하기
21. Preload 와 Prefetch
22. 애니메이션 최적화
23. 실제 서비스에서 최적화의 시작하는 방법 (LCP 속도 체크)

따라만 와도 최적화 방법 23가지 학습

여기서 끝이 아닙니다!
실무자들이 학습하고 싶어하는 주제까지 모두 담았습니다

효율적 코드 작성을 위한 TypeScript 실전 사용 노하우

1. custom hook 들을 분리해나가며 추상화를 고려한 타이핑 적용해보기
2. suspense 와 error boundary 를 좀 더 확장성 있게 구성하고 타이핑 추가해보기
3. 다양한 형식의 폼을 지원 할 수 있도록 제네릭을 활용하여 타이핑을 유연하게 만들어보기
4. 실제 서비스를 구성하는 타입 설계 및 활용

실무 중 버벅이는 디버깅

1. 크롬 네트워크 탭을 보며 JS 로딩이 느린 파일 찾아서 개선하기
2. React dev tools를 이용하여 불필요한 Re-render 찾아 개선하기
3. 청크를 작은 단위로 분리하여 로딩 속도 개선하기
4. Render 가 느린 파일을 찾아 로그를 심어보며 Render 속도 측정 및 개선
5. SSR 환경에서 error boundary 조금 더 잘 활용해보기

Point 5

컴포넌트 재사용으로 개발 생산성을 높이는
디자인 시스템 프로젝트

표준화된 디자인 요소와 관리로 유지보수를 용이하게 만들어
개발의 효율성을 향상시키는데 도움이 됩니다.

Project 8 | 1단계 : 컴포넌트 재사용 기반 - 디자인시스템 만들기

Project 9 | 2단계 : 디자인시스템 기반 - Headless 웹 앱 빌더 프로젝트

• 웹 페이지를 구성하는 각 요소들을 표현하는 방법을 배울 수 있습니다.
• 데이터 구조 설계는 재사용성과 유지보수성을 향상 시킬 수 있습니다.
• 재사용 가능하고 확장 가능한 JSON 데이터 구조 설계할 수 있습니다.

• JSON 데이터를 바탕으로 프론트엔드에서 동적 컴포넌트를 생성하는 방법을 학습합니다.
• 동적 컴포넌트 생성으로 코드의 재사용성을 높이며, 새로운 컴포넌트나 기능을 추가하는데 있어 유지보수성을 향상 시킵니다.

• JSON 데이터 중 원하는 컴포넌트를 선택하고 조합하여 웹 페이지를 생성합니다.
• 조합된 JSON 데이터를 템플릿 형식으로 렌더링하여, 다양한 웹 페이지를 만들 수 있게 됩니다.

• 사용자 친화적인 방법(UI)으로 웹 페이지를 만들수 있게 합니다.
• UI 속에서 복잡한 form을 사용하여 JSON 데이터를 만들게 됩니다.

3단계: 웹 빌더 활용 사이트 제작

• 동적 폼은 사용자들이 웹사이트에 데이터를 입력하면, 해당 데이터를 자동으로 JSON 형식으로 구성하여 저장하거나 출력하는 기능입니다.
• 이렇게 생성된 JSON 데이터는 사용자가 입력한 정보를 기반으로한 동적 콘텐츠를 웹사이트에 반영하는데 사용될 수 있습니다.
• 웹 빌더로 개발한 정적 사이트를 서비스로 제공하려면 웹 호스팅 서비스에 배포해야 합니다.
• 웹 빌더는 이런 배포 과정을 쉽게 처리할 수 있도록 지원합니다. 사용자는 개발한 사이트를 원하는 도메인 주소에 연결하고, 필요한 설정들을 조정하여 웹사이트를 공개적으로 접근 가능하게 만들 수 있습니다.
• 웹 빌더를 통해 생성된 이미지 파일과 JSON 데이터를 클라우드 스토리지에 업로드하고, CDN을 설정하여 사용자들이 웹사이트에 빠르게 접근할 수 있도록 합니다.

+ 여기에 더! +

기능 구현을 위해 꼭 알아야 하는!
프론트엔드 & 백엔드 & 인프라 전반에 대한 지식까지 챙깁니다.

놓치기 쉬운 웹 앱 전체 동작 흐름을 파악하여
다양한 기능을 구현하고 백엔드 개발자와 원활한 협업이 가능해집니다.

★ Special 혜택 ★

이직 준비, 전략적으로 하세요!
스타트업부터 IT대기업까지 경험한 강사님들의
꿀팁을 가득 담은 부록으로 연봉 상승까지!

이력서 작성부터 필승 면접 전략까지!
취업/이직에 대한 모든 꿀팁을 알려드릴 테니, 여러분은 원하는 회사로 Jump Up만 하세요!

질의응답

수강 중 궁금한 내용은 언제든 질문할 수 있도록
수강생 디스코드 커뮤니티 운영

강의를 홀로 듣는 느낌은 No!
수강생과 지식 및 고민을 공유하는 질의응답 커뮤니티를 운영합니다.

질의 응답 커뮤니티!
이렇게 이용하면 활용도 200%

✓ 실습 중 에러가 나면? 수강생간 실시간 질의응답으로 빠른 해결!
✓ 본인 회사에 적용 & 응용하기 위한 강의 스터디 모집
✓ 프론트엔드 실무의 문제 해결을 고민하는 실무자 커뮤니티

* 본 커뮤니티는 디스코드를 통해 2023.09.13 ~ 2026.08.07 동안 운영 됩니다.
* 강사님이 채널에 입장하시지만 답변이 필수로 제공되지 않는 커뮤니티 형식의 공간입니다.
* 강사님이 현업 중 답변하시기에 답변까지 영업일 기준 7일 내외 시간이 소요될 수 있습니다.

강사진

경력에서 나오는 인사이트까지 담은 강의

실무자들이 가장 궁금해하는 트러블슈팅과 노하우는 인터넷을 뒤져도 배울 수 없어요!
강사님의 실무 경험을 바탕으로 현업 수준의 실습을 진행합니다.

개발자 H 강사님

[코스 1. 개발 ~ 배포로 워밍업]
프로젝트 1. 블로그
프로젝트 2. 트위터
프로젝트 3. 맛집지도

[이력]
∙ 전) 핀다
∙ 전) 인썸니아

잘하는 개발자는 프론트만 알지 않습니다. 백엔드와 DB 사용 방법에 대한 이해를 바탕으로 원활한 협업, 다양한 기능 구현을 이뤄내는 개발자가 어딜가나 환영받는 개발자입니다. 이번 강의는 현업에서 자주 사용하는 기술을 활용하며, 처음부터 끝까지 하나의 프로젝트를 설계, 개발, 배포까지 실습해봅니다. 이 과정에서 백엔드와 DB 사용법에 대해 종합적으로 이해할 수 있게 됩니다. 그래서 투두 리스트 같은 기본 앱만 개발해보셨거나, 취준을 위해 현업에서 필요한 프론트엔드 기술을 공부해야하는 학생분들께서 들으셔도 좋습니다! 이론과 실습이 병행된 강의로 구성했으니 충분히 따라오실 수 있답니다. 웹 개발 전체 과정을 이해할 수 있는 본 강의로 개발 기초를 탄탄히 쌓아올려보세요!

고석진 강사님

[코스 2. 최적화]
프로젝트 4. 청첩장
프로젝트 5. 신용카드 발급
프로젝트 6. 여행 예약 사이트
프로젝트 7. 개인 예산 관리

[이력]
∙ 전) 토스증권
∙ 전) 네이버파이낸셜
∙ 전) 트리플

구현까지만 할 줄 아는 개발자는 많습니다. 하지만 유저에 대해 치열하게 고민하며 성능을 챙기는 개발자는 드물죠. 이번 프로젝트 구성은 제가 경험해 온 프로덕트 도메인의 인사이트(금융 - 카드사 & 개인예산관리 프로젝트, 여행 - 여행 프로젝트)를 모두 모았습니다. 이 모든 강의는 프로덕트 도메인의 특성에 따라 유저가 어떠한 것을 기대하고 불편해하는지 파악하며 최적화가 진행됩니다. 이를 통해 여러분은 유저에 대해 치열한 고민을 하고, 최적화까지 할 줄아는 개발자가 될 수 있습니다. 뿐만 아니라 부분 부분 최적화를 다루는 강의는 있지만, 실제 실무 베이스로 서비스에 최적화를 적용해나가는 최적화 강의는 많지 않습니다. 이 강의는 실제 실무 베이스로 최적화를 다루며 적용해나갑니다. 이 강의를 활용하신다면 개발하고 계시는 프로젝트에 강의 내용을 적용하고 프론트엔드 개발자로서 UX를 고려한 최적화까지 이뤄낼 수 있다고 자신있게 말씀드립니다.

이동근 강사님

[코스 3. 재사용성 & 유지보수성]
프로젝트 8. 디자인시스템
프로젝트 9. Headless 웹 앱 빌더
프로젝트 10. 유튜브 유지보수

[이력]
∙ 현) 당근마켓
∙ 전) 뱅크샐러드

프론트엔드 개발의 핵심은 재사용성과 유지보수성에 있습니다. 우리가 만드는 '소프트'웨어는 '하드'웨어와 다르게 게 한번 만들어지고 끝나는 것이 아니라 '소프트'(유연)하게 이미 있는 것에 새로운 기능을 추가하기도 하고, 이미 있는 기능을 변경하기 때문입니다. 이번 강의에서는 다양한 프론트엔드 패턴과 디자인 원칙을 통해 어떻게 효율적인 재사용 코드를 작성할 수 있는지, 또 유지보수가 쉽고 가독성이 좋은 코드는 어떤 것인지를 체계적으로 배웁니다. 재사용성을 고려한 '디자인 시스템'과 디자인 시스템을 기반으로 한 '웹 앱 빌더(노코드웹 생성기)'를 만들고 추가로 유튜브 프로젝트를 통해 유지보수까지 모두 경험 할 수 있습니다. 코드의 재사용성과 유지보수성을 극대화하는 현실적이고 실용적인 방법을 학습해 단기적인 목표에만 집중하는 것이 아닌 장기적인 관점에서 생각 할 수 있는 프론트엔드 개발자가 될 것입니다.

갓성비 비교

대체재와 비교해보세요!
프로젝트 수 최대 10배 & 가격은 1/5

강의 하나에 프로젝트 1개? 여러 강의 찾아 듣기 어렵고 비싸죠!
이렇게 보장된 강사님의 도메인 인사이트가 담긴 독보적 구성의 강의는 어디에도 없어요!

수강 전 질문

Question 1.
학습 난이도 & 수강 대상

프론트엔드 개발 2~3년차가 메인입니다. 하지만 1년차도 충분히 들으실 수 있습니다! 초급 수준의 React와 Next.js 이해도만 있으신 분들도 충분히 학습하실 수 있도록 프로젝트 1~3에 이론과 실습을 병행하며 기본기를 다지는 내용도 포함해 두었습니다.

Question 2.
이 강의를 들으면 좋을 사람은
누구일까요?

더 성능 좋은, 더 재사용성이 높은, 유지보수성이 좋은 프론트엔드 개발을 하고 싶으셨다면 이 강의를 강력 권해드립니다. 더하여 실무자들이 희망하는 TypeScript 사용법이나 디버깅, 프론트엔드 연관 백엔드/DB 학습으로 협업력 강화 등을 함께 학습합니다. 실무 초밀착 강의로 실력을 빠르게 키워보세요!

Question 3.
[올인원 패키지: 만들면서 익히는 React의
모든 것 With. 25개 스택] 강의를 구매 했는데,
이 강의도 들어도 되나요?

네, 물론입니다!
올인원 패키지 강의 학습 후 본 강의를 들으실 수 있도록 최적화, 재사용성, 유지보수성 같은 Next 레벨의 학습 개념들을 한 데 모아 정리해두었습니다. 올인원 패키지 학습 후 본 강의를 들으신다면 탄탄하게 실력을 높이실 수 있으리라 보장합니다.

Question 4.
최적화 주제의 4~7 프로젝트는
모바일 레이아웃으로 진행되는데
그 이유가 무엇인가요?

아래 두 가지 이유에 근거하여 원활한 학습을 위해 진행됩니다.
• 성능최적화 위주로 학습하기에 적절합니다. PC와 모바일 레이아웃 중 모바일이 스타일링에서 조금 더 자유로운데요! 이에 따라 스타일링 학습에 많은 시간을 쓰기 보다 최적화 위주로 더 학습할 수 있는 장점이 있습니다.
• 최근 프론트엔드 개발자가 웹뷰 환경에서 동작하는 프론트엔드를 구성해야 하는 경우가 많아졌습니다. 이에 따라 웹뷰 환경의 레이아웃 구성 방식 등을 학습하여 보실 수 있도록 구성했습니다.

코스 프로모션 배너 전용입니다.

0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.

(자동)

정가 ~~(자동)~~

할인 금액 (자동)

현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시

바로 구매하기

상세 커리큘럼

[Course 1] Part 1. 프로젝트를 시작하기 전에

01. 강의 개요

• "React 개발부터 배포까지 워밍업" 커리큘럼 및 강사 소개
• 같이 만들어볼 프로젝트 소개: 블로그 앱, 트위터 앱, 지도 앱 소개
• IntelliJ Ultimate version

02. React 주요 개념 소개

• React란?
• 왜 React를 사용해야하는가?
• React 주요 개념 (1): 컴포넌트, JSX, Lifecycle
• React 주요 개념 (2): Props & State, 상태관리, SPA, CSR vs SSR
• React Hooks: useEffect, useState, useMemo, useContext

03. Next.js 주요 개념 소개

• Next.js란?
• 왜 Next.js를 사용해야하는가?
• Next.js 주요 개념: SSR, SEO, 라우팅

[Course 1] Part 2. 블로그 앱 프로젝트

01. 프로젝트 개요

• 프로젝트 개요 및 목적
• 완성 프로젝트 미리보기
• 프로젝트 구조

02. 프로젝트 세팅

• create-react-app 주요 개념 설명
• create-react-app 세팅
• react-router-dom 설명
• react-router-dom을 이용한 라우팅 실습

03. 컴포넌트 만들기

• 컴포넌트란
• css의 BEM 모델이란
• 프로젝트 기본 구조 세팅
• 홈 컴포넌트 작업
• 프로필 및 게시글 상세 컴포넌트 작업
• carousel 컴포넌트 작업
• form 컴포넌트 작업

04. 사용자 인증 구현

• Firebase란?
• Firebase 세팅하기
• 로그인 페이지 세팅하기
• Firebase Auth란?
• Firebase Auth 세팅하기
• onAuthStateChanged 적용하기
• Firebase Auth로 회원가입 실습
• Firebase Auth로 로그인 실습
• Firebase Auth로 로그아웃 실습
• React의 context 개념 설명
• context api로 사용자 정보 관리하기

05. 게시판 CR (Create, Read) 구현

• Firestore란?
• Firestore 세팅하기
• Firestore로 데이터 생성하기: 게시글 폼 작업
• Firestore로 데이터 가져오기: 게시글 리스트 작업
• Firestore로 데이터 가져오기: 게시글 상세 작업

06. 게시판 UD (Update, Delete) 구현

• Firestore로 데이터 수정하기: 게시글 수정 구현
• Firestore로 데이터 삭제하기: 게시글 삭제 구현
• Firestore 쿼리 적용하기: 내가 쓴 글 탭 구현
• Firestore 쿼리 적용하기: 카테고리 탭 구현

07. 다크모드 구현

• Context api로 다크모드 설계
• 다크모드 toggle 기능 구현
• 다크모드 toggle css 적용

08. 댓글 기능 구현

• 댓글 UI 작업
• 댓글 폼 작업
• 댓글 리스트 작업
• 댓글 삭제 작업

09. 보안 확인하기

• firebase 및 API 키 보안 작업

10. 배포하기

• firebase cli 설명, 세팅
• firebase로 배포하기

[Course 1] Part 3. 트위터 앱 프로젝트

01. 프로젝트 개요

• 프로젝트 개요 및 목적
• 완성 프로젝트 미리보기
• 프로젝트 설계
• 사용하는 기술 소개

02. 프로젝트 세팅

• create-react-app 세팅
• react-router-dom을 이용한 라우팅 실습
• scss 소개
• scss를 이용한 스타일링

03. 사용자 인증 구현

• Firebase, Firebase Auth 알아보기
• Firebase Auth 세팅하기
• Firebase Auth로 기본 회원가입 실습
• Firebase Auth로 기본 로그인 실습
• Firebase Oauth 실습

04. 게시판 CRUD 구현

• Firestore란?
• Firestore로 데이터 생성하기: 게시글 폼 작업
• Firestore로 실시간 데이터 가져오기: 타임라인 리스트 작업 (onSnapShot)
• Firestore로 데이터 수정하기: 게시글 수정 구현
• Firestore로 데이터 삭제하기: 게시글 삭제 구현

05. 해시태그 검색 구현

• 해시태그 폼 작업
• Firestore로 해시태그 검색하기

06. 이미지 업로드 구현

• Firebase storage란?
• Firebase storage로 이미지 업로드하기
• Firebase storage로 업로드한 이미지 수정/삭제하기
• 프로필 이미지 업로드 실습

07. 좋아요 기능 구현

• 좋아요 기능 설계
• Firebase Auth 세팅하기
• Firestore로 좋아요 기능 구현

08. 댓글 기능 구현

• 댓글 기능 설계
• Firestore로 댓글 기능 구현

09. 팔로잉 기능 구현

• 팔로우/팔로잉 기능 설계
• Firestore로 팔로우/팔로잉 기능 구현
• Firestore로 팔로잉 게시글 리스트 구현

10. 알림 기능 구현

• 알림 기능 설계
• Firestore를 이용한 알림 생성 구현
• 알림 리스트 구현

11. 다국어 처리 구현

• 전역 상태 라이브러리 recoil 설명
• 다국어 처리 기능 설계, recoil 세팅
• recoil로 메뉴명 다국어 처리 기능 실습

12. 모바일 반응형 작업

• media query 알아보기
• media query 실습

13. 보안 확인하기

• firebase 및 API 키 보안 작업

14. 배포하기

• vercel 이란?
• vercel cli로 배포하기

[Course 1] Part 4. 맛집 앱 프로젝트

01. 프로젝트 개요

• 프로젝트 개요, 목적
• 완성 프로젝트 미리보기
• 프로젝트 설계
• 사용하는 기술 소개: next.js, next-auth, react-query, API Routes, tailwind, prisma, supabase

02. 프로젝트 세팅

• Next.js 이란?
• Next.js 13 소개, 사용하려는 구조 소개 (pages router)
• Create-next-app 세팅하기

03. Next.js 이해하기

• Next.js Data Fetching 설명 (1): CSR vs SSR vs SSG
• Next.js Data Fetching 설명 (2): getStaticProps, getStaticPaths
• Next.js Data Fetching 설명 (3): getServerSideProps
• Next.js Routing 설명 (1): next/link
• Next.js Routing 설명 (2): useRouter
• Next.js 13 pages router 구조로 세팅하기
• Next.js 구조 살펴보기, 페이지 구조 설계

04. 네비게이션 바 만들기

• 컴포넌트란
• 네비게이션 바 만들기 실습
• 기본 레이아웃 만들기 실습

05. tailwind로 스타일링 작업하기

• tailwind란?
• tailwind 주요 개념 실습
• 네비게이션바 tailwind로 스타일링 변경하기
• tailwind 컴포넌트 적용 실습

06. 카카오 맵으로 지도 구현

• next/script란?
• kakao developers 세팅
• 카카오 지도 (kakao map api)불러오기
• 지도 컴포넌트 실습

07. 마커 구현하기

• next/image란?
• kakao 기본 markers 구현하기
• kakao 커스텀 아이콘 이미지로 markers 구현하기
• tailwind 컴포넌트 적용 실습

08. 데이터 fetching

• getStaticProps, getServersideProps로 데이터 가져오기
• mock 공공데이터 실습

09. DB 세팅

• prisma 주요 개념 설명
• prisma 문법 실습
• supabase 설명
• prisma, supabaes 세팅
• prisma 데이터 seed 실습

10. API Routes로 데이터 연동하기

• Next.js API Routes란?
• API Routes + prisma로 데이터 연동 실습

11. React-query 적용하기

• React-Query란?
• React-Query 세팅
• Axios 적용하기
• React-Query 로 API 가져오기

12. pagination 구현

• pagination 이론 설명
• react-query와 prisma로 pagination 구현하기
• 무한 스크롤 이론 설명
• react-query의 infiniteQuery 알아보기
• Intersection Observer란?
• 무한 스크롤 구현하기

13. 사용자 인증 구현 (next-auth)

• Next-auth란? (jwt 와 session의 차이점 알아보기)
• Next-auth 세팅하기
• Google Login 실습
• Naver Login 실습
• Kakao Login 실습

14. 식당 상세페이지 구현

• 상세페이지 레이아웃 작업
• 상세페이지 지도 띄우기

15. 맛집 목록 구현 (검색 & 정렬)

• 맛집 목록 컴포넌트 설계
• 검색기능 구현하기
• 필터링 기능 구현하기

16. recoil 적용하기

• recoil 개념 설명
• 지도 recoil로 전역 상태 관리하기
• 검색, 필터링 recoil로 상태 관리하기

17. react-hook-form 적용하기

• react-hook-form 개념 설명
• react-hook-form으로 맛집 생성 폼 실습

18. 주소 검색 api 실습

• daum 주소 검색 api 설명
• daum 주소 검색 api 실습

19. 맛집 수정/삭제 실습

• 맛집 수정 기능 작업
• 맛집 삭제 기능 작업

20. 찜하기 실습

• 찜하기 기능 설계
• 찜하기 기능 실습

21. 마이페이지 작업

• 마이페이지 컴포넌트 작업
• 찜한 맛집 모아보기 작업
• 마이페이지 pagination 적용

22. 댓글 기능 작업

• 댓글 기능 설계
• 댓글 기능 실습

23. 현재 위치 이동하기 작업

• geolocation API란?
• 현재위치 가져오기 실습
• 현재위치 가져오기 버튼 작업

24. next.js 13으로 마이그레이션

• Next.js 13에서 변경된 내용들: App router, server component, client component, next/image
• app router 구조 설명
• app router로 마이그레이션 하기

25. 배포하기

• vercel 소개, CI/CD 개념 설명
• vercel로 배포하기

26. 도메인 연결

• 도메인이란?
• godaddy에서 도메인 구매 & 연결하기

27. Google Analytics 적용

• google Analytics란?
• google Analytics 적용하기 실습

[Course 2] Part 1. 강의 개요

01. 오리엔테이션

• 강의 개요(강의/강사/프로젝트 소개)
• 최적화의 중요성 및 학습 내용
• 리액트를 조금 더 리액트스럽게 사용하는 방법

[Course 2] Part 2. 나만의 청첩장

01. 오리엔테이션

• 유저 시나리오 및 학습 내용 소개
• 유저 시나리오 및 최적화 포인트 소개
• 프로젝트 미리보기 및 구현 기능 소개

02. 프로젝트 설정

• 프로젝트 생성 및 환경 설정 (1)
• 프로젝트 생성 및 환경 설정 (2)

03. 프로젝트 실습 시작하기

• Json-Server 소개 및 설정
• Json-Server 를 활용하여 Rest API 만들기

04. 청첩장 구현하기

• 폰트 설정
• 청첩장 데이터 가져오기
• 인트로 동영상 구현 (1)
• 인트로 동영상 구현 (2)
• 이미지 갤러리 구현 (1)
• 이미지 갤러리 구현 (2)
• 본문 구현
• 캘린더 구현
• 지도 구현 (Kakao Map API)
• 연락처 구현
• 공유하기 구현
• 참석 여부 구현 (1) - React Portal 을 이용한 Modal 구현
• 참석 여부 구현 (2) - API 연동

05. 프로젝트 최적화

• 인트로 동영상 최적화
• 이미지 최적화 (1) - 이미지 형식과 최적화를 위해 할 수 있는 것들
• 이미지 최적화 (2) - 최적화해보기
• 폰트 최적화
• 캘린더,지도 최적화 - memo 를 이용하여 불필요한 렌더링 줄이기
• 로직 추상화 (1) - 렌더링에 집중 할 수 있는 컴포넌트 환경 만들기
• 로직 추상화 (2) - 선언적으로 코딩하기
• UX 개선 - 예상치 못한 에러 상황을 대비하는 방법
• 프로젝트 마무리

[Course 2] Part 3. MCard

01. 강의 개요

• 유저 시나리오 및 학습 내용 소개
• 유저 시나리오 및 최적화 포인트 소개
• 프로젝트 미리보기 및 구현 기능 소개

02. 프로젝트 실습하기

• 프로젝트 생성 및 환경 설정
• firebase 설정
• emotion 소개 및 설정

03. MCard 구현하기

• 공통 컴포넌트 구현 - Colors, Text, Button, Input
• 공통 컴포넌트 구현 - Alert, Flex Box
• 카드 리스트 구현 (1) - 설계, 데이터 준비
• 카드 리스트 구현 (2) - 컴포넌트를 확장성있게 재활용하는 방법, 컴포넌트 배치 및 페이징
• 카드 상세 페이지 구현 (1) - 설계 및 컴포넌트 배치
• 카드 상세 페이지 구현 (2) - 애니메이션
• 회원가입 구현 (1) - 설계, 폼 데이터 바인딩의 방법
• 회원가입 구현 (2) - 구현
• 로그인 구현 (1) - 설계, Firebase Authentication
• 로그인 구현 (2) - 구현
• 카드 신청 구현 (1) - UX를 고려한 퍼널 설계
• 카드 신청 구현 (2) - 신청 폼 및 유효성 체크
• 카드 신청 구현 (3) - 신청 상태 체크
• 카드 신청 구현 (4) - 신청 도중 이탈시 대비
• 카드 신청 완료 구현
• 내 정보 페이지 구현

04. 프로젝트 최적화

• 트리 쉐이킹 - 이론
• 트리 쉐이킹 - 적용해보기
• 카드 리스트 최적화 (1) - Layout Shift 를 피하는 방법
• 카드 리스트 최적화 (2) - 병목코드 제거, 무한 스크롤 개선 해보기 useInfinitequery
• 카드 상세 최적화 (1) - 유저가 지치지 않는 UI/UX 를 만드는 방법
• 카드 신청 최적화 (2) - 컴포넌트 우선순위를 두어 초기 로딩속도 올리기

05. 배포 및 프로젝트 마무리

• 배포(Vercel 기반의 CI/CD)
• 프로젝트 마무리

[Course 2] Part 4. LoveTrip

01. 강의 개요

• 유저 시나리오 및 학습 내용 소개
• 유저 시나리오 및 최적화 포인트 소개
• 프로젝트 미리보기 및 구현 기능 소개

02. LoveTrip 구현하기

• 프로젝트 생성 및 환경 설정
• 리스트 페이지 구현 (1) - 설계, 데이터 준비
• 리스트 페이지 구현 (2) - 컴포넌트 배치 및 페이징
• 리스트 페이지 구현 (3) - 광고 배너, 실시간 핫딜 상품
• 상품 상세 구현 (1) - 설계, 이미지 캐러셀
• 상품 상세 구현 (2) - markdown 을 이용하여 상세 컨텐츠 그리기
• 상품 상세 구현 (3) - firebase realtime database 를 이용한 실시간 잔여수
• 상품 상세 구현 (4) - Map API, 추천 상품
• 공유하기
• 회원가입
• 로그인 - Firebase Authentication 구글 로그인
• 찜 구현 (1) - 설계
• 찜 구현 (2) - 찜하기
• 찜 구현 (3) - draggable 을 이용한 찜 목록 순서 변경
• 리뷰 구현 (1) - 설계
• 리뷰 구현 (2) - 상품 리뷰 추가, 삭제
• 예약 폼 구현 (1) - 설계, react hook form
• 예약 폼 구현 (2) - react hook form 을 이용하여 폼 상태 다루기, 유효성 체크
• 예약 폼 구현 (3) - 다양한 폼을 대응하는 방법
• 예약 폼 구현 (4) - 예외처리, 예약
• 예약 완료 구현

03. 프로젝트 최적화

• 정적 리소스 캐시
• 코드 스플리팅 - 필요한 코드만 가져오는 방법
• 찜 리스트 최적화 - 대용량 리스트를 다루는 방법
• 애니메이션 최적화 - 성능을 고려하여 애니메이션 다뤄보기
• SEO 최적화 - 상품 상세페이지를 위한 SEO
• 불필요한 렌더링 최소화 - 핫딜 컴포넌트 개선
• 이미지 최적화 - 캐러셀과 lazy loading 을 이용한 이미지 최적화

04. 배포 및 프로젝트 마무리

• Github Actions 소개 및 설정
• 배포
• 프로젝트 마무리

[Course 2] Part 5. MyAccount

01. 강의 개요

• 유저 시나리오 및 학습 내용 소개
• 유저 시나리오 및 최적화 포인트 소개
• 프로젝트 미리보기 및 구현 기능 소개

02. 프로젝트 실습하기

• 프로젝트 생성 및 환경 설정
• 포르젝트 설계 및 데이터 준비 (1) - 설계
• 포르젝트 설계 및 데이터 준비 (2) - firebase 데이터 준비
• 홈 구현 - 로그인전 (1) - 설계, 이벤트 배너를 이용한 계좌 추가 유도
• 홈 구현 - 로그인전 (2) - 계좌 자산, 신용점수 컴포넌트를 이용한 계좌 추가 유도
• 홈 구현 - 로그인전 (3) - 추천 카드 리스트
• 추천 카드 리스트 (1) - 설계 및 카드 컴포넌트 준비
• 추천 카드 리스트 (2) - 카드 리스트 페이지, 페이징
• 추천 카드 리스트 (3) - 카드 검색
• 회원가입 (1) - 이메일 로그인 (설계, 인증 체계)
• 회원가입 (2) - 소셜로그인 (구글 로그인)
• 로그인 (1) - Next Auth
• 로그인 (2) - Next Auth를 이용한 구글 로그인
• 이벤트 구현 (1) - 이벤트 페이지
• 이벤트 구현 (2) - 계좌 추가 유도
• 홈 구현 - 로그인후
• 신용 점수 구현 - 신용점수 조회
• 신용 점수 구현 - 신용점수 저장
• 계좌 추가 구현 (1) - 설계
• 계좌 추가 구현 (2) - 약관
• 계좌 추가 구현 (2) - 추가
• 입출금 테스트 페이지 구현
• 계좌 상세 구현 (1) - 월별 자산 그래프
• 계좌 상세 구현 (2) - 입출금 리스트
• 계좌 상세 구현 (3) - 입출금 리스트 필터링
• 계좌 상세 구현 (4) - 카테고리별 도넛 차트
• 계좌 상세 구현 (5) - 저출 목표 추가
• 계좌 상세 구현 (6) - 저출 목표 수정
• 계좌 설정 구현 (1) - 정보 노출, 별명 설정, 홈 노출 여부 제어
• 약관 리스트 구현 (1) - 동의한 약관 리스트
• 약관 리스트 구현 (2) - 약관 철회

03. 프로젝트 최적화

• SSR과 CSR 함께 사용하기 (1) - 이론
• SSR과 CSR 함께 사용하기 (2) - 초기 로딩 속도개선
• Preload와 Prefetch - 로딩 속도 향상
• SEO 최적화
• LCP 속도 체크와 개선 - 최적화를 시작하는 가장 간단하면서도 중요한 요소
• UX 개선 - ErrorBoundary 더 잘 활용해보기
• CS 대응 - 로그 심기

04. 배포 및 프로젝트 마무리

• Github Actions
• 배포
• 마무리

[Course 2] Special Part 1

부록1. 이력서 & 포트폴리오 작성 노하우

상세 커리큘럼은 추후 공개됩니다.

[Course 3] Part 1. 강의 개요

01. 오리엔테이션

• 강의 개요 (강의 / 강사 / 프로젝트 소개)
• 재사용성 & 유지보수성의 중요성
• 소프트웨어 개발의 이상과 현실
• 현실 속 개발자는 어떻게 일해야 하는가?

[Course 3] Part 2. 디자인 시스템

01. 강의 개요

• 유저 시나리오 및 학습 내용 소개
• 디자인 시스템와 UI 라이브러리
• 프로젝트 미리보기 및 구현 기능 소개

02. 파운데이션 만들기

• 디자인 토큰 소개 & 특징 설명 (개념 설명)
• 디자인 토큰 동작 원리 소개 (css variable)
• 디자인 UI Kit 세팅
• 프로젝트 생성 & 환경 설정 (1)
• 프로젝트 생성 & 환경 설정 (2)
• 컬러 토큰 만들기
• 타이포그라피 토큰 만들기
• 그 외 토큰 (Shadow, Radius) 만들기
• 디자인 토큰 결과물 확인
• 다크모드 대응하기

03. UI 라이브러리 만들기

• UI 라이브러리 소개 & 컨셉
• 프로젝트 생성 & 환경 설정 (1)
• 프로젝트 생성 & 환경 설정 (2)
• 스토리북 세팅하기
• 모노레포 설명
• 모노레포 세팅
• 타이포그라피 컴포넌트 만들기
• 레이아웃 컴포넌트 만들기 (1) - Box
• 레이아웃 컴포넌트 만들기 (2) - Spacing
• 레이아웃 컴포넌트 만들기 (3) - Flex
• 레이아웃 컴포넌트 만들기 (4) - Grid
• 버튼 컴포넌트 만들기 (1)
• 버튼 컴포넌트 만들기 (2)
• 버튼 headless와 style 분리하기
• 버튼 컴포넌트 응용 - 토글 버튼 만들기 (1) - hooks
• 버튼 컴포넌트 응용 - 토글 버튼 만들기 (2) - 컴포넌트
• 아코디언 컴포넌트 만들기 (1)
• 아코디언 컴포넌트 만들기 (2)
• 리스트 컴포넌트 만들기 (1)
• 리스트 컴포넌트 만들기 (2)
• Controlled 컴포넌트와 Uncontrolled 컴포넌트
• Text Input 만들기 (1) - 기본
• Text Input 만들기 (2) - hover 상태 구현하기
• Text Input 만들기 응용 - Left & Right Addons
• Select Input 만들기
• 토스트 컨셉 소개
• 토스트 Provider 만들기
• 컴포넌트 만들기 (1)
• 컴포넌트 만들기 (2)

04. 단위 테스트

• 단위 테스트 소개
• 테스트 라이브러리 설치 & 세팅
• 아코디언 컴포넌트 테스트 코드 작성
• Input 테스트 코드 작성
• 토스트 테스트 코드 작성

05. 마무리

• 문서화 라이브러리 소개, 설치 & 세팅
• 문서 작성
• CICD 구성하기 - github action (1)
• CICD 구성하기 - github action (1)

[Course 3] Part 3. Headless 웹 앱 빌더

01. 강의 개요

• 유저 시나리오 및 학습 내용 소개
• 프로젝트 미리보기 및 구현 기능 소개
• 개발 방향, 구조 소개

02. 프로젝트 설정

• 프로젝트 생성 및 환경 설정 (1) - NextJS
• 프로젝트 생성 및 환경 설정 (2) - NextJS

03. 뷰어 페이지 만들기

• Layout 잡기 - Mobile First
• Hero Section 만들기
• TMI - 서비스 개발자와 코어(플랫폼) 개발자가 일하는 방식
• 혜택 소개 Section 만들기
• 강의 목록 Section 만들기 (1)
• 강의 목록 Section 만들기 (2) - swiper
• 강의 목록 Section 만들기 (3) - swiper
• 기타 설명 Section 만들기 (1)
• 기타 설명 Section 만들기 (2)
• 메타데이터 추가하기

04. 생성 페이지 MVP 만들기 (with. JSON)

• Layout 잡기 - Desktop First
• JSON Editor 만들기 (1)
• JSON Editor 만들기 (2)
• Preview 페이지 만들기 (1)
• Preview 페이지 만들기 (2)
• JSON Preset 기능 만들기 (1)
• JSON Preset 기능 만들기 (2)

05. 페이지 배포하기

• 기술 소개 (R2 + Cloudflare)
• 배포 기능 구현하기 (1)
• 배포 기능 구현하기 (2)
• MVP 마무리 - 404 페이지
• MVP 마무리 - Error 페이지

06. 목록 페이지 만들기

• 목록 페이지 만들기 (1)
• 목록 페이지 만들기 (2)
• 삭제 기능 만들기

07. 생성 페이지 고도화 (with Form)

• Layout 잡기
• react-hook-form 소개 & dynamic form 만들기
• Spacing Field 만들기
• 이미지 Field 만들기 (1)
• 이미지 Field 만들기 (2) - 이미지를 업로드 하는 방식
• 이미지 Field 만들기 (3) - 이미지 업로드 기능 구현하기 1
• 이미지 Field 만들기 (3) - 이미지 업로드 기능 구현하기 2
• Typography 필드 만들기 (1)
• Typography 필드 만들기 (2) - 하이라이트, 컬러
• Swiper 필드 만들기 (1)
• Swiper 필드 만들기 (2)
• 버튼 필드 만들기
• 아코디언 필드 만들기
• Form 만들기 (1)
• Form 만들기 (2)
• Form 만들기 (3)
• 고도화 마무리

08. 디테일 챙기기

• Form Field 숨기기 기능
• Form Field 순서 바꾸기 기능
• 페이지 임시 Close 기능
• 최근 업데이트 날짜 반영 기능

09. 마무리

• 마무리

[Course 3] Part 4. Youtube 만들기

01. 강의 개요

• 유저 시나리오 및 학습 내용 소개
• 프로젝트 미리보기 및 구현 기능 소개
• 개발 방향, 구조 소개

02. 프로젝트 설정

• 프로젝트 생성 및 환경 설정 (1) - NextJS
• feature 중심적인 패키기 구조 잡기
• 프로젝트 생성 및 환경 설정 (2) - NextJS

03. API 구축

• Next API Routes 소개 & 왜 이것을 쓰는지?
• 유튜브 Data API V3 소개

04. 유튜브 메인 페이지 구현하기 (without Shorts)

• (잡담) 프론트엔드 서버간 생산성 높이기 (1) - API First Design
• 인기 동영상 목록 API 구현 (1) - 기본
• 인기 동영상 목록 API 구현 (2) - 페이지네이션
• 메인 페이지 구조 잡기
• React-Query를 사용해 인기 동영상 목록 데이터 가져오기
• 인기 동영상 목록 섹션 만들기 (1) - 인기 동영상 목록 아이템 컴포넌트
• 인기 동영상 목록 섹션 만들기 (2) - 무한 스크롤 & Grid
• 인기 동영상 목록 섹션 만들기 (3) - 기타
• 네비게이션 바 만들기

05. 데이터 Mocking 하기

• (잡담) 프론트엔드 서버간 생산성 높이기 (2) - MSW
• MSW 소개
• MSW 세팅
• 인기 동영상 목록 Mocking 데이터 추가하기

06. 통합 테스트

• 통합 테스트 소개
• 통합 테스트 세팅
• 인기 동영상 목록 통합테스트 추가하기

07. 검색 결과 페이지 구현하기

• 검색 결과 목록 API 구현
• 검색 결과 목록 데이터 가져오기
• 검색 결과 페이지 구조 잡기
• 검색 결과 목록 섹션 만들기 (1) - 결과 목록 아이템
• 검색 결과 목록 섹션 만들기 (2) - 무한 스크롤
• 검색 결과 목록 마무리
• 검색 결과 목록 통합 테스트 추가하기

08. 동영상 상세 페이지 구현하기

• 동영상 상세 API 구현
• 댓글 목록 API 구현
• 동영상 상세 데이터 가져오기
• 동영상 상세 섹션 만들기 (1) - 동영상 플레이어 컴포넌트 추가하기
• 동영상 상세 섹션 만들기 (2) - 동영상 정보 추가하기
• 댓글 목록 데이터 가져오기
• 댓글 목록 섹션 만들기 (1) - 댓글 목록 아이템 컴포넌트 만들기
• 댓글 목록 섹션 만들기 (2) - 댓글 리스트 구현하기
• 동영상 상세 페이지 마무리
• 동영상 상세 페이지 통합 테스트 추가하기

09. 숏츠 기능 정의하기

• 숏츠 기능 소개 & 테크스펙 소개
• 숏츠 테크스펙 문서 작성하기 (1)
• 숏츠 테크스펙 문서 작성하기 (2) - 개발 기능

10. 숏츠 상세 화면 구현하기

• 숏츠 URL 체크하기
• 숏츠 동영상 컴포넌트 구현
• 숏츠 댓글 화면 구현
• 숏츠 넘기기 기능 구현
• 숏츠 마무리
• 숏츠 통합 테스트 추가하기

11. 마무리

• 마무리

[Course 3] Special Part 2

부록 2. 이직을 위한 면접 노하우

상세 커리큘럼은 추후 공개됩니다.

상세 커리큘럼

자세한 커리큘럼 및 내용은 여기서 확인하세요!

자세히 보기 »

이 강의도 추천해요.

학습규정 * 본 상품은 동영상 형태의 강의를 수강하는 상품입니다.
* 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.
* 수강 신청 및 결제를 완료하시면, 마이페이지를 통해 바로 수강이 가능합니다.
* 본 과정의 Course2는 [올인원 패키지 : 프론트엔드 최적화 완전 정복 (React & Next.js)] 강의 및 자료가 동일합니다.
총 학습기간:
– 정상 수강기간(유료 수강기간) 최초 3개월(90일), 무료 수강 기간은 91일차 이후로 무제한이며, 유료 수강기간과 무료 수강기간 모두 동일하게 시청 가능합니다.
– 본 패키지는 약 106시간 분량으로, 일 1시간 내외의 학습 시간을 통해 정상 수강 기간(=유료 수강 기간) 내에 모두 수강이 가능합니다.
– 수강시작일: 수강 시작일은 결제일로부터 기간이 산정되며, 결제를 완료하시면 마이페이지를 통해 바로 수강이 가능합니다. (사전 예약 강의는 1차 강의 오픈일)
– 패스트캠퍼스의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다.
– 일부 강의는 아직 모든 영상이 공개되지 않았습니다. 각 상세페이지 하단에 공개 일정이 안내되어 있습니다.

주의사항 – 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.
– 천재지변, 폐업 등 서비스 중단이 불가피한 상황에는 서비스가 종료될 수 있습니다.
– 본 상품은 기수강생 할인, VIP CLUB 제도 (구 프리미엄 멤버십), 기타 할인 이벤트 적용이 불가할 수 있습니다.
– 커리큘럼은 제작 과정에서 일부 추가, 삭제 및 변경될 수 있습니다.
– 쿠폰 적용이나 프로모션 등으로 인해 5만원 이하의 금액으로 강의를 결제할 경우, 할부가 적용되지 않습니다.

환불규정 – 환불금액은 정가가 아닌 실제 결제금액을 기준으로 계산됩니다.
– 쿠폰을 사용하여 강의를 결제하신 후 취소/환불 시 쿠폰은 복구되지 않습니다.

– 수강시작 후 7일 이내, 5강 미만 수강 시에는 100% 환불 가능합니다.
– 수강시작 후 7일 이내, 5강 이상 수강 시 전체 강의에서 수강한 강의의 비율에 해당하는 수강료를 차감 후 환불 가능합니다.

– 수강시작 후 7일 초과 시 정상 수강기간 대비 잔여일에 대해 아래 환불규정에 따라 환불 가능합니다.
환불요청일 시 기준
: 수강시작 후 1/3 경과 전, 실 결제금액의 2/3에 해당하는 금액 환불
: 수강시작 후 1/2 경과 전, 실 결제금액의 1/2에 해당하는 금액 환불
: 수강시작 후 1/2 경과 후, 환불 금액 없음

* 보다 자세한 환불 규정은 홈페이지 취소/환불 정책에서 확인 가능합니다.

패스트캠퍼스 아이디 공유 금지 정책 안내 [패스트캠퍼스 아이디 공유 금지 정책]
패스트캠퍼스의 모든 온라인 강의에서는 1개의 아이디로 여러명이 공유하는 형태를 금지하고 있습니다.
동시접속에 대한 기록은 내부 시스템을 통해 자동으로 누적되며, 이후 서비스 이용이 제한될 수 있습니다.

[기기제한 정책]
패스트캠퍼스 온라인 강의 시청을 위해서는 ID별 최대 3개의 기기를 등록할 수 있으며, 기기 등록은 온라인 강의장 접속 시 자동 등록됩니다.
최대 갯수를 초과하였을 경우 등록된 기기 해제가 필요합니다.

[저작권 정책]
패스트캠퍼스의 모든 강의는 무단 배포 및 가공하는 행위, 캡쳐 및 녹화하여 공유하는 행위, 무단으로 판매하는 행위 등 일체의 저작권 침해 행위를 금지합니다.
부정 사용이 적발될 경우 저작권법 위반에 의한 법적인 제재를 받으실 수 있습니다.

root layout

초격차 패키지 : 고성능 대규모 프론트엔드 10개 프로젝트 : 최적화부터 유지보수까지 한 번에 끝내기