올인원 패키지 Online

프론트엔드 최적화
완전 정복 (React & Next.js)

  • 01 서비스 특징 고려 최적화 기술 30가지

    토스st, 야놀자st 등 상용급 서비스 특성을 이해하고
    서비스 맞춤 최적화 전략/기법 30개를 적용합니다.
    매끄러운 유저 경험을 만들 수 있습니다.

  • 02 최적화로 유명한 토스 출신 강사님

    유저 경험의 혁신을 이끌어낸 토스증권 출신
    강사님이 알려주는 UX 고려 최적화 강의입니다.
    최적화로 혁신을 이끈 기업의 인사이트를 배우세요.

  • 03 React 실력까지 높이는 최적화 강의

    최적화는 React를 잘 사용해야 가능합니다.
    상태관리, 통신 등을 함께 학습하며 실력을 높입니다.
    강의 하나로 최적화 기술과 개발력을 키웁니다.

(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기
코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.

프론트엔드 채용 공고에 빠지지 않는

키워드 "최적화"

검색 서비스, 최적화, 프론트엔드 성능, 고성능 애니메이션, ux, ui, 트러블 슈팅, 채용 공고, 프엔 채용, 프론트엔드 채용
유저 경험, 서비스 성공, 서비스, 웹 서비스, 앱 서비스, 개발자 선호, 최적화 경험, 프론트엔드 개발자, 프엔 개발자

오직 패스트캠퍼스에서만 배울 수 있는

당신의 서비스는 빠르게,
당신의 커리어는 특별하게 만들
강의를 소개합니다.

구글 최적화, 성능 이슈, 응답 속도 향상, 안정성 향상, ux 향상, 로딩 속도 향상, 예약 서비스
상용 서비스, 프로젝트, 실무, 현업, 기능 구현, 최적화 실습
유저 경험, 토스 증권, 토스, ux, 성능 최적화
질의응답, 커뮤니티, 프론트엔드 질문
프로젝트 제작 에셋, 자료, 부가 혜택, 대용량
정가대비 20만원 할인
오픈 기념 2주간
파격 한정 특가 드려요!
~ 4/07 이후 가격이 상승합니다
프론트엔드, 실무 베이스, 프론트엔드 주니어, 프론트엔드 시니어, 주니어 개발자, 상태관리, 복잡한 데이터, 대용량 데이터, 대규모 앱, 성능 이슈

실제 회사에서 적용하는 수준의 최적화를 학습하고
실습할 수 있도록 구성한 강의입니다.

데이터 처리, 상태관리, 복잡한 데이터, 대규모 앱, 네이버 파이낸셜, 토스 증권, toss, 프론트엔드 개발, 유지보수 경험, 성능 개선 경험, 컴포넌트

Special 1

최적화의 기준, 구글 선정 최적화 지표를 커버하는 30가지 이상 실습으로
실무에 필요한 최적화 기술을 FULL 커버합니다.

실제로 속도를 빠르게 하는 로딩 속도, 응답 속도, 안정성 개선 외에
속도 개선 없이도 유저가 지루하지 않게 하는 UX 고려 최적화 방법까지 모두 학습합니다.
이로써 유저 경험을 개선하기 위한 대부분의 최적화를 진행하는 개발자가 됩니다.

렌더링 최적화, 응답 속도, 로딩 속도, 안정성 개선, ux 고려 최적화, 유저 경험, seo최적화, ssr환경, prefetch, preload, lcp 속도, 로그 활용, render 속도 측정, 로그 분석, 카드 서비스, 금융 서비스
로딩 최적화, 페이지 로딩, 동적 콘텐츠, 예약 서비스, 숙박 서비스, 크롬 네트워크, js로딩, 렌더링 속도, 코드 스플리팅, 캐러셀 최적화, 컴포넌트 배치, 애니메이션 최적화, seo 최적화, re-render, interval 컴포넌트
ux 최적화, 코드 번들 사이즈 최적화, 로직 구현, 퍼포먼스 탭, 번들 사이즈, 트리쉐이킹, scroll 이벤트, intersection observer, react query, 렌더링 경로, 레이아웃 shift, ux 경험, 퍼널 설계, 병목 코드
리소스 최적화, 에셋, 웨딩 서비스, 청첩장 서비스, 렌더링 줄이기, 메모이제이션, react, react hooks, react memo, 에러 상황 대응

Special 2

간단한 실습만으로는 곧바로 실무에 적용할 수 없습니다.
본 강의는 타사에서 찾아 볼 수 없는
실제 프로덕트 규모의 프로젝트에서 최적화를 실습합니다.

실제로 속도실사용 수준 앱만큼 다양한 데이터·컴포넌트 변화를 포함한 프로젝트로
실무와 가장 유사한 환경에서 최적화를 학습하여 곧바로 실무에 적용할 수 있습니다.

실사용 수준 프로덕트, 구현 기술 , 프로젝트 기능, 최적화 실습

| 사용 기술 종류

메인 언어, 프레임워크, 라이브러리, javaScript, creat-react-app, react, next.js, 상태관리, context api, recoil, local state, suspense, errorboundary, scs, 서비스 배포, 백엔드, db, prettier

| 사용 기술 종류

  • 로그인 전/후 조건에 따라 다른 페이지
    계좌 보유 유무의 조건에 따라 다르게 등장하는 배너, 자산, 신용점수 및 공통 추천 카드 페이지
  • 신용점수 페이지
    메인에서 신용점수 보러가기 선택시 나타날 신용점수와 점수 조회 유무에 따라 다른 페이지 노출
  • 계좌 개설 페이지
    약관 동 다양한 폼, 신청페이지까지 도달할 때 프로그레스바까지
  • 추천카드 페이지
    추천카드리스트, 추천카드 검색 기능, 카드 선택시 상세페이지 이동까지 구현합니다.
  • 로그인/로그아웃
    NextAuth를 활용한 구글 로그인
  • 자산 상세 페이지
    자산 상태를 바 차트화, 소비패턴을 파이 차트 형태로
보여주고, 입출금 데이터 및 필터링 기능까지
  • 약관 확인 페이지
    약관을 상세하게 볼 수 있는 페이지이자 필수약관동의와 선택약관동의 및 철회 가능 기능
  • 상품리스트 1
    페이징 및 찜하기
  • 상품리스트 2
    타이머 기능 포함 핫딜
  • 상품 상세페이지
    캐러샐, 구글맵, 리뷰, 공유하기, 마크다운 등
  • 실시간 잔여 객실 노출
    잔여 실시간 에러 핸들링
  • 예약 정보
    예약 - 예약 정보와 다양한 폼 처리
  • 실시간 예약 캘린더
    상품 상태 및 캘린더로 숙박 일수 계산 처리
  • 약관 확인 페이지
    약관을 상세하게 볼 수 있는 페이지이자 필수약관동의와 선택약관동의 및 철회 가능 기능

| 구현 기능 상세

청첩장 서비스, 카드 서비스, 금융 서비스, 여행 서비스, 예약 서비스, 예산 서비스, 이미지 캐러셀

Special 3

실무 프로세스 그대로 진행하는 최적화

잘하는 개발자는 무턱대고 최적화를 하지 않습니다.
서비스를 개발한 뒤, 최적화 필요성을 판단하고 진행합니다.
프로 개발자처럼 진짜 필요한 최적화만 진행하여 나의 리소스를 아낄 수 있습니다.

상용 수준 서비스, 최적화 여부, 최적화 기술, 개발자 주니어, 시니어 개발자

미리보기

더 많은 내용이 궁금할 땐, 강의 미리보기를 확인하세요!

타사에선 찾아 볼 수 없는,
실무자들이 학습하고 싶어하는
최적화 강의인 이유입니다.

· 최적화 중 로딩과 에러 핸들링을 학습 하는 과정은 상태관리 개념을 심화 학습 하는 과정과 똑같습니다.
· 상태관리 중 유저 경험을 덜 손상시키면서, 서버와의 통신 비용을 줄이는 방법은 무엇인지 우리는 학습하게 됩니다.
· 본 강의는 다양한 상태관리 스택을 사용한 프로젝트로 최적화 학습 중 상태관리까지 함께 이해합니다.

· 최적화 중 발생하는 성능 문제나 예상치 못한 버그를 해결하기 위해 디버깅 기술이 필요합니다.
· React는 복잡한 상태 관리 및 컴포넌트 간 상호작용을 위한 라이브러리로, 개발 중 다양한 문제가 발생할 수 있습니다.
· 본 강의에서는 최적화 중 다양한 디버깅을 통해 실무에서 발생하는 문제를 빠르게 해결할 수 있습니다.

· TypeScript는 타입 시스템을 바탕으로 하여 코드의 신뢰성과 가독성을 높입니다.
· 최적화를 배우는 과정에서 TypeScript를 활용하여 코드를 작성하면, 타입 시스템을 통해 코드의 안정성을 높이고 성능을 최적화할 수 있습니다
· 본 강의에서는 TypeScript의 이런 특징을 활용해 실전에서 바로 사용할 수 있는 노하우를 학습합니다.

Special 4

토스증권, 고석진, 고석진 강사님, 네이버, 서비스 구현, 서비스 개발, 서비스 성능 최적화, 프론트엔드 개발자
정가대비 20만원 할인
오픈 기념 2주간
파격 한정 특가 드려요!
~ 4/07 이후 가격이 상승합니다

Special 5

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

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

질의 응답 커뮤니티!
이렇게 이용하면 활용도 200%
✓ 실습 중 에러가 나면? 강사 & 수강생간 실시간 질의응답으로 빠른 해결
✓ 강의를 듣는 중 이해가 안가는 부분이 생기면 바로 질문
* 본 커뮤니티는 디스코드를 통해 2024.03.26 ~ 2026.08.07 동안 운영 됩니다.
* 강사님이 채널에 입장하시지만 답변이 필수로 제공되지 않는 커뮤니티 형식의 공간입니다.
* 강사님이 현업 중 답변하시기에 답변까지 영업일 기준 7일 내외 시간이 소요될 수 있습니다.
Question 1.
학습 난이도
& 수강 대상
프론트엔드 개발 2~3년차가 메인입니다. 하지만 1년차도 충분히 들으실 수 있습니다! 초급 수준의 React와 Next.js 이해도만 있으시다면 충분히 따라가며 학습하실 수 있습니다.
Question 2.
이 강의를 들으면 좋을 사람은
누구일까요?
매끄러운 사용자 경험(Seamless)을 만들고 싶은 프론트엔드 개발자분들께 권합니다.
열악한 환경에서도 만족스러운 사용자 경험을 추구하기 위해 성능을 최우선 가치로 하여 웹 애플리케이션, 웹 서비스를 개발하는 분들을 위한 강의로써,
단순 최적화 기술을 배우는 게 아닌 서비스 기능을 이해하고 그에 맞는 최적화 기술을
익히는 강의입니다.
Question 3.
[초격차 패키지 : 고성능 대규모 10개 프론
트엔드 프로젝트] 강의를 구매
했는데, 이 강의도 들어도 되나요?
본 강의는 최적화 희망 수강생들을 위하여 초격차 패키지 강의의 코스 2를 따로 떼어
제공하는 강의입니다. 따라서 본 강의는 같은 내용을 담고 있으므로 수강을
피해주시길 바랍니다.
만약 본 강의와 초격차 패키지 중 고민하고 계신다면, 좀 더 풍부한 학습을 희망한다면
초격차 패키지 수강을 권장드리며 - 최적화 부분만 확실하게 배우고 싶으시다면
본 강의를 권장합니다.

커리큘럼

아래의 모든 강의를 초격차 패키지 하나로 모두 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!

Part 1. 강의 개요

Part 2. 나만의 청첩장

Part 3. MCard

Part 4. LoveTrip

Part 5. My Account

Special Part 1

  • 상세 커리큘럼

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

    자세히 보기 »

이 강의도 추천해요.