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

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

    설계-최적화-재사용-유지보수 등
    FE 개발자라면 반드시 고려해야 할 것들을
    프로젝트로 구현하며 익힙니다.

  • 02
    빅테크 출신 강사님 노하우 압축

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

  • 03
    이직을 위한 부록 2종

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

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기

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

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

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

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

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

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

Point 1

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

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

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

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

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

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

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

Point 2

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

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

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

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

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

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

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

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

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

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

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

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

  • 사용자가 신뢰하는 제품 만들기
    • 운영: 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)
Project 2 |
반응형 웹 개발 프로젝트 실시간 트위터 프로젝트   

주요 학습 내용

• 웹 구조 : 반응형 웹
• 스타일링 : SCSS(모바일 대응 스타일링)
• 상태관리 : 대규모 프로젝트에 적합한 라이브러리 Recoil
• 백엔드 관련 : 실시간 데이터 업데이트(Firebase)
• 배포 방식: 단순배포(Vercel)
Project 3 |
Next.js 완벽 학습을 위한 맛집 지도 프로젝트   

주요 학습 내용

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

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

Point 4

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

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

Project 4 | 청첩장 프로젝트

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

Project 5 | 신용카드 프로젝트

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

Project 6 | 여행 예약 사이트

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

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

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

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

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

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. 프로젝트를 시작하기 전에

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

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

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

[Course 2] Part 1. 강의 개요

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

[Course 2] Part 3. MCard

[Course 2] Part 4. LoveTrip

[Course 2] Part 5. MyAccount

[Course 2] Special Part 1

[Course 3] Part 1. 강의 개요

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

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

[Course 3] Part 4. Youtube 만들기

[Course 3] Special Part 2

  • 상세 커리큘럼

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

    자세히 보기 »

이 강의도 추천해요.