위치

요일

가능
시간
(날짜)

  • 오후1시-4시 (2019-09-07)
장소 : 강남역 5번출구 강의장
추가비용 : 강의실 대여료 2만원
수강신청 하셨을 때의 기대만큼 좋은 강의가 될 수 있도록 하겠습니다.
₩20,000원 / 시간
₩360,000 / 총 6회 18시간
실시간 톡하기 찜하기
Jordan
자운
[9월 REACT] 실무자에게 배우는 리액트 웹프로그래밍의 모든 것!
  • 강남
  • 3시간/회
  • 최대인원:6~12
  • ₩20,000/시간

튜터정보

  • 서울대학교 컴퓨터공학부
7,8월 마감


( * 회사 리액트 강의 신청은 별도 문의 해주세요)


안녕하세요, 저는 현재 주식회사 바디메이커에서 개발팀장을 맡고 있으며,

주니어, 신입 웹 프론트엔드 개발자들을 가이드 하고 있습니다.

현재는 회사에서 사용자 체성분 통계 분석 프로그램(C++),

분석한 자료를 바탕으로 리액트를 이용해 시각화 모델을 제작하고 있습니다.

대표적인 프로젝트로 리액트 + NodsJS로 입점형 쇼핑몰을 개발한 경험이 있으며,

사이드로는 학내 구성원들이 사용하고 있는 리액트로 만든 어플리케이션을 관리하고 있습니다.

또한 델 코리아, 이베이 등의 회사를 대상으로 8주간 리액트 프로그래밍 출강 경험 있으며,

중소 벤처 기업부 주관 기 창업자들을 대상으로 한 프로그래밍 교육을 진행했습니다.

그 외 자잘한 외주 개발 건들은 생략하겠습니다.


강의소개에 앞서 제가 프로그래밍 강의에서 가장 중요하게 생각하는 것들은 다음과 같습니다.


① '효율적인 코드작성법'

같은 개발환경, 프레임워크를 사용해도 어떤 코드를 작성하느냐에 따라 결과물은 천차만별 입니다.

효율적인 코드란 목적이 무엇이냐에 따라 그 의미가 달라진다고 생각합니다.

복잡한 연산을 빠르게 마치는 작업을 할 때는 보다 영리한 알고리즘을 짜는 것이 요점이 될 것이고,

해야할 양은 많은데 단기간에 작업해야할 경우 세세한 작업은 생략하고

큰 부분만을 신속하게 구현하는 것이 효율적인 코드가 될 것입니다.

이런 맥락에서 웹 개발에서의 효율적인 코드란, 저는 '읽기 쉬운 코드'라고 생각합니다.

단순 알고리즘 테스트 문제를 푸는 것이 아닌 웹 개발 프로젝트는 그 코드의 양 자체가 방대합니다.

그래서 잘 알아 보는게 중요합니다.

코드가 번잡하면 설령 본인이 작성한 코드라도 일주일만 지나면 상당히 알아보기 힘듭니다.

본인이 알아보기 힘들면 남은 말할 것도 없습니다.

특히 웹 개발은 버전관리 및 동료와의 협업이 필수입니다.

☞ 보다 쉽고 명료한 코드 스타일링 작성법을 전수해드리겠습니다


② '개념 적용'

리액트 자체는 배우기 쉽습니다. 하지만 적용하는 것이 어렵습니다.

리액트 컴포넌트 구조화를 어떻게 할지, redux를 언제 어떻게 활용할지,

SSR과 코드스플리팅을 어떻게 섞어야 제대로된 퍼포먼스를 보여줄 수 있을지 등이 어렵습니다.

특히 리액트는 개념이 20%, 적용이 80%이라고 해도 과언이 아닙니다.

배운 개념은 반드시 적용 해봐야 100% 이해할 수 있습니다. 본 수업은 후자에 집중합니다.


③ '실무형'

우리는 자신이 만들고 싶은 것을 만들기 위해, 즉 써먹기 위해 웹프로그래밍을 배웁니다.

state, props 등 단순 개념만 배워서는 실제 개발할 때 실질적인 도움을 주지 못합니다.

미분을 할 줄 알지만 미분을 적용해야 할 문제를 알아보지 못하고 적분을 적용하면 안됩니다.

마찬가지로 웹개발에서도 개념을 알았으면 실무적인 수준에서 적용할 줄 알아야 합니다.

또한 개발을 보다 편리하게 할 수 있도록 도와주는 도구들이 있다면,

