다회차 수업
02.08(토)
13:00~16:00
|
강남
상세장소 : 강남역 1번출구 강의장
강의실 대여료 3만원있습니다.

모든것은 코드로 보여드리겠습니다.

실시간 톡
₩20,000원 / 시간
₩360,000 / 총 6회 18시간
Jordan
자운
[2월 React] 실무자에게 배우는 리액트 웹프로그래밍의 모든 것!
찜하기
  • 3시간/회
  • 최대인원:6~15
  • ₩20,000/시간

튜터정보

  • 서울대학교 컴퓨터공학부
✔ 리액트 버전업(16.8이후)에 따라 강의자료를 새롭게 개편했습니다.

✔ 실무에서 보다 유용하게 사용하실 수 있는 자료들로 열심히 준비했습니다.

✔ 개강일은 2월 8일입니다. 수강 하셨을 때 결코 돈 아깝다는 생각이 들지 않게끔 최선을 다하겠습니다.


안녕하세요, 저는 현재 주식회사 바디메이커에서 개발자로 일하고 있는 구자운입니다.

주로 웹개발을 하고 있으며 이외에도 여러 분야의 개발에 관심을 가지고 부지런히 노력하고 있습니다.

지난 10월 이후로 리액트 버전업에 따른 강의 내용을 새롭게 개편해야 겠다는 생각을 했습니다.

그동안 두달에 걸쳐 "최대한으로 유용하게 써먹을 수 있는" 강의 내용 구성을 위해 많이 고민했습니다.

보다 새롭고 알찬 내용들로 즐겁고 만족스러운 강의를 제공해 드리겠습니다.

강의내용이 궁금하시다면 하단 커리큘럼을 참고해주세요 :)


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


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

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

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

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

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

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

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

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

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

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

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

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

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


② '개념 적용'

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

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

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

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

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


③ '실무형'

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

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

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

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

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

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

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

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


④ '시간절약'

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

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

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

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

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

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

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

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

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

수업소개

- 개강일 : 2월 8일

- 시간 : 오후1시(1시 10분) ~ 오후4시(4시 20분)

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

수업대상

  • 추천)

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

    대부분의 수강생 분들께서 리액트를 처음 접하십니다.

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

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


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

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

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

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

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


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

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

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

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

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

    "이제는 무언가를 내손으로 만들어보고 싶다",

    "이제는 책이나 다른 개발자들 블로그 보는걸 좀 줄이고 내 작품 만들어보고 싶다"

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


    ✔ 배움에 욕심이 있으신 분

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

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

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

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

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

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


    ✔ 리액트를 '제대로' 배우고 싶은 컴공 전공자

    c++이나 java로 자료구조나 알고리즘을 짜고 여타 다른 하드웨어 과목을 수강하시느라 따분하셨다면,

    리액트를 이용한 웹 개발을 통해 또 다른 재미를 느껴보는 것은 어떨까요?

    저와 함께 프론트엔드 개발은 물론이고 전체적인 웹 개발 플로우에 대해 소통해보세요.



    비추천)

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

    ✘ 스케줄상 복습이 어려우신 분

    ✘ 새로운 것을 받아들이는 일에 익숙하지 않으신 분



    조건)

    ✔ HTML, 자바스크립트 기초가 있으신 분. (HTML, 자바스크립트가 아예 처음이시라면 먼저 공부하고 오셔야 합니다)

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

커리큘럼

1회차

개강 전)
- 수강생 전용 카톡방, 슬랙 채널 개설 및 강의자료 배포
- 프로젝트 환경 세팅 (windows, macos, linux)

*리액트를 처음 접하시는 분이라면 리액트의 기본 개념들에 대해 정확하게 짚고 넘어가야할 필요성이 있습니다. virtual-dom을 이용해 리액트가 웹 브라우저에 렌더하는 방식을 정확히 이해하고 그로인해 가져올 수 있는 성능상 이점들에 대해 공부합니다.

*리액트 컴포넌트 작성법을 알아보고 state, props과 관련한 컴포넌트의 여러가지 특성들에 대해 알아봅니다. 또한 life cycle API를 살펴보며 컴포넌트의 렌더링 시점에 대해 이해합니다.

*간단한 CRUD를 실습을 통해 학습한 개념들에 대한 구체적인 이해를 돕고, 코드를 작성하면서 간과하기 쉬운, 올바르게 알아할 부분에 대해 확실하게 짚고 넘어갑니다.

리액트 작동방식에 대한 이해
JSX 문법과 컴포넌트 작성법
state and props
setState에 대한 올바른 이해
이벤트 핸들링
life cycle API에 대한 이해
CRUD실습을 통한 wrap-ups

2회차

*컴포넌트는 일반적인 함수처럼 '재사용 가능한' UI의 단위입니다. 따라서 컴포넌트를 기능별로 효율적으로 잘 쪼개서 사용하고, 이를 통해 컴포넌트 간에 원활한 소통을 하게 하는 것이 중요합니다. 이 단원에서는 컴포넌트 쪼개기 연습을 통해 컴포넌트 구조화 작업에 대해 공부합니다.

*컴포넌트 수가 많아지고 각 컴포넌트 안에 있는 내용들의 수가 많아지면 최적화를 해줄 필요가 있습니다. 최적화 작업을 통해 리액트 컴포넌트를 효율적으로 렌더하는 방법을 알아보고 이를 도와주는 라이브러리를 소개해드립니다.

