리액트 개발의 A to Z

React로 구현하는
웹 애플리케이션 프로젝트 CAMP

8주·32시간
Web Application 개발 프로세스 완주하기

#ES6#상태관리
#스타일링

기간 & 일정

2019.07.06 – 08.31
매주 토요일 14:00 – 18:00
(8월 17일 휴강)

장소 & 준비물

-패스트캠퍼스 강남강의장
강남역 4번 출구
-개인 노트북 사용 권장

담당자 & 문의

장명희 매니저
02-517-0562
help.camp.dev@fastcampus.co.kr

프로세스

React 개발에 등장하는
N가지 기술을 정복하는 실습 코스

Component로 UI를 쉽게 개발할 수 있는 라이브러리 React.
복잡한 코드 없이도 웹 프론트엔드·데이터가 수시로 업데이트되는 서비스 구축!
전 세계 개발자들이 주목하고 있습니다

리액트를 어떻게 알려주나요?

문서로 배우기 힘든 구조화부터 실무까지

단순히 리액트 라이브러리의 사용방법을 배우는 것이 아니라, 여러분이 실제로 실무에서 사용할 때 필요할 지식을 알려드립니다. 리액트는 다른 라이브러리나 프레임워크에 비해 개발자가 꼭 지켜야 할 규칙이 적어 자유도가 높은 것이 장점입니다. 하지만 자유도가 높아서 처음 시작하는 개발자들은 리액트 활용이 어려울 수 있습니다. 이 코스는 강사님과 함께 프로젝트를 어떻게 설계하는지부터 시작해 실무 노하우를 알아가는 과정입니다.

만들고 싶은것을 만들 수 있게 

이 강의의 목표는 여러분이 만들고 싶은것을 직접 구현 할 수 있게 해주는 것입니다. 오직 리액트만 다루면 백엔드 배경지식이 이미 있지 않은 이상 충분한 활용을 할 수 없습니다. 백엔드 관련 기술을 아직 잘 다루지 못하는 분들을 위하여 Node.js 를 통한 백엔드 개발 관련 자료가 부록으로 제공됩니다 (동영상/문서). 때문에, 강의를 마칠 시점엔, 만들고 싶은 서비스를 개발하는데 필요한 지식들을 충분히 갖춰나갈 수 있을 것입니다.

프로젝트로 체득하는 React 핵심

프로젝트를 통해 프론트엔드/백엔드 프로그래밍의 기초, 그 이상을 얻어가실 수 있습니다. 프로젝트를 완성해가면서 스타일링, 상태관리, API 연동, 라우팅, 서버사이드 렌더링, 코드 스플리팅, 테스팅 등의 다양한 기술들을  학습하여 실무에 바로 적용 할 수 있는 풍부한 경험치를 쌓아드립니다

어떤 프로젝트를 진행하나요?

매 수업시간에 배운 내용을 프로젝트에 적용해서 조금씩 완성합니다
React 개발의 프로세스 전반을 경험하며 한 사이클을 완주할 수 있습니다
개발 기술 뿐만 아니라 전체적인 구조를 잡는 능력까지 가져갑니다

[프로젝트] 기술서적 리뷰사이트 구현하기

가이드라인이 없는 리액트, 어떻게 활용하느냐가 실무 생산성을 좌우합니다

공부도 하고!
학습지원금도 받고!

미션 완료시 수강료의 10%를 학습지원금으로 드립니다.

패스트캠퍼스의 수강의지를 강화하기 위한 지원금 제도를 운영합니다
패캠이 제안하는 학습 목표를 달성하고 커리어 이상의 성취감을 얻어가길 바랍니다.

*학습지원금은 제세공과금(22%)을 제하고 드립니다.

과제/학습노트

100% 제출

React를 가져갈 커리큘럼

[1주차]

리액트 시작하기

1주차a

자세히 보기

  • 리액트가 하는 일
  • 리액트 관련 기술 로드맵
  • 리액트를 위한 ES6 기본 문법 정리
  • 자바스크립트 컴파일 없이 리액트 시작하기 (Rendering 이해하기)
  • Component 의 이해
  • JSX 문법 통신 구조 (props 와 state, 이벤트 처리)
  • Lifecycle API

[2주차]

