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

* 이번 기수는 조기마감 되었습니다. 출시알림을 신청하시면 다음 기수 오픈 시 바로 연락을 드립니다.
* 두 기수 이상 연속 조기마감된 강의입니다. 결제순으로 마감되오니 빠르게 수강신청 및 결제를 완료해주세요 🙂

Component를 통해 UI를 쉽게 개발할 수 있도록 만든 라이브러리, React!
복잡한 코드 없이도 웹 프론트엔드 및 데이터가 수시로 업데이트되는 서비스 구축이 가능하기에
전 세계는 물론 국내 개발자들이 주목하는 라이브러리입니다.

리액트는 가벼운 라이브러리입니다. 이를 어떻게 활용하느냐에 따라 생산성이 좌우됩니다. 자유도를 중요하게 생각하는 라이브러리이기 때문에 규정된 활용 가이드가 따로 없습니다. 하지만 초심자의 입장으로는 정해진 길 혹은 매뉴얼이 없으니 구조를 세울 때 막막할 수도 있습니다. 실제 리액트를 사용하면서 알게 된 다양한 노하우들을 알려드리겠습니다. 웹 개발의 즐거움을 리액트를 시작하면서 느꼈기에 이 즐거움을 수강생분들께 전달하고 싶습니다.   – 김민준 강사님

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

공식문서로는 배우기 힘든 구조화 방법부터 실무 노하우까지 전수

단순히 리액트 라이브러리의 사용방법을 가르쳐드리는 것이 아니라, 실제로 여러분이 실무에서 사용하게 될 때 필요하게 될 지식을 알려드립니다. 리액트는 다른 라이브러리나 프레임워크에 비해 개발자가 꼭 지켜야 할 규칙이 적은 편이여서 자유도가 매우 높습니다. 하지만 자유도가 높다보니, 처음 시작하게 되는 개발자들은 방향을 잃어서 리액트를 활용하기가 어려워 질 수도 있습니다.

이 강의에서 우리는 강사님과 함께 실무 노하우는 물론, 프로젝트를 어떻게 설계해야 할 지 어떠한 기술을 어떻게 사용해야 할 지에 대해서 알아보게 됩니다.

만들고 싶은것을 만들 수 있게 해드립니다.

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

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

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

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

  1. 리액트 기초를 다지면서 To do List 를 만듭니다.
  2. API 연동 방법과 컴포넌트 스타일링 방법을 배우면서 NASA 오늘의 사진 갤러리 프로젝트를 만듭니다.
  3. 리덕스, 리덕스 미들웨어, 라우터, Higher Order Component, 테스팅, 타입스크립트 등의 기술들을 익히고, 활용하면서 조그마한 프로젝트들을 만들게 됩니다.
  4. 백엔드 지식을 배우고, 강의중에 배웠던 지식들을 통합하여 마크다운 기반 블로그 시스템을 완성하게 됩니다.

[프로젝트] 블로그 구현하기

최종적으로 블로그 구현 프로젝트를 함께 진행합니다.

대표적으로

  • 마크다운 에디터 : 마크다운으로 작성된 텍스트를 자동으로 html로 변환, 내부 코드들에 색상 렌더링
  • 포스트 목록 : 페이지네이션 기능 적용으로 특정 페이지에 있는 포스트 노출 및 태그별 분류
  • 무한 스크롤링, 포스트 페이지

등을 직접 구현해보며 React와 Node, 서버 배포 방법까지 모두 경험할 수 있습니다.

실무 경험이 풍부한 강사님과 함께 대규모 프로젝트를 진행함으로써 커리큘럼에서 다루는 프로젝트 구조화 방법부터 리액트 활용 노하우를 체득하세요!

수강생 만족도

9.61(10점 만점)

★★★★★

수강생 71명이 평가함

React의 광팬, Velopert(김민준) 강사님!

프로그래밍을 언제나, 재밌게 해보려 하는 개발자 김민준입니다. 현재 애니메이션 스트리밍 서비스 라프텔 에서 프론트엔드를 담당하고 있습니다.

저는 리액트 라이브러리를 매우 사랑하는 개발자중 한명이며, 저 또한 리액트를 처음 배웠을 때 많은 시행착오를 겪었습니다. 따라서 여러분이 리액트를 시작 할 때 어떤 기분일지 잘 알고 있습니다. 그래서 많은 분들께 도움이 되고자 다양한 리액트 관련 자료를 작성하고 있고 조만간 집필서적도 출간할 예정이랍니다.