*리액트에서는 sass, sass module, styled components등 다양한 방식을 통해 컴포넌트 스타일링을 할 수 있습니다. sass문법 자체나 styled-components문법 자체가 어려운 것이 아니라 어떻게 스타일을 구조화 하느냐가 어렵습니다. 따라서 리액트 프로젝트 스타일링에 대한 파일 구조화 작업을 진행합니다.

컴포넌트 구조화 작업
리액트 컴포넌트 디버깅
리액트 컴포넌트 최적화
컴포넌트 스타일링
컴포넌트 스타일링 폴더 구조화 작업
상태 불변성 관리를 위한 라이브러리
각종 유용한 개발 도구들

3회차

*외부 API를 호출하는 프로젝트를 진행해보고 클라이언트와 서버간의 API통신에 있어 발생하는 일반적인 문제점들, 그리고 그 해결책에 대해 학습합니다.

*리액트 라우터를 학습하고 여러 화면으로 구성된 SPA를 만들어 봅니다. 기존의 MPA와의 차이점에 대해 알아보고 각 방식의 장단점을 이해해봅니다. 또한 이를 이용해 기존에 만들었던 프로젝트를 변형해봅니다.

*리액트 16.8버전 이후로 훅이 등장하면서 이제는 HOC를 직접 작성할 필요가 없어졌지만 HOC패턴은 여전히 많은 라이브러리들에 등장합니다. HOC에 대해 학습하고 이와 더불어 여러가지 리액트 패턴에 대해 학습합니다.

*간단한 함수형 컴포넌트를 작성해보고 기초적인 훅의 개념들을 알아봅니다.

API연동 프로젝트 실습
리액트 라우터
Understanding of HOC
Custom HOC
HOC를 대체할 수 있는 react hooks
리액트 라우터를 이용한 프로젝트 리팩토링
Functional Components Basics

4회차

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

*훅의 여러가지 기능을 배우고 이를 '잘' 사용하는 방법에 대해 고민해봅니다.
리액트 16.8버전이 갓 나왔을때는 이미 회사에서 클래스 컴포넌트를 사용했고 이미 만들어진 클래스 컴포넌트를 훅으로 변형할 필요는 없었습니다. 2020년 2월이 되면 훅이 릴리즈 된지 1년이 되고 이제는 훅을 잘 사용할 줄 알아야 한다고 생각합니다.

*리액트는 상태관리 및 구조화가 전부라 해도 과언이 아닙니다.
상태관리를 쉽게 할 수 있도록 도와주는 대표적인 라이브러리인 리덕스를 배워보고 새로운 프로젝트를 통해 이를 적용해봅니다.

-리액트 훅에 대한 이해
-훅을 이용한 동일한 코드 작성
-클로저에 대한 이해
-LifeCycle API와는 다르게 작동하는 훅
-useState, useEffect 등 기본적인 훅들 외에 알면 유용한 훅들
-리덕스에 대한 이해 (다른 상태관리 라이브러들과의 비교)
-리덕스를 이용한 기초적인 모듈 작성

5회차

*리덕스를 심화적으로 학습해봅니다. 또한 리덕스가 제공하는 여러가지 미들웨어들을 배워보고 다양한 예제를 통해 이를 적용해봅니다.

*파일 사이즈가 증가(1MB)하면 초기 렌더시 속도가 그만큼 느려진다는 문제가 발생합니다. 코드스플리팅을 학습하고 이러한 문제를 개선해봅니다.

*리액트 16.8버전이 나오면서 훅이 등장하고 현재는 experimental 버전으로 concurrent mode를 지원하고 있습니다. concurrent mode는 현재는 부분적으로 지원하고 있지만 앞으로 16버전 로드맵에 포함이 되어있고 정식으로 지원될 예정입니다. react suspense와 더불어 비동기 UI와 관련해 편리한 기능을 제공해주는 concurrent mode에 대해 학습해봅니다.

-리덕스 심화
-리덕스 미들웨어
redux thunk
redux saga
-코드스플리팅
-리액트 동시성 모드(concurrent mode)
suspense로 데이터 가져오기
useEffect로 suspense 리팩토링
트랜지션을 이용한 suspense기능 개선
앞으로 변화될 기능들에 대하여

6회차

*실무에서 리액트로 개발하실 때는 백엔드 개발자들과 협업해야하고, 경우에 따라서는 모든 것을 혼자 개발해야 할수도 있습니다. 이와 관련해 리액트의 전체적인 개발 플로우를 살펴보고 미리 구축해 놓은 서버를 이용해 마지막 프로젝트를 진행합니다.

*SPA는 구글 검색엔진을 제외하고 SEO에 취약하다는 단점이 있습니다. 이를 해결하기 위한 서버사이드렌더링(SSR)을 실습해보고 코드 스플리팅을 함께 적용해봅니다.

*서비스 배포 및 프로덕션 환경 관리를 위한 설정 작업들 및 백엔드 개발에 대한 간단한 조언

-실제 개발 프로젝트 흐름에 대하여
-서버사이드렌더링 실습 (using nodejs)
-서버사이드렌더링 추가실습 (코드스플리팅 + SSR)
-aws s3 + cloudfront or netlify를 이용한 서비스 배포
-타입스크립트, 테스트 주도개발 문서제공


#마치면서

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

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

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

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

물론 트렌드만을 따라가다가 기본적으로 해야할 일을 못하면 오히려 역효과를 볼 수 있습니다.

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

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

따라서 보다 경쟁력 있는 프론트엔드 개발자가 되길 원하신다면 저는 리액트를 강력히 추천드립니다.

리뷰(18)

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

실시간톡

실시간 톡하기