리액트 프로젝트 구성하기

2주차a

자세히 보기

  • CRA, Next 로 구성하기
  • 프로젝트 폴더 구성 (Components 와 Molecules)
  • React 의 라우팅 이해하기 (react-router)
  • 리액트 컴포넌트 디버깅
  • Prettier + ESLint 사용하기
  • [과제] 개발 서적 평가 서비스 프로젝트 만들기

[3주차]

리액트 스타일링 정복

3주차a

자세히 보기

  • 컴포넌트 스타일링
  • CSS Module, Sass
  • Styled-components
  • TypeStyle
  • Ant Design 활용하기
  • [과제] 개발 서적 평가 서비스 디자인

[4주차]

리액트 실전 활용법

4주차a

자세히 보기

  • Higher Order Component(HoC) 알아보기
  • 불변성 유지 라이브러리 (Immutable.js, Immer.js)
  • Presentational Component 와 Container
  • Component Controlled Component 와 Uncontrolled Component
  • Hooks
  • Rest API 로 데이터 가져오기
  • Async / Await 이해하기
  • Error 핸들링
  • 컴포넌트 최적화 방법 알아보기
  • [과제] 개발 서적 평가 서비스 백엔드 API 와 연동하기

[5주차]

Redux

5주차a

자세히 보기

  • Context API 사용하기
  • 리덕스
  • 리덕스 라우터
  • 리덕스 미들웨어, 비동기 작업 (redux-thunk, redux-promise-middleware, redux-pender)
  • redux-saga 를 통한 비동기작업 관리
  • [과제] 개발 서적 평가 서비스에 상태 관리 매니저 적용하기 (1)

[6주차]

MobX

6주차a

자세히 보기

  • MobX 사용해보기
  • Store, observer, action, computed 이해하기
  • mobx-state-tree 사용해보기
  • [과제] 개발 서적 평가 서비스에 상태 관리 매니저 적용하기 (2)

[7주차]

Testing

7주차a

자세히 보기

  • JavaScript 테스트
  • 리액트 컴포넌트 테스트
  • react-testing-library 활용하기
  • 리덕스 / 비동기작업의 테스트
  • 통합 테스트 코드 작성하기
  • [과제] 개발 서적 평가 서비스 테스트 작성하기

[8주차]

Production

8주차a

자세히 보기

  • 프로젝트 배포 이해하기
  • AWS S3 에 React Wep Application 배포하기
  • 서버사이드 렌더링 이해하기
  • [프로젝트] 개발 서적 평가 서비스 마무리

강사소개

300x300 이웅재

이웅재

Career

Studio XID 프로토파이 개발 (2016 ~)
VTouch 수석 엔지니어 (2014 ~)
창업 및 스타트업 운영 (2010 ~)

Projects

ProtoPie 개발
Real Estate Development Service in LA
Virtual Touch Solution & Demo System 

Activities

한국 타입스크립트 유저 그룹 오거나이저
Microsoft Most Valuable Professional
AWS Certified Developer
Youtube 채널 운영 중

강사소개-프로젝트이미지

이 코스의 목표는?

8주, 총 32시간 동안 React 와 관련된 모든 것을 이해하는 것입니다. React 는 자유도가 높기 때문에 어떻게 구성하는 지가 중요합니다. React 와 관련된 기술들을 총 망라하여 장단점을 확실히 알고, 선택해갈 수 있는 능력을 함께 기르는 값진 시간이 되도록 노력하겠습니다.

지금 React가 필요하다면?

React 로 무언가를 해야 한다면, 생각보다 쉽게 시작할 수 있습니다. 하지만, React 를 왜 써야 하는 그리고 React 와 관련된 기술들이 왜 등장한지 알고 사용해야, 자유도 높은 React Web Application 을 좀 더 체계적으로 만들 수 있습니다. 함께 React 와 관련 기술을 디테일하게 학습하고, 설계 능력까지 키우는 뜻 깊은 시간이 되기를 바랍니다.

실무에 바로 쓰는 코스 특징 α

Node.js로 백엔드까지 경험하라

