진행중 이벤트!

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

* 이번 기수는 조기마감 되었습니다. 출시알림을 신청하시면 다음 기수 오픈 시 바로 연락을 드립니다.

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

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

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

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

리액트는 다른 라이브러리나 프레임워크에 비해 개발자가 꼭 지켜야 할 정해진 규칙이 적어 자유도가 높습니다. 이로 인해 리액트는 쉽다라는 말이 많죠. 하지만 자유도가 높다보니 작은 규모의 서비스를 개발할 때에는 문제가 없지만 서비스의 규모가 커질수록 프로젝트 구조가 복잡해지기 때문에 개발자들이 방향을 잃고 리액트를 활용하기가 어려워집니다.

우리 강의에서는 강사님과 함께 프로젝트 구조화 방법 뿐 아니라 리액트 사용시 주의사항 그리고 실무 노하우까지 알아봅니다. 공식문서가 알려주지 않는 실무의 핵심을 가져가실 수 있습니다.

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

Webpack, Babel, ES6, Redux, JSX 등 리액트를 제대로 활용하기 위해 알아야 하는 기술들은 산처럼 쌓여있습니다. 이 기술들을 하나씩 익히다보면 정작 리액트를 정식으로 사용해보기도 전에 지쳐버리고 맙니다.

수강생이 리액트의 핵심 기술을 보다 잘 이해하고 적용할 수 있도록 매 시간마다 미니 프로젝트를 진행합니다. 프로젝트를 통해 이론으로 접했던 기술을 실제로 어떻게 구현하는지를 파악하고 그 사이에서 발생할 수 있는 에러들을 잡아가며 탄탄한 기반 지식을 쌓을 수 있습니다.

강의 종반부에는 SNS 플랫폼 개발 프로젝트를 통해 리액트의 기능을 체득시켜 실무에 바로 적용할 수 있는 풍부한 경험치를 쌓아드립니다.

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

강의가 끝나면 바로 자신의 프로젝트에 리액트를 사용할 수 있도록 가장 효과적으로 주요 기술들을 구현할 수 있는 미니 프로젝트를 매 시간 진행합니다.
단일 개념만으로 만족하지 않고 진일보하여 웹 애플리케이션 구현을 위한 탄탄한 기본기를 가져갈 수 있도록 Node.js 를 이용하여 REST API를 직접 구현하는 방법을 배워봅니다. 프론트엔드 뿐 아니라 백엔드 지식까지 온전히 쌓을 수 있도록 Koa 라는 웹서버 프레임워크를 다루며 WebSocket, JWT 등의 기술과 서버의 보안성과 확장성도 요목조목 따지며 프로젝트를 진행해봅니다. 이를 통해 리액트의 실무 활용에 필요한 중요 개념들을 자연스럽게 습득하며 실제 서비스를 구현하는데 있어서 꼭 필요한 핵심 개념을 가져갈 수 있습니다.

4가지 미니 프로젝트

1. To Do List

2. 주소록

3. 멀티 카운터

4. 채팅 서비스

[최종 프로젝트] SNS 플랫폼 구현하기

4가지 미니프로젝트를 통해 익힌 개념을 종합하여 최종적으로 블로그 구현 프로젝트를 함께 진행합니다.
이를 통해 페이스북, 인스타그램에서 사용되는 무한 스크롤링 기능실시간 데이터 처리 기능을 익힐 수 있습니다.

대표적으로

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

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

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

React의 선구자, Velopert(김민준) 강사님!

언제나 최신 동향을 따라가려 노력하는 풀스택 웹개발자 김민준입니다. 백엔드도, UX 디자인도, 관심이 많지만 지금은 프론트엔드를 위주로 작업을 하고 있습니다.

현재 애니메이션 추천 및 스트리밍 서비스 라프텔 에서 웹 프론트엔드를 담당하고 있습니다.

저는 리액트 라이브러리를 매우 사랑하는 개발자중 한명이며, 저 또한 리액트를 처음 배웠을 때 많은 시행착오를 겪었기에, 그리고 리액트를 처음 시작 할 때 어떤 기분일지 알기에, 많은 개발자들에게 도움을 주고 싶어서 다양한 리액트 관련 자료를 만들고있고, 올해 말에 집필 서적을 출간 할 예정입니다.

지식을 공유하는것을 굉장히 즐기고, 단순히 블로그 포스트, 그리고 동영상 강의로만 가르치기 힘든 것들을 나눠주기 위하여 오프라인 강의를 하고 있습니다.

Projects

Develoxy(2017.01 ~)

– 개발자들을 위한 블로그 플랫폼

Whotalk.us (2016.09 ~)

– 채팅 기반 SNS 플랫폼 프로젝트
GitHub OpenSource 확인하기

Activities

https://velopert.com
– Node.js, React.JS, MongoDB, SCSS 등 웹 개발 관련 포스트 업로드
– Webframeworks.kr 에서 주관한 오프라인 React 코드랩 세미나 (2016.08)

React를 가져갈 커리큘럼

회차 주제 세부내용
1회차 리액트 시작하기 리액트 소개 및 환경설정
프로젝트 생성하기
Component의 이해
props, state, 메소드
LifeCycle API
[Project 1] To Do List 구현하기
2회차 리액트 프로젝트 스타일링 및 프로젝트 만들기 CSS 모듈
Sass
Styled Component
[Project 2] 주소록 구현하기
3회차 리액트 프로젝트 최적화와 Redux 리액트 프로젝트 성능 분석 및 최적화 기초
Redux 기본 개념 소개
Immutable JS 알아보기
Ducks 구조 소개
[Project 3] 멀티 카운터 구현하기
4회차 외부 데이터 연동하기 Redux middleware 이해하기
redux-thunk/redux-promise-middleware/redux-pender 사용해보기
JSON Server를 사용한 모킹 REST API 서버
무한 스크롤링 구현하기
[Project 4] 채팅 서비스 만들기
5회차 React 라우터와 Code Splitting SPA 이해하기
리액트 라우터 기초
Code Splitting
Webpack으로 프로젝트 직접 구성
Server-side rendering 맛보기
6회차 Node.js로 백엔드 서버 만들기 Koa를 통한 REST API 개발
MongoDB & Mongoose로 데이터베이스 연동
7회차 블로그 시스템 만들기(ⅰ) 프로젝트 구조 잡기
Router/Redux 설정하기
기본 UI 구현
8회차 블로그 시스템 만들기(ⅱ) 마크다운 에디터 만들기
포스트 작성기능 구현하기
9회차 블로그 시스템 만들기(ⅲ) 포스트 읽어오기
페이지네이션 구현하기
포스트 수정 및 삭제기능 구현하기
10회차 프로젝트 완성 및 배포 코드 스플리팅 구현하기
Server-side rendering 구현하기
AWS에 프로젝트 배포하기
강의와 관련하여 더 상세한 상담 혹은 궁금한 점이 있으시다면 부담없이 김용성 매니저(02-517-0686)에게 전화주시거나 카카오톡으로 문의주세요!

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

nodereact

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

프론트엔드 개발을 더욱 깊이 있게 하기 위해서는 백엔드를 고려해야만 합니다. 우리 강의에서는 Node.js로 서버를 직접 구현하며 프론트엔드 뿐 아니라 백엔드 지식까지 쌓아 확장성 있는 지식을 지닌 프론트엔드 개발자로 거듭날 수 있게 만들어 드립니다.

react3_video

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

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

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

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

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

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

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

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

JavaScript code

js_code

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

HTML과 CSS code

html_css_code_2

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

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

일반등록가

120만 원