올인원 패키지 : 개발부터 배포까지

만들면서 익히는 React의 모든 것
With. 25개 스택

  • React 꿀조합 25개 스택 학습

    React의 사용성을 높이는 스택을 함께 학습합니다. 따로 배울 필요 없이 한 강의로 끝낼 수 있습니다.

  • 약 61시간 커리큘럼으로 React 완전정복

    입문부터 실무까지 한 번에!
    개발부터 배포까지 한 강의로 학습하여,
    웹 개발의 전체 이해도를 높일 수 있습니다.

  • 실습 기반 프로젝트 학습

    대규모 프로젝트 4가지 + 실습 기반 스택 학습!
    개념과 연계된 프로젝트 학습으로 실무에 바로 적용할 수 있습니다.

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
현재 판매가 (자동)
12개월 무이자 할부 시 (자동)
수강 신청하기

‘만들면서 익히는 React의 모든 것 With. 25개 스택’
강의의 특징을 한눈에 확인하세요.

타 강의/도서와의 비교, 이제 그만 하셔도 좋습니다!

React 학습을 결심하고 강의를 찾다 보면
마주하는 고민들을 한 번에 해결해 드립니다.

React를 패스트캠퍼스 강의로 시작해야 할 이유를 확인하세요

React를 쉽고 빠르게 학습하여
실무 수준의 결과물을 만들 수 있습니다!

커리큘럼

61시간 분량, 종합 커리큘럼으로
입문부터 실전까지 React를 완전 정복하세요!

풍성한 커리큘럼으로 React를 빈틈없이 학습할 수 있습니다.

1. 프론트엔드 완성도를 높이는 체계적인 5단계 강의 구성

2. 필수 학습 내용 완벽 구성

커리큘럼 자세히 보기 ‣

프로젝트

포트폴리오에 바로 적용하는
실무 수준 프로젝트 4가지로 학습합니다.

실사용 웹 서비스와 같은 수준의 프로젝트를 진행하여,
실무 기능을 한번에 익힐 수 있습니다.

React 활용 개념 학습 & 실전 적용 프로젝트

| React 원리 이해
· React의 기본 구조 및 실행 방법 이해
· 컴포넌트 생성 및 라이프 사이클
· SPA(Single Page Application)의 이해 및 구현

| 웹 페이지 개선
· 클래스 컴포넌트에서 함수형 컴포넌트의 비교 및 구현 (React Hooks)
· 리액트 앱 성능 측정 및 개선
| 웹 페이지 배포
· Github을 활용한 프로젝트 배포

| React 심화 개념
· Category, Grid, Row 컴포넌트를 구현
· UseLocation을 이용한 검색 페이지 구현
· React Router Dom과 Custom Hooks를 이용한 라우팅 구현

| 사용자 경험 향상
· 슬라이드 및 영화 자세히 보기 클릭 시 Movie 모달 생성
· UX 개선을 위한 디테일: 모달 창 외부 클릭 시 모달 닫기 구현
| 외부 스택 사용
· 스타일링 프레임워크 Styled-Component 사용 페이지 구현
· Firebase를 이용한 인증 처리 구현 & 배포하기
· Firebase를 이용한 구글 로그인 & 로그아웃 구현하기
| 데이터 가져오기
· 외부 API를 활용한 최신 영화 정보 화면에 보여주기

연계 프레임워크 학습 프로젝트

| Node.js 원리 이해
· Next.js 13 개념 이해
· TypeScript와 Next.js로 앱을 만드는 방법 이해
· SSR 아키텍처 바탕 서버 스트리밍 구현

| 실무 적용 기능
· 채팅 / 결제 / 이미지 업로드
· 인피니트 스크롤 / 페이지네이션
| 인증 및 권한 부여
· NextAuth를 사용한 인증 및 권한 부여
| DB 모델링
· Next.js 앱 구축시 DB와의 상호작용 구현
· DB 모델링 개념과 목적 이해 및 구성 방법 이해

| Sass 이용 스타일링
· Sass의 기본 문법을 이용하여 스타일 지정(Basic Styling)
· 그리드 레이아웃과 스크롤바 스타일링으로 실무 기능 학습

| 코드 재사용성 향상
· @use, @forward를 이용한 partial 구현으로 코드 모듈화
· Sass 파일을 구조화
| 코드 가독성 향상
· formatNumber로 숫자를 특정 형식으로 변환하기
· formatText로 문자열을 특정한 형식으로 변환하기