이를 적극적으로 사용해 생산성을 높여야 한다고 생각합니다.

굳이 쉬운길을 두고 어려운 길로 돌아갈 필요가 없기 때문입니다.

☞ 리액트 뿐만 아니라 실무에서 널리 사용하고 있는 각종 편리한 툴들을 소개해드립니다.


④ '시간절약'

돈주고 배우는 강의는 그에 걸맞는 대가가 반드시 있어야 한다고 생각합니다.

저는 오프라인 학원에서 강의 경험이 있습니다.

많은 분들께서 훌륭한 강의를 제공해 주시지만,

간혹 가다 차라리 공식문서보면서 개발하는게 낫겠다는 생각을 할 때가 있었습니다.

사실 영어에 자신이 있거나 문서정독에 자신이 있는 분들, 혹은 비교적 시간이 널널하신 분들은

리액트 공식문서를 보시면서 개발하셔도 됩니다. 저 또한 그렇게 공부했습니다.

하지만 돈을 주고 배운다는 것은 단순히 문서를 읽는 것을 넘어

혼자 배우려면 오래걸리는, 실무에서 쓰이는 여러 꿀팁들을 제공 받아야 한다고 생각합니다.

☞ 강의 기간동안 최대한 많은 것들을 가져가실 수 있도록 풍부한 강의 구성을 했습니다.

수업소개

- 개강일 : 9월 7일

- 시간 : 오후1시 ~ 오후4시

- 장소 : 강남역 9번출구 강의장

- 준비물 : 개인 노트북 지참

시간 절약을 위해 프로젝트 환경은 슬랙을 통해 미리 구축합니다.

─────────────────────────


✔ 공식문서로는 배우기 힘든 컴포넌트 구조화부터 실무에서 다양하게 쓰이는 노하우까지

리액트는 기본적인 틀이 있을 뿐 다른 프레임워크나 라이브러리에 비해 그 자유도가 상당합니다.

그 자유도가 어떻게 보면 득이 될 수 있지만 다른 한편으로는 독이 될 수 있습니다.

어떤 코드를 어떤 패턴, 아키텍쳐로 작성하느냐에 따라 결과물의 질은 천차만별이 될 수 있습니다.

리액트 입문 혹은 갈피를 잡지 못하시는 분들에게 보다 나은 리액트 활용법을 알려드리겠습니다.

☞ 공식문서 정독만으로는 배우기 힘든, 실무에서 쓰이고 있는 노하우까지 가져가실 수 있습니다.


✔ 프로젝트 중심으로 리액트 핵심개념을 보다 탄탄하게

단순히 개념을 아는 것과 자신이 만들고 싶은 프로젝트를 개발하는 것은 다른 차원입니다.

실제 프로젝트들을 진행하면서 어떤 상황에 어떤 개념이 쓰이는지 이해할 수 있도록 도와드립니다.

단순 주입식이 아닌, 특정 상황에서 "무엇"이 "왜" 나와야하는지를 함께 생각해 봅니다.

또한 제가 진행하고 있는, 그리고 이미 완료된 프로젝트들을 살펴보면서 실제 적용법을 살펴봅니다.

☞ 수동적인 학습이 아닌, 함께 생각해보며 스스로 코딩할 수 있는 능력을 키워드립니다.


✔ 백엔드 및 디플로이 가이드 제공

백엔드는 노드, 장고, 레일즈 등 여러가지 언어가 있습니다.

저는 그 중에서 노드를 오랫동안 사용해 왔고, 현업에서도 개발하고 있습니다.

노드는 다른 서버언어와 달리 자바스크립트로만 작성할 수 있다는 장점이 있으며,

npm, yarn을 사용하는 리액트와 가장 잘 어울리는 백엔드 언어이기도합니다.

본 수업은 리액트에 집중하되 부가적으로 노드를 이용해 기본적인 서버구성을 해보고,

백엔드 개발자들과의 협업방식에 대한 학습을 함으로써 실제 개발 프로젝트 흐름을 살펴봅니다.

☞ 즉, 만들고 싶은 서비스를 직접 구성하고 만들 수 있게 도와드립니다.

