React & Express 를 이용한 웹 어플리케이션 개발하기

React & Express 를 이용한 웹 어플리케이션 개발하기

(62개의 수강평)

8293명의 수강생

무료

velopert(김 민준)
평생
중급
38개 수업, 총 6시간 0분
후반부 텍스트 강좌는 취소되었습니다. 이 강좌에서 다루는 내용이 조금 오래되어 새로운 강의로 리뉴얼되었습니다.

새 강의 보기

1. 강좌 소개

자바스크립트 라이브러리 ReactJS 를 학습하는 react 강좌 입니다. 요즘 들어 HOT 한 페이스북에서 개발한 자바스크립트 라이브러리, React.js 에 대하여 알아보고, 직접 사용을 해보면서 기술을 익힐 수 있는 강좌입니다. React.js 의 기본 개념부터 시작해서, 간단한 예제 프로젝트 몇개를 만들어보고, Node.js, MongoDB를 사용하여 Backend 서버를 만드는 방법도 익히고, 최종적으로는 강좌에서 배운 지식들을 결합하여 간단한 웹 어플리케이션 프로젝트를 완성합니다.

- node.js 를 사용해 본 경험이 있으면 학습하기 수월합니다.
- HTML,CSS,JAVASCRIPT 에 대한 이해도가 있는 분께 적합한 강좌입니다.
- 완강 전 입니다. 매주 한두편씩 연재될 예정입니다.
-  2016년 8월에 Webframeworks.kr 에서 진행하는 React.js 코드랩 세미나를 위해 준비한 자료를 토대로 진행합니다

참고 자료

Links
- http://slides.com/minjunkim-1/deck (강의에서 사용되는 슬라이드)
- https://velopert.com/reactjs-tutorials (React.js 텍스트 강좌 목록)

2. 도움되는 분들

  • 평소 React.js 를 학습하고 싶었던 분
  • 웹 프론트엔드 개발자가 되고 싶은 분
  • HTML,JAVASCRIPT,CSS 에 대한 이해도가 있으신 분

3. 강좌 특징

  • 다루는 기술 : 전반적인 Web front-end 기술, Javascript, React.js, node.js
  • 강좌 수준 : 초급~중급
  • 사전 지식: HTML,CSS,Javascript 에 대한 기본적인 이해가 필요합니다.
  • node.js 를 경험해보신 분이라면 더욱 좋아요.

4. 강사 소개

김민준

트렌디한 IT기술을 지향(하려고 노력)하는 개발자, 김민준입니다. Github이나 블로그에서는 velopert로 활동하고 있습니다. React.js 라이브러리를 매우 좋아하며, 국내에서 이 라이브러리의 인기를 한층 더 높이겠다는 다짐으로 자료를 만들고 있습니다.

지식공유자 소개

velopert(김 민준)

교육과정

섹션 1. 오리엔테이션, ReactJS 소개
강좌 소개
05 : 00
React.JS 소개
09 : 00
React.js 장점과 단점
09 : 00
섹션 2. React.js 시작하기
Codepen 설정 , ES6 클래스
04 : 00
JSX의 특징
07 : 00
props
07 : 00
state
09 : 00
컴포넌트 매핑 (Component Mapping)
11 : 00
섹션 3. 개발환경 설정, 프로젝트 진행
작업환경 설정하기
07 : 00
React Project 만들기 | NPM, WEBPACK
24 : 00
Hot Module Replacement | React Hot Loader
08 : 00
섹션 4. 주소록 (Contact) 만들기
Contact 검색기능 구현 | input, sort, filter
12 : 00
Contact 선택기능 구현 | React.js 기초개념 응용
09 : 00
state 내부 배열 처리하기 | Immutability Helper / ES6 spread
13 : 00
Contact 추가/삭제/수정 기능 구현 | Immutability Helper 적용하기
06 : 00
Contact 데이터 추가기능 구현 | 컴포넌트 응용
09 : 00
Contact 데이터 삭제/수정 기능 구현 | 컴포넌트 응용
14 : 00
Contact 엑스트라 기능 구현 i | KeyPress, ref
08 : 00
Component LifeCycle API
07 : 00
Contact 데이터 새로고침해도 유지하기 | localStorage
08 : 00
섹션 5. Redux
Redux: 배경지식 | MVC, FLUX
10 : 00
Redux: 특징과 흐름
11 : 00
Redux: 프로젝트 준비하기 | create-react-app
07 : 00
Redux: 프로젝트 구조 및 컴포넌트 생성
17 : 00
Redux: Action
08 : 00
Redux: Reducer
16 : 00
Redux: Store
08 : 00
Redux: react-redux | 컴포넌트에서 사용하기
20 : 00
섹션 6. Backend
소개
03 : 00
Node.js / Express.js 맛보기 | 라우팅, 모듈화
14 : 00
Express | 미들웨어(middleware)
13 : 00
MongoDB 소개
05 : 00
MongoDB 기본 명령어 (i) | 생성 및 제거
04 : 00
MongoDB 기본 명령어 (ii) | find()
10 : 00
MongoDB 기본 명령어 (iii) | sort, limit, skip, update
08 : 00
MEMOAPP 만들기
강좌목록 (텍스트)
번외편
React Router v4 Pre-release 사용해보기
20 : 00
React 컴포넌트 구성 & AJAX 비동기 작업 처리하기 & CSS 애니메이션 처리

