위치

요일

가능
시간
(날짜)

  • 오전 10시 - 오후 1시 (2019-08-17)
장소 : 서울대입구역 근처
추가비용 : 스터디룸 비용
준비물 : 개인 노트북 추가비용: 스터디룸 장소: 협의
₩20,000원 / 시간
₩300,000 / 총 5회 15시간
실시간 톡하기 찜하기
전지훈
nick
✔️리액트✔️ [8월반 모집]서비스 설계부터 배포까지! 요즘 핫한 React리액트 제대로 배우기
  • 신림
  • 3시간/회
  • 최대인원:3~6
  • ₩20,000/시간

튜터정보

  • 한국외국어대학교 글로벌캠퍼스 컴퓨터공학과
現) 5년차 웹 개발자

- 병역특례
- IT스타트업 창업
- (주)시옷 근무

[진행했던 프로젝트]
- 서비스 관리를 위한 백오피스 개발 (풀스택)
- 대한법률일보 인터넷 신문사 개발 (풀스택)
- Database Migration Integrity validation tool 개발
- 통계분석 서비스 프론트엔드 개발 (React.js)
- 머니넷 암호화폐 실시간 시세 위젯 개발(php)
- D.CAMP 홈페이지 리뉴얼 (Angular.js)
- 스타트업 미디어 서비스 ZIPBAC 창업 및 개발(ruby on rails)
- Blockchain based E-voting system(solidity)
- 회사홈페이지 제작(flask, html, css)
- 암호화폐 관련 트위터 실시간 스트리밍 텔레그램 봇 개발(python)

[경험]
- Blockchain based E-voting system 설계
- Blockchain based TCR system 설계
- D.CAMP 심사 시스템 자동화 설계및 컨설팅
- 서울대학교, 한국외대 그룹 및 1:1 코칭
- MNC 코인 ICO 백서 작성
- 경희대학교 서울캠퍼스 출강



안녕하세요! 웹 개발 5년차로 현재 프리랜서로 활동중인 전지훈입니다.

기술로 가치있는 세상을 만들기 위해 프로그래머의 꿈을 꾸며
컴퓨터공학을 전공했지만 정작 학교에서는 어려운 이론만 잔뜩 가르쳐줬습니다.
실제 어떤 프로젝트를 위한 웹서비스 개발에 대해서는 어디서도 가르쳐주지 않아
혼자 독학으로 수많은 시행착오를 겪어가며 공부를 하기 시작했어요.

그때마다 바로 옆에서 웹개발을 알려줄 사람이 있으면 좋을텐데 라는 생각을 참 많이 했습니다.

프론트엔드 개발자가 된 지금, 저는 다년간의 회사생활과 프리랜서 경험을 통해
다양한 프로젝트들을 진행해왔고 또 프로그래밍 언어를 가르치는 일을 하고 있어요!


"비전공자인데, 과연 내가 할 수 있을까?"

걱정하지 않으셔도 됩니다!
개발과는 전혀 연관없는 비전공자들을 대상으로 React.js는 물론, HTML, CSS, Flask 등
다양한 프로그래밍 언어들과 프레임워크를 가르쳐왔어요.

4차산업혁명 시대에, 이제 IT는 선택이 아닌 필수가 되었습니다.
여러분이 어떤 산업군에 있든, IT를 떼고 말할 수 없는 시대가 되었으며
개발자가 아니더라도 컴퓨터 언어를 이용하고 활용할 수 있는 능력을 갖고 있어야 합니다.

제 수업에서는 비전공자분들, 코딩 초보자/입문자분들도 쉽게 이해하실 수 있도록
내가 원하는 서비스를 만들기 위해 "공부하는 방법"을 가르쳐드릴게요!

프로그래밍, 절대 어렵지 않습니다!
저랑 같이 재밌게 공부해요!!

수업소개

★ 서비스 설계부터 배포까지! 요즘 핫한 React리액트 제대로 배우기 ★

✔ 수업안내

- 장소: 서울대입구역 근처
- 준비물: 개인 노트북 필참!
- 매주 10시간 정도의 시간을

주의!
* 한달 전에 절반 정도가 차고 있으므로 꼭 수업 신청 전에 꼭 문의 메세지 부탁드립니다.
* 꼭 수업을 따라오실 의지와 준비(수업 시간을 포함해 주당 10시간)가 되신 분들만 신청해주세요