수업대상

  • 추천)

    ✔ 리액트를 처음 접하시는 분

    대부분의 수강생 분들이 리액트를 처음 접하시는 분들입니다.

    기초적인 자바스크립트 실력이 있다면, 충분히 따라오실 수 있도록 수업을 구성했습니다.

    다만 뒤로 갈수록 내용이 많아지기 때문에 복습은 필수입니다 :)


    ✔ 퍼블리셔에서 프론트엔드 개발자로의 전향을 생각하고 계시는 분

    프론트엔드 개발자들에게 리액트를 능숙하게 다루는 것을 요구하는 회사들이 많아지고 있습니다.

    로켓펀치 스타트업 공고 기준 2019년 현재 리액트가 프론트엔드 수요 1순위입니다.

    경쟁력있는 프론트엔드 개발자로의 전향을 원하신다면 리액트를 적극 추천드리며,

    이직 시 실무에서 필요하는 역량들을 충분하게 쌓으실 수 있도록 제가 최대한 도와드리겠습니다.


    ✔ 무언가를 만들어보시지 않고 자바스크립트 강의만 들어오시거나 책만 읽어오신 분

    우리는 실제로 써먹기 위해 공부합니다.

    지금까지 계속해서 배우는 것에만 초점을 맞추셨다면 이제는 정말로 만들어 볼 차례입니다.

    저는 프로젝트 중심으로 수업하니다.

    state가 뭔지 props가 뭔지 이론상으로나 말로만 떠들지 않고 코드로 보여드리겠습니다.

    "6주 후 무언가를 내손으로 만들어보고 싶다",

    "이제는 책으로 그만 배우고 내 작품 만들어보고 싶다"

    하는 분들에게 추천드립니다.


    ✔ 배움에 욕심이 있으신 분

    본 수업은 내용이 많습니다. 사실 6주라는 시간은 리액트를 다루기에 결코 긴 시간이 아닙니다.

    그럼에도 불구하고 6주라는 시간에 최대한으로 필요한 내용들을 녹여 전달하려고 노력할 뿐입니다.

    따라서 복습을 꾸준히 하지 않는다면 강의 내용에 압도당할 수 있습니다.

    하지만 열심히 하겠다는 의지만 있으시면 제가 최대한 도와드립니다.

    모르시는 부분들은 이해가 될 때까지 계속해서 slack dm으로 질문해주시면 됩니다.

    6주간 리액트를 제대로 한 번 배워보겠다는 의지가 있으신 분들에게 추천드립니다.


    ✔ 리액트를 '제대로' 배우고 싶은 컴공 전공자, 비전공자,퍼블리셔 등 그 누구나



    비추천)

    ✘ 웹프로그래밍이 아예 처음이신분

    ✘ 복습이 두려우신 분



    조건)

    ✔ HTML, 자바스크립트의 기초가 있으신분 (함수가 뭔지, 객체가 뭔지정도는 알아야해요!)

    (ES6의 map, filter, reduce, promise, async-await등은 es6는 강의에서 함께 살펴봅니다)

커리큘럼

1회차

시작 전) 프로젝트 환경 세팅

* 리액트를 본격적으로 활용하기에 앞서 여러 중요 개념들을 살펴봅니다.

리액트 소개 및 작동방식에 대한 이해
JSX 기초문법
state and props
컴포넌트에 대한 이해
이벤트 핸들링
Life Cycle API

2회차

*간단한 투두리스트를 만들어보고 이를 컴포넌트별로 쪼개보면서 리액트 구조화에 대해 학습하고 최적화하는 방법까지 알아봅니다.

*SASS, Styled Components에 대해 학습하고 이를 각각 적용해봅니다.
리액트 최적화를 위한 불변성 관리를 도와주는 라이브러리를 사용해봅니다.

간단한 투두리스트 실습
리액트 구조화하기
리액트 컴포넌트 디버깅
리액트 컴포넌트 최적화
컴포넌트 스타일링 (Sass or Styled Components?)
리액트 불변성 관리 (Immutable or Immer?)

3회차

*그동안 배운내용들을 활용해 외부 API를 연동하여 새로운 프로젝트를 진행합니다.
리액트 라우터를 학습하고 여러 화면으로 구성된 SPA를 만들어 봅니다.

*전역관리 상태를 도와주는 컨텍스트 API를 사용해보고 리덕스와의 차이점을 알아봅니다.
외부 라이브러리를 사용할때 자주 등장하는 HOC를 알아보고 그 외 여러가지 고급 리액트 패턴에 대해 학습합니다.

외부 API연동 프로젝트 실습
리액트 라우터
Context API
HOC에 대한 이해
custom HOC
고급 리액트 패턴 (Render Props & Compound Component etc)

4회차

