위치

요일

가능
시간
(날짜)

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

튜터정보

  • 서울대학교 컴퓨터공학부
#5월 마감#

안녕하세요, 2019년 3월부로 탈잉에서 강의를 시작하게 되었습니다.

저는 현재 학교를 다니면서 동시에 주식회사 바디메이커에서 CTO 개발직을 맡고 있으며

사용자 인바디 통계프로그램(C++), 그리고 Fitness Data Visualizer를 리액트로 제작하고 있습니다.

대표적인 프로젝트로 노드와 리액트를 사용한 입점형 쇼핑몰을 단독으로 개발했으며

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


강의소개에 앞서 제가 프로그래밍 강의에서 가장 중요하게 생각하는 세 가지를 말씀드리려 합니다.


① 첫번째로는 '효율적인 코드작성법' 입니다.

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

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

오래 걸리는 연산을 빠른 시간에 마치는 작업을 할 때는 보다 영리한 알고리즘을 짜는 것이 요점이 될 것이고,

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

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

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

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

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

코드가 번잡하면 설령 본인이 작성한 코드라도 일주일만 지나면 '이게 뭐지?'라는 생각을 하게 됩니다.

내가 알아보기 힘들면 남은 말할 것도 없습니다. 특히 웹 개발은 버전관리 및 동료와의 협업이 필수입니다.

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



② 두번째로는 '실무형' 입니다.

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

state, props 등 단순 개념만 배워서는 추후 프로젝트 진행시 실질적인 도움을 주지 못한다고 생각합니다.

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

개념을 알았으면 현재 진행하고 있는 프로젝트 혹은 이미 진행된 프로젝트 코드를 보면서

어떤 개념이 어떻게 적용되었는지 알아봐야합니다.

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

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

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

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



③ 마지막으로는 '시간절약' 입니다.

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

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

대부분의 강사분들께서 훌륭한 강의를 하시지만,

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

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

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

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

배우려면 비교적 오랜 시간이 걸리는, 실무에서 쓰이는 부가적인 것들을 제공 받아야 한다고 생각합니다.

그래야 돈주고 배우는 의미가 있다고 생각합니다.

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

수업소개

###3월, 4월, 5월수업 조기마감###

- 개강일 : 6월 15일

- 시간 : 오후1시 ~ 오후4시 (오후 4시반)

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

- 준비물 : 개인 노트북 지참 - ubuntu 사용자는 미리 알려주세요 :)

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

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


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

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

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

리액트에 입문하시는, 혹은 갈피를 잡지 못하시는 분들에게 리액트를 보다 잘 활용하실 수 있도록 도와드리겠습니다.

✓ 단순히 공식문서 정독만으로는 배우기 힘든, 현재 실무에서 쓰이고 있는 노하우까지 가져가실 수 있도록 준비했습니다.


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

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

실제 프로젝트들을 진행하면서 어떤 상황에 어떤 개념이 쓰이는지 명확하게 이해하실 수 있도록 강의를 구성했습니다.

단순 주입식이 아니라 화면에 띄워놓은 코드를 직접 타이핑하면서 함께 따라가실 수 있도록 준비했습니다.

또한 제가 진행하고 있는, 그리고 진행해 온 이미 디플로이 된 리액트 프로젝트 코드를 훑으면서

✓ 어떤 상황에서 어떤 개념이 실제 프로젝트에서 어떻게 적용되었는지 함께 살펴볼 예정입니다.


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

백엔드는 노드, 파이썬, 루비온 레일즈, 고 등 여러가지 언어가 있습니다.

저는 그 중에서도 노드 제이에스를 선호하고, 노드를 오랫동안 사용해왔습니다.

이는 자바스크립트 엔진을 기반으로 만들어진 런타임 백엔드 랭귀지입니다.

노드는 다른 서버언어와 달리 자바스크립트로만 작성할 수 있어 진입장벽이 그리 높지 않습니다.

또한 리액트와 가장 잘 어울리는 백엔드 언어이기도합니다.

우선 수업의 본질을 흐리지 않기 위해 리액트에 집중합니다.

그리고 과정이 끝나면 부가적으로 노드 강의를 진행하며 기본적인 서버구성 및 S3 디플로이까지 진행합니다.

✓ 즉, 만들고 싶은 서비스를 직접 배포할 수 있게 도와드립니다.


● 소규모 클래스 & 조교 선생님과 함께하는 피드백 ●

저는 패OO캠OO 이라는 IT학원에서 조교 경험이 있습니다.

한 클래스에 30명 남짓한 인원을 두 명이서 관리하기가 참 힘들었습니다.

고로 한 클래스 당 인원을 최소 4명, 최대 8명으로 제한하며 초과시 분반, 다음 차수에 신청을 받습니다.

강의는 성균관대에서 컴퓨터공학을 전공하고 있는 실력 있는 조교선생님과 함께 진행합니다.

✓ 수업이 끝나면 질의응답 시간을 가지며 해결하지 못한 궁금증은 수강생 전용 슬랙채널을 통해 해결합니다.

수업대상

  • 추천)

    -리액트를 배우고 싶은 비전공자, 컴공 전공자, 퍼블리셔 등 그 누구나

    -무엇보다 '제대로' 리액트를 배워보고 싶으신 분


    비추천)

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

    -리액트를 이미 수준급으로 다루고 계시는 실무자


    조건)

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

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

커리큘럼

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?)
-서버사이드렌더링 구현 시 주의사항
-실제 개발 프로젝트 흐름에 대하여

+ α주차 (BONUS)

NodeJS로 API서버 구축
AWS S3배포





#마치면서

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

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

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

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

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

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

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

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

아시다시피 여러 기업에서 아직도 제이쿼리를 많이 사용하고 있습니다.

이는 이미 구축해놓은 시스템과 인력을 한번에 갈아엎지 못하는 딜레마가 있기 때문입니다.

하지만 각종 스타트업을 비롯한 카카오, 라인과 같은 대표적인 IT기업들의 웹프론트 채용공고를 보시면

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

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

리뷰(1)

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

실시간톡

실시간 톡하기

위치

지도가 들어갑니다.