위를 포함한 25개 스택 모두 실습 기반 강의로 학습합니다.

25개 스택

현업에서 자주 쓰는
React 관련 주요 스택 25개 전면 학습

다양한 라이브러리 조합으로 React를 더 편리하고 효과적으로 사용하게 됩니다.
한 강의에 이만큼의 스택 학습, 오직 패스트캠퍼스 뿐이에요.

스택 학습 방법

스택별 최적의 방법으로 학습합니다.

유사 스택을 가장 잘 익힐 수 있는 실습 기반 학습으로, 스택 사용법을 확실하게 익힐 수 있습니다.

#상태 관리 라이브러리

# 스타일링을 위한 CSS 프레임워크 & CSS 전처리기

#스택 꿀조합 구성 1 : 클라이언트측 & 서버측 애플리케이션 개발 프레임워크

#스택 꿀조합 구성 2 : 개발 및 배포 과정에서 생산성과 안정성을 높이는 프레임워크

앞서 확인한 대규모 프로젝트 4가지로
위의 연계 스택들을 실무 수준으로 확실하게 학습합니다.

실무 기반 스택 학습 과정으로 스택들을 바로 사용할 수 있는 교육 방식을 경험하세요!
본 과정을 통해 React로 실제 프로젝트를 진행할 수 있습니다.

학습 개념 & 기능

이렇게 따라만 하면 IT 대기업이 말하는 채용 우대 개념까지
한 번에 대비할 수 있습니다.

| React 기반 프레임워크 Next.js로 SSR 구현하기

· 마크 다운 파일을 데이터로 추출하는 방법을 학습합니다.
· getStaticProps로 SSR을 구현하는 방법을 학습합니다.
· Pre-rendering(미리 페이지를 만들어 두고, 요청이 들어오면 해당 페이지를 제공) 하여 초기 로딩 속도를 개선합니다.
· Data Fetching(페이지를 그리기 위해 필요한 데이터를 미리 가져오는 것)으로 클라이언트 측에서 데이터를 가져오는 것보다 더 빠른 초기 렌더링을 구현할 수 있습니다.

| React 앱 성능 개선을 위한 성능 최적화

· React Profiler 확장 프로그램 추가로 React 애플리케이션의 성능을 모니터링하고, 컴포넌트가 렌더링되는 데 걸리는 시간 등을 확인할 수 있습니다.
· React.memo와 함께 사용하여 얕은 비교를 수행하여 불필요한 렌더링을 방지하는 방법을 익힐 수 있습니다.
· useCallback을 이용하여 함수를 최적화하고, 불필요한 렌더링을 방지하는 방법을 익힐 수 있습니다.
· useMemo를 이용하여 계산이 필요한 값을 캐싱하여, 불필요한 렌더링을 방지하고 성능을 최적화하는 방법을 익힐 수 있습니다.

| React Hooks로 React 개발 생산성 높이기

· 함수형 컴포넌트에서 상태를 관리하고 이벤트를 처리하는 방법을 학습합니다.
· useContext Hook을 사용하여 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있습니다.
· useDebounce Custom Hooks로 일정 시간 뒤 입력값을 처리하여 UX를 개선할 수 있습니다.
· Custom Hooks로 반복 코드를 줄이고 코드 가독성과 유지보수성을 높일 수 있습니다.

| 대규모 배포에 사용하는 CI/CD 및 일반적 배포

· 일반 배포 Firebase 이용 애플리케이션 구현 & 배포에 대해 학습합니다.
· CI/CD Github Action를 통한 정적파일을 AWS S3로 자동 업로드하는 파이프라인을 구현합니다.
· AWS S3 활용해 정적사이트를 서빙하는 방식을 학습하고 자동 배포 파이프라인을 구현합니다.
· Docker를 사용해 React 애플리케이션을 Containerize하는 방법을 학습합니다.

본 강의 학습으로
변화할 내 모습을 상상해 보세요.

압도적 격차

총 61시간! 방대한 분량의 완성도 높은 강의
가격은 타사 대비 1/6 저렴하게!

약 61시간 분량 강의를 평생 소장하며 언제든 학습할 수 있습니다.
하나의 강의로 웹 개발 전 과정을 학습하며 완성도 및 연계성 높은 학습이 가능합니다.

강사 소개

대기업 신입 개발자를 가르치는 강사님이
쉽고 자세하게 알려드립니다.

강사님의 강의 자료와 방식을 확인하세요.

효과적인 학습을 위한 강사님의 강의 방식도 살펴보세요.