프론트엔드 개발을 더욱 깊이 있게 하기 위해서는 백엔드를 고려해야만 합니다. 수업때는, 이미 구현된 백엔드 서버에서 제공하는 API와 연동하여 프로젝트를 진행해보게 됩니다. 그리고, 백엔드 개발도 학습해보고 싶은 분들을 위하여 Node.js 기초와, 수업에서 다루는 리액트 프로젝트에서 사용된 백엔드 API 를 직접 만드는 튜토리얼을 다루는 자료 (동영상/문서) 를 제공해드립니다.

부록 : Backend 영상강의

Node.js – express 웹 프레임워크를 통한 REST API 개발
docker 로 배포 이미지 만들기

내 이야기라면, 지금 합류하세요!

icon_man3_2_happy-1024x1024

리액트를 어디서부터 시작해야 할지
어떻게 나아가야 할지 막막하다.

icon_woman1_2_happy-1024x1024

회사에서 리액트를 사용하게 되어
실무에 빨리 쓸 수 있는 실력이 필요하다

icon_man4_2_happy-1024x1024

프로젝트를 통해 백엔드 지식까지 갖춘
프론트엔드 개발자가 되고 싶다.

※ 효과적인 학습을 위해 이정도는 알고 오셔야합니다

React.js 수강을 위해 알아야 하는 최소한의 자바스크립트 문법입니다.  [링크 클릭]

본 강의에서는 JavaScript를 별도로 강의하지 않습니다. 만약, JavaScript 경험이 없거나 코드에 대한 이해가 없으시다면 [JavaScript 부트 캠프 (클릭)] 강의를 수강하시는걸 추천합니다.

{ FASTCAMPUS COMMUNITY MEMBERSHIP }

패스트캠퍼스 오프라인 강의를 수강하셨다면!
별도의 가입절차없이 패스트캠퍼스 커뮤니티 멤버쉽 회원이 됩니다.
커뮤니티 멤버쉽은 수강 후 1년 동안 유지되며,
오직 멤버들만을 위한 비공개 스터디클럽, 네트워킹행사, 세미나 등 비정기적 행사에 모실 예정입니다.

React 개발 프로세스 한바퀴를 경험하는 32시간

React로 구현하는 웹 애플리케이션 제작 CAMP
기간 2019.7.6 (토) ~ 8.31.(토) 총 8주 *휴강 : 8/17
일정 토요일 14:00 ~ 18:00 (총 32시간)
준비물 개인 노트북 사용 추천
(본인 PC에 맞는 개발환경 설정 및 원활한 개별 실습을 위하여)
장소 패스트캠퍼스 강남역 강의장
주차 지원은 죄송하게도 불가합니다.
문의 장명희 매니저 02-517-0562

935,000원 [정가 : 110만원]

출시기념 15% 할인 (6월 20일 마감)

※ 온라인 카드결제시 12개월 무이자 할부 가능!

*지금 신청하세요. 조기마감 될 가능성이 높은 강의입니다!

card_171120

강의장 안내

학습 지원 프로젝트

공부도 하고! 학습지원금도 받고!

*학습지원금(제세공과금 22% 차감 후 지급)은 강의마다 개인마다 상이할 수 있습니다.

학습 목표. 과제 및 학습노트 제출

매주 배운 내용을 가지고 전체 프로젝트[개발서적 평가 서비스]를 조금씩 개발하여 제출.

학습지원금을 받으려면?

미션을 모두 완료하면 신청페이지를 통해 신청 가능합니다.
다만, 강의 종료 후 30일 이내에 신청페이지를 통해서 신청해주셔야 합니다.
아래의 환급신청 링크로 신분증 사본 / 환급받을 통장사본을 제출 (반드시 본인 명의로만 가능)해 주세요.
결제한 수강료의 10% (환급 금액의 22% 제세공과금으로 차감) 를 드리며, 학습지원금은 개인마다 상이할 수 있습니다.

환불규정

* 학습지원금은 기수강생 및 얼리버드 할인과 중복 적용이 가능합니다. (기타 다른 이벤트와 중복 적용이 불가합니다.)
* 과제물이 허위로 작성되거나 표절일 경우 환급이 거절될 수 있습니다.
* 환불은 환불규정(https://www.fastcampus.co.kr/refund/)에 따라 진행됩니다. 규정에 의거하여 환불금액이 없을 수 있습니다.