저는 이 강의를 통해서 여러분들에게 단순히 “지식” 을 가르쳐드리지 않습니다. 그 대신 여러분이 리액트, 그리고 관련 기술들을 배우게 될 때 안내자가 되어 이에 투자하는 시간을 최대한 효율적으로 사용 할 수 있게 해드리겠습니다.

Projects

Bitmulate

– 암호화폐 모의 거래소
Github Repo

Velog

– 개발자들의 블로그 플랫폼
Github Repo

Activities

https://velopert.com 블로그 운영중 – Node.js, React, Serverless 등 개발 관련 포스트 업로드
– Webframeworks.kr 에서 주관한 오프라인 React 코드랩 세미나 (2016.08)
– 매일 밤 12시 Youtube 라이브코딩 방송중

React를 가져갈 커리큘럼

회차 주제 세부내용
1회차 리액트 시작하기 리액트를 왜 쓸까?
소개 및 환경설정
Component의 이해
JSX, props, state, 이벤트 관리
Lifecycle API
2회차 프로젝트 만들기 리액트 컴포넌트 디버깅
Todo List 구현하기
컴포넌트 스타일링
CSS Module, Sass, Styled-components
3회차 리액트 활용하기 컴포넌트 스타일링 / API 연동 실습
NASA 오늘의 사진 갤러리 프로젝트 구현하기
컴포넌트 최적화 방법 알아보기
불변성 유지 라이브러리 (ⅰ) Immutable.js
불변성 유지 라이브러리 (ⅱ) Immer.js
4회차 Redux 리덕스 Prettier + ESLint 사용하기
Higher Order Component(HoC) 알아보기
리덕스 기초 학습하기
5회차 MobX, 리덕스 미들웨어 Render Props 패턴 사용해보기
MobX 사용해보기
리덕스 미들웨어, 그리고 비동기 작업(redux-thunk, redux-promise-middleware, redux-pender)
6회차 리액트 라우터 Context API 사용하기
redux-saga 를 통한 비동기작업 관리
리덕스 라우터 기초
서버사이드 렌더링 이해하기
7회차 블로그 시스템 만들기 (i) 리액트 프로젝트에서 TypeScript 사용하기
리액트 테스트코드 작성하기
블로그 프로젝트 구현
8회차 블로그 시스템 만들기 (ii) TypeScript와 리덕스 함께 사용하기
리덕스 + 리액트 통합테스트코드 작성하기
블로그 프로젝트 구현
S3에 리액트 앱 배포하기
부록 Backend Node.js - Koa 웹 프레임워크를 통한 REST API 개발
Mongoose로 MongoDB 연동하기
강의와 관련하여 더 상세한 상담 혹은 궁금한 점이 있으시다면 부담없이 김용성 매니저(02-517-0686)에게 전화주시거나 카카오톡으로 문의주세요!

배워서 바로 실무에 적용할 강의 특징

nodereact

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

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

react3_video

하나라도 놓치지 않도록 동영상 강의 제공

강의를 듣다보면 놓치거나 지각 혹은 결석을 하게 되는 일이 생깁니다. 우리 강의에서는 수강생 모두가 빠짐없이 수강신청시 다짐한 목표를 가져가실 수 있도록 동영상 강의를 제공합니다. 충분한 복습을 통해 React와 Node를 가져가실 수 있습니다. * 동영상 강의 제공은 이 강의에서만 단독적으로 제공되는 혜택입니다.

하나라도 내 이야기라면, 지금 바로 합류하세요!

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

회사에서 본격적으로 리액트를 사용하게 되어
빠르게 실무에 적용할 수 있을 정도의 실력이 필요하다.

실제 프로젝트 진행을 통해 프론트엔드 뿐 아니라 백엔드 지식까지 갖춘
프론트엔드 개발자가 되고 싶다.

효과적인 수강을 위해 이것만큼은 알고 오셔야 합니다.

잠깐! 본 강의에서는 JavaScript를 별도로 강의하지 않습니다. 만약, JavaScript 경험이 없거나 코드에 대한 이해가 없으시다면 [JavaScript 부트 캠프 (클릭)] 강의를 수강하시는걸 추천합니다.
아래 HTML과 CSS 그리고 JavaScript 코드를 이해할 수 있다면 충분히 수강하실 수 있습니다.

JavaScript code

js_code

* 이미지를 클릭하면 코드를 직접 확인하실 수 있습니다.

HTML과 CSS code

html_css_code_2

* 이미지를 클릭하면 코드를 직접 확인하실 수 있습니다.

내 프로젝트에 리액트를 적용할 32시간의 강의
지금 시작하세요!

99만 원 (정가 : 110만원)

[7/5 할인 마감] 10% OFF

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

이 강의와 함께 들으면 좋은 강의