* 15시간의 공부만으로는 리액트 마스터는 커녕 시작도 하기에 부족한 시간입니다.
* 다만 저희는 체계적인 커리큘럼과 과제, 강의로 가장 빨리 리액트로 개발을 '시작'하실 수 있는 최소한의 수준까지 가르쳐드리는 것을 목표로 합니다.
* 따라서 진도가 아주 빡빡하게 나가고 한주 한주 충분히 과제와 수업을 듣지 않으시면 따라오기 어렵습니다. (그 만큼 공부를 하고 과제를 해 주신다는 가정하에서 리액트로 프로젝트를 시작하고 작은 외주 정도는 하실 수 있는 수준으로 올려드립니다.)
* 여러 클래스를 진행하면서 과제를 해오고 수업을 통해 성장하실 분이 강의를 들어주실 때 저희와 수강생 분들 모두 만족도가 높았습니다.

꼭 강의를 듣고 따라올 준비가 된 분만 신청해주세요!




###############################################
* 7월반은 수강 신청이 완료되었습니다.


토요일 오전반

시작일시 : 8월 17일 시작

시간: 오전 10시 ~ 오후 1시


###############################################

✔ 당신이 리액트(React.js)를 배워야 하는 이유

ⓐ 퍼블리셔 혹은 프론트엔드 개발자라면, 필수적으로 알아두어야 할 언어입니다.
ⓑ 웹 뿐만 아니라, 앱, VR 등 상상하는 모든 것을 만들 수 있습니다.
ⓒ 2018년 현재 취업시장에서 Hot한 언어입니다.

ⓐ 퍼블리셔 혹은 프론트엔드 개발자라면, 필수적으로 알아두어야 할 언어입니다.

Facebook, Netflix, 직방, Between 등 많은 회사들이 리액트(React.js)를 사용하고 있어요.
비단 프론트앤드개발자 뿐만 아니라, 정말 많은 웹 퍼블리셔 분들이 html, css 뿐 만 아니라 React를 활용해서 작업을 하고 계십니다.


ⓑ 2018년 현재 취업시장에서 Hot한 언어입니다.

Indeed 구인 공고 기준으로, 2017년 jQuery, angular에 밀려 3위에 있던 React가
2018년에는 이 둘을 모두 앞서고 가장 많은 구인 공고 수를 보이고 있습니다.
React.js를 다룰 수 있는 능력은 정말 많은 수요를 갖고 있어요!


ⓒ 웹 뿐만 아니라, 앱, VR 등 상상하는 모든 것을 만들 수 있습니다.

리액트(React.js)는 웹에서 점유율을 매우 빠르게 확장시켜 현재는 공고한 대세를 이루고 있습니다.
게다가 앱, VR 등 다양한 영역으로 확장하고 있어요. React를 배워두시면 필요에 따라 모바일 개발 또한 쉽게 하실 수 있습니다!

✔ 수업의 강점

ⓐ 체계적인 커리큘럼에 따라 빠른 시간 내에 리액트를 학습하실 수 있도록 맞춤으로 도와드립니다.
단순 온라인 강의나 책만으로는 채워지지 못했던 내 코드 및 설계 습관에 대한 피드백을 1:1 화상으로 드립니다.
과제를 하면서 어려우셨던 부분, 혼자 공부하면서 어려우셨던 부분들을 수강생분의 필요에 맞춰 딱딱 채워드립니다.

ⓑ 실무에 반드시 필요한 핵심 개념 + 실습을 적절히 조화한 강의입니다.
빠른 시간안에 리액트를 다루고 이해하실 수 있도록, 체계를 잡아드립니다. 처음부터 배우기에는 불필요한 심화 내용들, 개발을 해 가면서 천천히 이해해도 될 자주 사용하지 않는 API소개는 강의에서 과감히 배제했습니다.
당장 리액트 프로젝트에 투입되었을 때 기본적으로 아셔야할 핵심 내용들 위주로 가르쳐드립니다. 그리고 강의에 그치지 않고 직접 만들어보며 좀 더 재밌게 체득하도록 도와드립니다.

ⓒ 깊이 있는 지식을 얻을 수 있도록 학습자료 제공해드립니다.
5번의 강의만으로 리액트를 완전히 마스터하기는 현실적으로 쉽지 않습니다.
다만, 추가적으로 어느 부분을 공부하셔야 할지, 그리고 어떤 부분을 연습하셔야 할지에 대한 체계적인 내용을 학습자료로 전달해 드립니다.
또한 혹시나 수업을 빠지시거나 중간에 놓치시는 부분이 있더라도 따라오시고 공부하실 수 있도록 추가 학습자료로 모든 학습내용을 정리해서 드립니다.


✔ 수업 진행방식

ⓐ 웹으로 정리된 예습 자료를 통한 기본 개념 이해, 간단한 실습 + 영상자료
ⓑ 개념 설명과 실습이 조화된 강의 + 심화 및 복습용 교육자료
ⓒ 응용 및 이해를 위한 과제 제출, 제출 과제에 대한 1:1 코드 리뷰 / 피드백
ⓓ 슬랙을 통한 실시간 Q&A