*리액트 16.8 이후로 훅이 등장했습니다.
훅은 함수형 컴포넌트에서는 사용할 수 없었던 state와 life cycle API를 비롯해 HOC와 비슷한 여러가지 기능을 제공합니다.
리액트 개발자라면 이제부터 훅은 필수적으로 알아야 하는 요소입니다.
훅의 여러가지 기능을 배우고 이를 새로운 프로젝트에 적용해봅니다.

*리액트는 상태관리 및 구조화가 전부라 해도 과언이 아닙니다.
상태관리를 쉽게 할 수 있도록 도와주는 리덕스를 배우고 새로운 프로젝트를 만들며 적용해봅니다.
또한 유저 인터페이스를 보다 향상시키기위한 컴포넌트 비동기로딩을 학습하고 코드스플리팅을 적용하여 리액트 어플리케이션 최적화를 진행해봅니다.

-리액트 훅에 대한 이해
-훅을 이용한 동일한 코드 작성
-리덕스에 대한 이해 (Redux or MobX?)
-리덕스를 이용한 프로젝트 실습
-리액트 컴포넌트 비동기로딩
-코드스플리팅을 통한 리액트 최적화

5회차

*전 차시에 배웠던 리덕스를 복습하고 이를 심화적으로 학습합니다.
리덕스가 제공하는 여러가지 미들웨어들을 알아보고 다양한 예제를 통해 이를 적용합니다.

*TDD란 '테스트주도개발'을 의미합니다. 이 단원에서는 TDD가 무엇인지 알아보고 왜 필요한지 학습합니다.
소프트웨어의 기능들을 잘개 쪼개어 개발하는 유닛테스팅을 비롯하여 테스트 자동화에 대해서도 알아봅니다.
또한 Jest와 Enzyme을 사용해 배운 내용들을 적용시킬 준비를 마칩니다.

-리덕스 심화
-리덕스 미들웨어
redux thunk
redux saga
etc
-리액트 테스팅 기초 (Jest & Enzyme)
-리액트 TDD

6회차

*자바스크립트는 weakly typed언어입니다. 하나의 변수에 숫자도, 문자도 집어넣을 수 있습니다
자유도가 높다는 장점이있지만 한편으로는 에러방지에 취약하다는 단점이 있습니다.
리액트 프로젝트에 타입스크립트를 얹음으로써 실수를 방지하고 개발도구를 더욱 적극적으로 활용해 봅니다.

*SPA는 구글을 제외하고 SEO(검색엔진최적화)에 취약하다는 단점이 있습니다.
이를 해결하기 위한 서버사이드렌더링(SSR)을 실습해봅니다.
마지막으로 실제 개발 프로젝트들이 처음부터 끝까지 어떤 흐름으로 진행되는지 살펴봅니다.

-리액트에 타입스크립트 얹기 (Why TypeScript?)
-When to use SPA or SSR?
-서버사이드렌더링 실습 (nodejs + express)
-서버사이드렌더링 추가실습 (코드스플리팅 + SSR)
-실제 개발 프로젝트 흐름에 대하여



#마치면서

다른 분야도 마찬가지겠지만 특히 그 중에서도 웹 개발은 그 트렌드가 정말 빠르게 변하고 있습니다.

불과 몇 년 전까지만 해도 리액트를 기술 스택으로 요구하는 회사들이 많지 않았습니다.

비단 리액트 뿐만이 아니라 nodejs, graphql, angular, vue 등도 마찬가지죠

라이브러리나 프레임워크들은 계속해서 등장하고 배워야할 주제는 점점 바뀌고 있는데

변화에 익숙치 않아 이전 것을 고수하는 것은 개발자로서는 정말 지양해야할 태도라고 생각합니다.

(참고로 제이쿼리는 2019년 프론트엔드 개발자 로드맵에서 제외되었습니다)

물론 트렌드가 전부는 아닙니다.

트렌드만을 요구하다 기본적으로 해야할 일을 제대로 못하면 오히려 역효과를 볼 수 있기 때문입니다.

하지만 카카오, 라인과 같은 대표적인 IT기업들 및 여러 스타트업들의 웹프론트 채용공고를 보시면

기본적으로 리액트, 뷰, 앵귤러 3대 중 한개는 능숙하게 다룰 것을 요구하고 있습니다.

따라서 보다 경쟁력 있는 개발자가 되길 원하신다면, 소위 핫한 언어를 배우시길 추천드립니다.

리뷰(10)

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

실시간톡

실시간 톡하기

위치

지도가 들어갑니다.