수강 후기

4.9
62개의 수강평
조동익 20시간 전
최고!!!! 신세계를 봤습니다. ^^b
Venister 24일 전
조금 지난 강좌라지만 지금 보면서 정말 큰 도움 받고 갑니다.
우정완 1달 전
훌륭한 리액트 강좌 리액트 현장에 투입되어서 리액트를 다루는 기술이라는 책을 급하게 구입하고 동영상 강좌를 찾던 중 책 저자분 성함하고 동일하기에 강좌를 신청하였는데 리액트에 관련해서 많은것을 알수 있는 좋은 신가이 되었습니다. 인프런 강좌 시청 후 책을 보니까 머리에 더 쏙쏙 들어오고 강사님의 리액트 홈페이지까지 알수 있게 되어서 200% 만족한 동영상 강좌였습니다.
Privacy is important 2달 전
이 강좌로 리액트 입문 시작했어요. 지루하지 않게 설명도 최대한 깔끔하게 해주시는 편이고.. 목소리도 여러 후기들 말씀대로 듣기 정말 편하네요 ㅎㅎㅎ 꿀성대 인정합니다!! 짜임새 있는 커리큘럼과 특정 개념을 이해하도록 의도한 예제들이 너무 마음에 듭니다. 아마 이것만 혼자서 반복해도 리액트 실력이 올라갈 것 같네요. 그리고 강사님이 쓰신 "리액트를 다루는 기술" 도서도 샀습니다. 서점 가서 다 비교해보고 샀는데, 100% 풀컬러는 아니지만 그래도 컬러풀한 느낌이 들기도 하고 교재에 예제도 풍부해서 이 강좌 끝나고 교재 보는 것도 좋을 것 같습니다. 감사합니다.
Jong-pil Park 3달 전
매우 도움이 되었습니다. 시간이 흘러 패키지가 업데이트 되면서 몇가지 수정해가면서 보고 있지만, react를 한번도 해보지 않은 저에겐 개념을 이해하는데 아주 많이 도움이 되었습니다. 감사합니다.
박시중 박 8달 전
이런 강좌가 무료라니..고맙습니다. ㅎㅎ 다만 초보자이다보니, 몇번 반복해 들어야 할 것 같아요~
손종국 . 10달 전
아주 좋은 강좌가 너무 오래된 모습 이 강좌는 예전 리액트 버전으로 진행을 하고 있습니다. 아주 좋은 강좌지만 최신 버전의 강좌를 찾아서 다시 공부하려고 합니다. 벨로퍼트니. 감사합니다.
Pavel Lapshin 2018.05.20
Very nice!!! `
james 2018.05.19
thanks want to give 100.00 if possible very thanks velopert
장제국 2018.04.29
좋은 강좌 감사합니다. 좋은 강좌 감사합니다.
Gunho Lee 2018.04.27
수고하셨습니다. 좋은 강의 감사합니다.
Kyun-Sang Song 2018.03.21
정말 추천할 만한 강좌입니다. 어려운 부분을 쉽게 접근할 수 있게 해주는 재주가 있으십니다. 감사합니다.
허석진 2018.03.20
알기쉬운 강의 정말! 고마워요 ㅎㅎ
허석진 2018.03.20
감사합니다 정말 감사합니다 ㅎㅎ
박창준 2018.03.16
최고 최고.... 강추! 진짜 숨 쉴 틈 없이 봤습니다. 제 기준으로는 1.5배속이 좋아서 배속모드로 봤는데, 정말 전달력이며 컨텐츠며 너무너무 좋습니다. 아쉬운게 있다면 지금 휴재라는거 ㅠㅠ
김대혁 2018.03.11
감사합니다 너무 잘 배우고 있습니다. 초보 개발자로 열심히 공부하고 있습니다. 좋은 강의 듣고 잘 배우고 있습니다. 감사합니다.~
Coding bear 2018.03.08
훌륭한 강좌입니다. react를 배우고자 책을 구입했는데.. 글쎄 책의 내용과 지금의 react와의 문법이 맞지 않았습니다. 분명 최근에 나온 책인것 같은데...흐흑 하지만 본 강좌를 듣고 React를 조금이나마 이해할 수 있게 되어 감사합니다.
노준호 2018.02.15
연계중 2018.02.05
감사합니다 좋은 강좌 였습니다. 감사합니다.
박현규 2018.01.25
강좌 잘들었습니다.
박주혁 2017.12.21
굿굿 초보한테 딱 좋은 수준인거같아요!
서인석 2017.12.20
감사합니다 접근하기 어려운 내용을 접근하기 쉽게 잘 설명해주신 것 같습니다.
이상민 2017.12.12
와. 정말 좋은 강좌 잘 봤습니다. 수고하셨습니다. 다음편이 기대되네요!
DongHyeon Kim 2017.11.14
감사합니다.
Taeyoung Kim 2017.11.05
멀게 느껴지던 리엑트가 가깝게 느껴지네요. 개념도 쏙쏙 귀에 들어오게 설명해주셔서 react 이제 시작할수 있을것 같아요. 감사드려요!!
Star_Man 2017.10.19
감사합니다. 잘 배웠습니다.
조원배 조 2017.10.16
너무 많은 도움이 되었습니다. 잠시 개발에 손을 놓고 다른일을 하다가 최근에 다시 프로젝트하면서 리액트를 접하게 되었습니다. 원래 포지션이 JAVA를 활용한 백엔드 개발이었기때문에 독학이 너무 힘들어 지푸라기라도 잡는 심정으로 강의를 듣기시작했는데 내용이 너무 좋네요! 정말 감사힙니다
발라스트 2017.10.10
감사합니다. 좋은 강좌 감사합니다 굿!! table 만드는 강좌도 있으면 좋겠습니다. 초급이라... react 재미있습니다.
김영곤 2017.10.07
재미있게 봤습니다. React.js를 처음 접하지만, 재미있게 끝까지 본것 같습니다.
서한규 2017.10.07
좋은 강의 감사드립니다^^ 잘배우고 갑니다 ^^
김상현 김 2017.08.23
react 1도 몰랐지만 따라하면서 쉽게 이해할 수 있었습니다! 휴.. 이제 다 들었네요! 보면서 리엑트에 대해서 많이 공부할 수 있었습니다. 이제는 여러가지 변경해 보면서 내것으로 만들어야 할 것 같습니다 ㅎ 좀 아쉬운 부분은 react router가 변경되는 등 변화가 생기면서 오류 나는 부분들이 생기고 이를 해결하기에 힘든 부분도 있었지만 해결해 나가는 것도 재미있는 경험이었습니다 ㅎㅎㅎ 앞으로도 좋은 강의 부탁드립니다.
김상희 2017.07.13
좋아요~~ 감사합니다. 이해하는데 많은 도움이 되었습니다.
KyoungSuk Lee 2017.06.23
최고에요 !
이인성 이 2017.06.17
아주 좋습니다 초급진입에 딱입니다. 이후 고급진입에 확실한 도움이됨
Aris 2017.05.31
정말 좋은 강좌 입니다. 초보자가 보기에도 어려움이 없으며, 말이 귀에 쏙쏙 들어와 집중해서 잘 배울수 있었습니다.
Chulwoong Choi 2017.05.26
아주 좋아요! ㅎㅎㅎ 감사합니다 :)
Ji Yoon Park 2017.05.10
친절한 강의 최신 기술을 친절하게 설명해주셔서 감사합니다
bsscco 2017.05.09
말 잘 들리고, 설명 충분합니다. 좋은 강사분. 이 강의가 무료라는 게 정말 감사합니다.
홍석훈 2017.04.11
개념잡는데 좋네요 시간 문제로 실제로 짜보지 않고 문서로만 봐서 이해가 어려웠는데, 강의 쫙 보고 나니 개념이 잡히네요. 이제 어떤 식으로 만들면 될지 알게 되었습니다. 감사합니다.
스프링하이 2017.04.09
강좌 영상을 반복적으로 보면서 개념을 잡으며 다시 따라가면서 코딩을 해 보니 조금씩 React가 들어오네요.. 성의 넘치고 친절한 강좌 감사드립니다
Jongmoon Im 2017.04.08
감사합니다. 블로그에서 강의하신 것을 보고 따라 들어왔습니다. 아직 수준이 낮아 다소 이해가 안가는 부분이 있었는데, 동영상 강좌를 통해 해소할 수 있을 것 같아 매우 기쁩니다. 감사합니다.
Junhyung Kim 2017.04.02
대박 정말 감사합니다.. 많은 도움이 되었습니다.
Kyungbae Ro 2017.02.18
3월강좌 무지 기대됩니다. 4점 준사람 뭡니까! 돈한푼 안내고 도움받았으면서, 고약한 심술보...
김정환 2017.01.01
명강입니다. 최근 기술을 쉽게 설명해주셔서 감사 합니다.
안병철 2016.12.27
좋은 강의 잘 들었습니다. 덕분에 react를 쉽게 잘 정리할 수 있었습니다. 이후 강좌 기대 되네요. 감사합니다.
jisobkim 2016.12.06
쏙쏙 들어오네요 실습도과 문서를 겸해서 진행하다보니따라가기 수월하네요 아직 시작한지 얼마 안되었는데 열심히 해보겠습니다.
채대영 2016.12.05
감사합니다. 많은 도움 되었습니다. 감사합니다~
정현승 2016.11.24
최고입니다 목소리도 좋으시고 발음도 좋으셔서 귀에 쏙쏙 들어오는 강의입니다. 차근차근 진행해 주셔서 어렵지 않게 실습할 수 있었습니다. 좋은 강좌 감사합니다.
Kendrick B. Jung 2016.11.24
velopert 여기서도 보게되네요 전에 velopert 블로그 보고 react로 사이트도 만들고! 포스트에 오타 댓글도 올렸었는데.. 여기서도 보게 되네요! 다시 react를 제대로 파보기로 마음을 먹어서 찾다가 발견했는데 깜짝 놀랬네요! 강좌 잘보겠습니다
유낙동 2016.11.18
큰 도움이 되었습니다. 준비 너무 많이하신게 보이네요. 정말 고맙습니다. 최고!! :)
Taehee Lee 2016.11.10
감사합니다 너무 잘봤습니다. 진짜 훌륭한 설명 너무 감사드려요
새우깡 2016.11.09
리엑트를 손쉽게 배울 수 있네요. 정말 훌륭한 강의입니다. 책을 사서 보기 시작하긴 했는데 생각만큼 잘 읽히지가 않더라구요. 근데 강의를 들으니까 왜 공부를 해야되고 어떻게 쓰이는지부터 활용법까지 잘 알려주시니 정말 좋았어요. 무엇보다 또박또박 설명해주는 강의랑 하나씩 짚어가는 내용 구성이 좋았습니다. 이보다 훌륭한 리엑트 입문 강좌가 또 있을까요? 완전 강추!
아키 2016.09.05
좋아요. 근데 무한스크롤형 메모패드에 대한 강의는 없나요?
아키 2016.09.05
자세한 설명이 좋습니다 감사합니다
아키 2016.09.05
좋아요
정영태 2016.08.30
리엑트 개념부터 실습까지 너무 좋네요^^; 감사합니다. 도움이 많이 될 것 같네요.
baedorazy 2016.08.29
정말 감사합니다 덕분에 ES6 스크립트 간략히 맛도 보고 리엑트도 해보고 좋네여! 감사합니다.~~굿굿
임동섭 2016.08.28
감사합니다. redux전까지 봤습니다. 저같은 초짜에게 많이 어렵지만 반복시청을 해서 학습을 해야겠어요 너무나 좋은 강의 감사합니다.^^
임원빈 임 2016.08.28
감사합니다 1편만 봐도 벌써부터 흥미롭고 두근거리네요!
교양있는개발자 2016.08.25
아주 훌륭한 강의입니다. 아주 정성스럽게 준비해주셨습니다. 짜임새가 좋습니다.
YoungJoo Han 2016.08.25
감사합니다 좋은 강좌 감사합니다
Jaeho Lee 2016.08.16
좋아요

우리는 성장기회의 평등을 추구합니다

경제적, 시간적 제약없는 양질의 교육으로 누구에게나 성장 기회를
균등하게 주는 것. 그것이 우리의 목표입니다.

지식공유참여

(주)인프랩 | 대표자 : 이형주 | TEL : 070-4178-0406 | E-MAIL : course@inflearn.com
사업자번호 : 499-81-00612 | 개인정보보호책임자 : 이형주 | 통신판매업 : 2017-서울강남-01544
주소 : 성남시 분당구 삼평동 대왕판교로 645번길 12 경기창조경제혁신센터 8층 R19
©INFLAB. ALL RIGHTS RESERVED