ⓐ 웹으로 정리된 예습 자료를 통한 기본 개념 이해, 간단한 실습 + 영상자료
웹사이트를 통해 모바일과 데스크탑 모두에서 쉽게 교육자료를 보실 수 있습니다. 교육 홈페이지에서 수업 시작 전에 알아 두면 좋은 개념과 추가 공부자료를 제공해 드립니다. 수강생분의 배경지식과 실력에 따라 필요하신 부분들을 찾아보고 공부하실 수 있게 도와드립니다.

ⓑ 개념 설명과 실습이 조화된 강의 + 심화 및 복습용 교육자료
수업은 실무에서 다뤄지는 핵심 개념과 강의 내용에 대한 자료는 모두 정리된 자료로 드립니다. 수업시간에 사정이 있으셔서 못 나오시거나 이해가 더 필요하실 때는 사이트에 들어가셔서 확인하실 수 있습니다.
추가적으로 수업시간에 미처 다루지 못했지만 알아두시면 좋을 내용+추가 공부를 위한 교육자료들에 대해서도 정리가 되어 있습니다. 참고해주시면 정말 많은 도움이 되실거에요.

ⓒ 응용 및 이해를 위한 과제 제출, 제출 과제에 대한 1:1 코드 리뷰 / 피드백
수업시간에 간단한 실습으로 배운 내용을 과제를 풀어보면서 보다 깊이 있게 이해하실수 있도록 도와드립니다. 제출하신 과제는 메인 튜터와 보조 튜터가 직접 1:1화상 코드리뷰 및 피드백을 해 드립니다. 과제를 진행하면서 어려우셨던 부분이나, 코드 작성하는 습관에서 개선할 수 있는 부분들을 체계적으로 짚어드립니다.

ⓓ 슬랙을 통한 실시간 Q&A
모든 수강생 분들은 Q&A를 위한 슬랙방에 초대됩니다. 이 방을 통해서 리액트 및 프론트앤드 개발에 대한 여러가지 교육 자료들을 전달해 드립니다. 여러 외주나 채용 기회를 공지해드리고 있습니다. 또한 주기적으로 수강하셨던 분들과 함께 네트워킹 파티 및 교류를 위한 식사 자리도 진행하고 있습니다.

수업대상

  • ✔프론트앤드 개발자로취직을 원하시는분

    프론트앤드 개발자로 근무한 경험을 바탕으로, 실무에서 반드시 익히고 알고 있어야 할 개념들에 관해 설명해드립니다.또한 실무를 하는 중에 부딪힐 수 있는 문제를 해결하기 위해 공부해야 될 부분과
    면접 때를 위해 공부해야 할 개념들에 대해서도 잡아드립니다. 현업에서 일하고 계신 개발자 분들이 1:1 화상 피드백을 통해 일반 강의만으로는 채워질 수 없는 코드 리뷰와 맞춤형 피드백을 해 드립니다.
    실제 취직을 준비하시는 분들이 많이 찾아주셨고 또 만족하신 분들이 많았습니다.
    (현 수강생 분들 중에도 프론트앤드 개발자 취직/이직 준비를 하시면서 면접 혹은 및 포트폴리오 준비를 도와드리고 계시는 분이 계십니다.)


    ✔ 퍼블리싱 혹은 웹 디자인에서 React, JavaScript로 영역을 확장하고 싶으신 분

    html, css에 대해서 잘 알고 있다고 하시더라도, 리액트나 자바스크립트에 대한 지식의 부족으로 인해 한계를 느끼시고 계시던 디자이너 및 퍼블리셔 분들이 수업을 많이 찾아주셨습니다.
    프론트에서 리액트는 사실상 표준이라고 봐도 무방할 정도로 최근 개발되는 서비스에는 적용되는 경우가 많습니다. 퍼블리싱 협업을 위해서도 리액트에 대한 이해의 유무가 매우 중요하게 작용하기도 합니다.
    Jquery만 활용하고 계셨다면, 이번 기회를 통해 javascript및 프론트 사이드 개발에 대한 이해를 심화시키는데 큰 도움이 되실 수 있습니다. (실제 수강생 분 중에는 퍼블리셔로 근무하시다가 저희 수업을 통해 react를 배우셔서 회사에 적용 및 저희와 같이 외주 프로젝를 진행하시는 분도 계십니다.)


    ✔ 혼자 React를 공부하다가 의지부족/어려움 등으로 실패하신 분

    기초는 여러 온라인 강의를 통해 배우긴 했지만 무언가를 만들기에는 더 공부가 필요한 것 같고,
    그렇다고 혼자 공부하려니 뭐를 해야 될지 모르겠는 분!프로젝트와 간단한 서비스 구현 과정을 통해 만들어가는 것에 재미를 붙이실 수 있도록 도와드립니다. 쉽게 배우고 익히고 혼자 혹은 함께 서비스를 만들어가면서 흥미를 느끼실 수 있도록 도와드립니다. (실제 수강생 분들 중에서는수업을 열심히 들으시고 난 뒤 다른 수강생 분들과 같이 주말마다 모여서 작은 미니 프로젝트를 진행하고 계신 분도 계십니다! 용기를 내세요.)