연관 강의

React를 포함한 HTML,CSS,JS 와 코딩테스트를 하나의 강의로 한 번에!
본 강의를 포함한 강의를 소개합니다.

현재 보고 계신 강의가 React Focus라면 ‘프론트엔드 웹 개발에 대한 모든 것’은 프론트엔드 개발 전반을 다루고 있습니다.
본 강의는 [프론트엔드 웹 개발의 모든 것] 강의의 Course 2 내용을 그대로 담고 있습니다.

수강 대상

이런 분들이시라면
이 강의를 꼭 들어보시길 추천합니다.

여러분의 어려움을 해결할 수 있는 강의예요!

비전공자라서 개념 학습 및 정리만 해도 많은 시간이 소요되는 분
평생 소장 가능한 도식화된 강사님의 특별 강의 자료로 개념 정리 및 복습이 용이합니다.

개념 따로, 실무 따로 학습하며 실무 적용에 어려움을 느끼신 분
개념과 연계된 프로젝트 학습으로 실무 중심의 학습이 가능합니다.

React의 문법 학습 뒤 본격적인 웹 개발을 진행하고 싶은 분
기초 개념 학습 후 12개 프로젝트 학습으로 기본적인 웹 개발에 필요한 컴포넌트 구현, 서버 구현, 상태관리, 서버 연동, 인증까지 배우게 됩니다.

React의 여러가지 스택을 한 번에 비교하며 학습해 보고 싶은 분
학습 스택만 25개, 최신 기술 스택을 포함한 학습 및 프로젝트를 구현합니다.

웹 애플리케이션의 전체적인 작동 흐름을 파악하고 싶은 분
Node.js, GraphQL, Next.js 등으로 프론트엔드 개발자가 알아야 하는 서버 구현, 서버 연동, CI/CD 파이프라인 구현까지 학습합니다.
이를 통해 프론트엔드 개발자가 알아야 하는 서버 지식까지 학습하게 되어 웹 애플리케이션이 동작하는 전체 흐름을 이해하고 개발 실력을 높일 수 있습니다.

HTML, CSS는 익혀서 React를 따로 학습하고 싶었던 분 & 기존 초격차, 시그니처 등의 내용이 길어 부담스러우셨던 분
시그니처의 강의 일부분을 따로 다루는 짧은 강의로 수강 부담감을 줄였습니다. 원하는 스택 위주로 학습하세요.
약 61시간의 강의로 하루 2시간 한 달이면 React와 관련 스택을 모두 끝낼 수 있습니다.

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
현재 판매가 (자동)
12개월 무이자 할부 시 (자동)
최저가로 수강신청

커리큘럼

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

Part1. 프로젝트로 시작하는 React
React 18, Node.js, CSS 3, Virtual DOM

Part2. React로 실제 서비스 만들기
React 18, React Router DOM v6, React Router DOM APIs, Firebase v9

Part3. 5가지 프레임워크로 배우는 상태 관리
Redux v8, MobX v5, Recoil v0.3, Zustand v3.0

Part Special. React Version 18 대응하기
React 18

Part 4. Next.js로 블로그 만들기
Next.js, TypeScript 4.7

Part 5. Next.js 프로젝트2: 중고마켓

Part 6. 번들러 살펴보기
Webpack, Vite

Part 7. CSS 프레임워크 완전정복
Material UI, Tailwind CSS, Emotion CSS

Part 8. Node.js로 구현하는 백엔드
Node.js, Express.js, HTTP 3.0, CORS

Part 9. N시간에 끝내는 GraphQL
GraphQL

Part 10. 프론트엔드 개발자가 알아야 하는 Docker & CI/CD
Docker, Github Action, AWS S3, AWS CloudFront

(자동)
정가 (자동)
현재 판매가 (자동)
12개월 무이자 할부 시 (자동)
최저가로 수강신청
이 강의도 추천해요.
3년 연속 브랜드 대상 수상, 패스트캠퍼스

수강료.

국내 8개 카드사 12개월 무이자 할부 지원! (간편 결제 제외)

  • 삼성카드
  • 신한카드
  • 롯데카드
  • 현대카드
  • 하나카드
  • BC카드
  • KB국민은행
  • NH농협카드

※ BC카드의 경우, 비씨(페이북)을 선택하여 결제시에만 12개월 무이자 할부가 가능합니다.
(BC계열 – 우리/제일/기업/대구/경남/부산/광주/수협/전북/제주/신협)