커리큘럼

1회차

첫 주차는 리액트에서 반드시 알아야 할 필수적인 내용들을 빠르게 이해하고 다뤄보는 시간입니다. javascript 를 다루기 위해 필요한 기본적인 개념들에 대한 설명들과 react의 핵심 기능을 훑어보고 본격적으로 react의 세상으로 deep dive할 준비를 합니다.

- 수업 : 카운터 만들기
1. 리액트란 무엇인가?( SPA, 언제 React를 쓰는가 등)
2. 리액트의 특징(DOM, Virtual DOM ,단방향 데이터 흐름, 컴포넌트 구조 등)
3. JavaScript (ES6) 기본 개념(class, let, const, arrow function 등)
4. JSX 기초(기본문법, 개념 ClassName, style등)
5. Component, Props, State 다루기 (기초 문법, setState, lifting up state)
6. Event 다루기( 숫자 증가 / 감소 카운터 만들기)
7. Lifecycle (개념 설명, 예제)

2회차

둘째 주차는 본격적으로 1주차 때 배운 React의 기능들을 실습해 봅니다. 수업 과정을 통해 리액트의 기초 기능들을 다루면서 발생하는 많은 오류 사례들과 이의 원인, 그리고 피할 수 있는 best practice들을 가르쳐 드립니다. 늘 이해하지 못한 채 따라치기 급했던 리액트를 벗어나서 원리를 이해하고 문제 발생시 에러 로그를 보면서 수정하실 수 있도록 탄탄한 이해력을 기를 수 있도록 도와드립니다.

- 수업 : 구글 Keep 메모 앱 클론하기.

디버깅 하기
리액트 설계하기(thinking in react)
Event와 form 이해하기
List와 key다루기
조건부 랜더링
저장, 삭제 기능 구현하기

3회차

보다 깊은 리액트의 내용들을 활용하면서, 본격적으로 웹 서비스 개발을 위한 기본 개념들을 배우는 시간입니다. 앞선 2 주차 동안 배운 내용들은 React를 통해 어떻게 데이터들을 보여줄 것인가? 에 대한 내용들을 배웠다면, 이번 시간 부터는 자바스크립트를 통해 어떻게 서버와 통신하고 데이터를 불러올지에 대한 기초 개념과 방법들을 Youtube Api를 활용해 배웁니다.

-수업 : Youflix(netflix ui의 youtube player)만들기

1. Youflix 만들어보기(설계, 기획, 구조 잡기)
2. Children props
3. 컨테이너 컴포넌트와 프레젠테이셔널 컴포넌트의 활용
4. 라우터(React Router)
5. 동영상 검색기능 구현(api 통신)

4회차

실무에서는 리액트만으로 서비스를 만들지 않습니다. 데이터 구조가 복잡해지고 규모가 커지면 반드시 redux와 같은 상태 관리 라이브러리를 쓰게 됩니다. 액션, 리듀서, 스토어를 활용해 규모가 큰 서비스를 어떤식으로 개발하는지, 로직과 UI 분리를 통해 프로젝트의 기능들을 보기 쉽게 관리하는 법에 대해 배웁니다.

- 수업 : Youflix소스를 Redux코드로 변경하기

1. FLUX 패턴
2. Redux(개념, why?, 비동기를 위한 미들웨어 redux-thunk)

5회차

마지막으로 저희가 개발한 서비스를 웹에 배포해보는 시간입니다. AWS가 무엇인지, 클라우드 서비스가 무엇인지에 대한 내용을 이해해 본 뒤, React build와 S3와 Cloud Front를 통해 실제 코드를 배포 해 봅시다.

- 수업 : Youflix(netflix ui의 youtube player)를 AWS를 이용해서 배포하기

1. React Build
2. S3배포
3. Cloud Front 설정

리뷰(11)

리뷰쓰기
4.9
  • 커리큘럼
  • 전달력
  • 준비성
  • 친절도
  • 시간준수

실시간톡

실시간 톡하기

위치

지도가 들어갑니다.