개발 · 프로그래밍

풀스택

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

이 강의를 통해서 리액트와 노드를 어떻게 사용하는지 기본적인 내용들을 배울 수 있습니다.

(4.8) 수강평 889개

수강생 23,088명

John Ahn

React Node.js

초급자를 위해 준비한
[웹 개발, 풀스택] 강의입니다.

이런 걸 배울 수 있어요

리액트
노드
리덕스
Express JS
몽고 DB

리액트와 노드의 기본을 학습하세요!

📝 강의 소개

안녕하세요 ^ ^
이 강의에서는 리액트와 노드로 실질적인 어플리케이션을 만들기 위해
필요한 기본 개념들을 다루고 있습니다.

💡 강의 특징

강의를 만들면서 수강생분들이 어떠한 것들을 궁금해할지를 스스로 질문하면서
조금이라도 의문이 생기는 것이 있으면 계획에 없었던 강의 내용들도 추가해 가며 만들었습니다.

기본 개념이긴 하지만, 실질적으로 실무에서 쓸 수 있는 중요한 개념들을 주로 다루었습니다.

🧰 여기서 다루는 툴

Visual Studio Code를 사용하지만 자신이 원하는 Editor를 사용해도 됩니다.
MAC을 사용하지만 윈도우에서도 가능합니다.

John Ahn

🙋🏻‍♂️ QnA

Q. 비전공자도 들을 수 있나요?
A. 넵! 전공자, 비전공자 상관없이 들을 수 있는 강의입니다.

Q. 왜 노드, 리액트 등을 배워야 하나요?

2019년 Stackoverflow survey 결과를 가져와 봤습니다.
보시다시피 리액트와 노드의 인기는 해가 지나갈수록 점점 높아지고 있기 때문에
배워 두신다면 자신의 커리어 향상에 많은 도움을 줄 수 있습니다.

Q. 노드, 리액트를 배우면 어떤 일을 할 수 있나요?
웹 개발자, 서버 개발자, 프론트엔드 개발자로서 일을 할 수 있습니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

자바 스크립트를 즐겁게 사용하고 싶으신 분
실무에서 사용하는 개념을 배우고 싶으신 분

선수 지식,
필요할까요?

자바스크립트

안녕하세요
John Ahn입니다.

83,050

명

수강생

2,641

개

수강평

2,428

개

답변

4.8

점

강의 평점

개

강의

안녕하세요.

즐겁게 개발하고 있는 개발자입니다.

앞으로 많은 도움을 드릴 수 있었으면 좋겠습니다.

- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발

커리큘럼

전체

36개 ∙ (4시간 53분)

해당 강의에서 제공:

수업자료

섹션 1. Node JS

14개 ∙ (2시간 11분)

1. 노드 리액트 기초 강의 #1 소개
02:03
2. 노드 리액트 기초 강의 #2 NODE JS 와 EXPRESS JS 다운로드 하기
10:42
3. 노드 리액트 기초 강의 #3 몽고 DB 연결
07:01
4. 노드 리액트 기초 강의 #4 MongoDB Model & Schema
06:27
5. 노드 리액트 기초 강의 #5 GIT 설치
08:51
6. 노드 리액트 기초 강의 #6 SSH를 이용해 GITHUB 연결
10:35
7. 노드 리액트 기초 강의 #7 BodyParser & PostMan & 회원 가입 기능
11:38
8. 노드 리액트 기초 강의 #8 Nodemon 설치
04:43
9. 노드 리액트 기초 강의 #9 비밀 설정 정보 관리
08:30
10. 노드 리액트 기초 강의 #10 Bcrypt로 비밀번호 암호화 하기
11:32
11. 노드 리액트 기초 강의 #11 로그인 기능 with Bcrypt (1)
10:58
12. 노드 리액트 기초 강의 #12 토큰 생성 with jsonwebtoken
12:07
13. 노드 리액트 기초 강의 #13 Auth 기능 만들기
19:34
14. 노드 리액트 기초 강의 #14 로그아웃 기능
06:53

섹션 2. React JS

20개 ∙ (2시간 42분)

15. 노드 리액트 기초 강의 #15 리액트란 ?
05:07
16. 노드 리액트 기초 강의 #16 Create-React-App
06:21
17. 노드 리액트 기초 강의 #17 npm npx
04:55
18. 노드 리액트 기초 강의 #18 구조 설명
05:17
19. 노드 리액트 기초 강의 #19 CRA to Our Boilerplate
10:01
20. 노드 리액트 기초 강의 #20 React Router Dom
07:39
21. 노드 리액트 기초 강의 #21 데이터 Flow & Axios
06:30
22. 노드 리액트 기초 강의 #22 CORS 이슈, Proxy 설정
06:24
23. 노드 리액트 기초 강의 #23 Proxy Server ?
02:46
24. 노드 리액트 기초 강의 #24 Concurrently
03:43
25. 노드 리액트 기초 강의 #25 Antd CSS Framwork
03:51
26. 노드 리액트 기초 강의 #26 Redux 기초
10:10
27. 노드 리액트 기초 강의 #27 Redux UP !!!!!
13:02
28. 노드 리액트 기초 강의 #28 React Hooks
06:11
29. 노드 리액트 기초 강의 #29 로그인 페이지 (1)
10:04
30. 노드 리액트 기초 강의 #30 로그인 페이지 (2)
17:33
31. 노드 리액트 기초 강의 #31 회원 가입 페이지
11:33
32. 노드 리액트 기초 강의 #32 로그아웃
05:00
33. 노드 리액트 기초 강의 #33 인증 체크 (1)
16:24
34. 노드 리액트 기초 강의 #34 인증 체크 (2) 강의 마무리.
09:31

섹션 3. Diagram 자료

2개

35. Diagram HTML 자료
36. Diagram XML 자료

강의 게시일: 2020. 03. 17.

마지막 업데이트일: 2020. 04. 18.

수강평

전체

889개

4.8

889개의 수강평

소라연
수강평 81
∙
평균 평점 5.0
2020. 03. 19.
5
100% 수강 후 작성
끝까지 완강했습니다. 최고!! 큰 도움이 되었습니다!!
- John Ahn
  지식공유자
  2020. 03. 19.
  소라연님 금방 들으셨네요 ^^ 좋은 수강평 남겨주셔서 진심으로 감사합니다 !! ^ ^
mo0562
수강평 5
∙
평균 평점 5.0
2020. 03. 31.
5
100% 수강 후 작성
강사님 말씀하셨듯이 기본강의이지만 기본강의 아닌듯 기본같은 실무에 충실하고 재미있는 강의였습니다. 실무에서 필수적인 부분을 꼭 찍어서 강의해 주셔서 감사합니다.
- John Ahn
  지식공유자
  2020. 03. 31.
  좋은 수강평 남겨 주셔서 너무 감사합니다 ! 그리고 완강하시느라 너무나 수고하셨습니다^^ !!!
장재영
수강평 4
∙
평균 평점 5.0
2020. 07. 17.
5
100% 수강 후 작성
너무 좋은강의로인해 팀원들끼리 프로젝트를하면서 모듈을 구현하는데 도움이 많이됬습니다 한가지 질문이있다면 저희가 만든걸 바탕으로 회원정보수정을 구현하고싶은데 정보가많이없어 도움을 받을수있을까요ㅠ?
- John Ahn
  지식공유자
  2020. 07. 20.
  아 안녕하세요 ! 네 궁금하신것 있으면 질문 주시면 최대한 도와드리겠습니다 !!! ^^
헬프미
수강평 1
∙
평균 평점 5.0
2020. 06. 25.
5
36% 수강 후 작성
와 정말 감사합니다. udemy에서 20만원쓰고도 서버제작 엄두도 못내고 있었는데 이 수업듣고 기본 로드맵 바로 딱 잡히네요. 취미로 코딩공부하면서 투두리스트 만들고 있었는데, 회사에서 들켜서 직무 바꿔버리고 서버 만들라해서 막막해 하고 있었습니다. 이 수업은 복잡한 서버활용한 홈페이지만들기는 아니지만, 이 수업을 통해 어떻게 서비스를 구현할 지 로드맵을 그릴 수 있는 그런 수업이였어요. 확실히 node.js랑 react를 사용하다보니 프로그래밍을 잘 모르는 분에게는 어려울 수 있겠습니다. 만약 정말 100퍼센트를 다 뽑아보고 싶으시다면 에치티엠엘, 씨에스에스 한 두시간씩만 공부해보시고, 자바스크립트 무료로 나온것들 수업 주말 이틀잡고 공부해보시고 들으시면 정말 큰 도움이 될거에요. 이런 양질의 수업 무료로 베풀어주셔서 감사합니다. 어느쪽에 계신가요? 계신방향으로 큰절 올리겠습니다
Rush
수강평 1
∙
평균 평점 5.0
2020. 05. 21.
5
100% 수강 후 작성
현역 개발자입니다.. 풀스텍으로 다 사용하는데 저도 이런 강의 하나 만들어야 겠다 싶었는데..와.. 언제생겼는지 정말 완벽한 강의네요 정말 강력추천 드립니다.. 모든분들 이거부터 보시길 바래요 react native로 react navigation V5 강의하나 찍어주세요..ㅋㅋㅋㅋ

John Ahn님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

John Ahn

이 강의를 통해 도커에 대해서 배울 수 있으며, CI 환경을 구성할 수 있습니다.

초급

GitHub, AWS, Docker

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

John Ahn

이 강의를 통해서 쇼핑몰 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

중급이상

React, Redux, Node.js

따라하며 배우는 자바스크립트 A-Z

John Ahn

웹 개발의 기초가 되는 자바스크립트의 기초부터 중급까지 배울 수 있습니다.

입문

JavaScript

따라하며 배우는 리액트 네이티브 기초

John Ahn

이 강의를 통해서 리액트 네이티브를 이용해서 애플리케이션 개발을 할 수 있습니다.

초급

React Native, React, expo

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

이 강의를 통해서 테스트 주도 개발(TDD)을 이용하여 Node.js 어플리케이션을 만들어 봅니다.

초급

TDD, Node.js, Express

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다.

초급

React, Redux, Node.js

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

초급

TypeScript, JavaScript

따라하며 배우는 HTML, CSS

John Ahn

이 강의를 통해서 HTML, CSS 기본을 다질 수 있습니다.

입문

HTML/CSS

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

초급

클론코딩, Node.js, React

따라하며 배우는 웹 게임

John Ahn

이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

중급이상

React

따라하며 배우는 리액트 A-Z[19버전 반영]

John Ahn

이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.

초급

React, Next.js, TypeScript

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

John Ahn

이 강의를 통해 리액트 애플리케이션을 테스트하는 법을 배우게 됩니다.

초급

React, React Context, 웹앱

따라하며 배우는 NestJS

John Ahn

이 강의를 통해 NestJS에 대해서 배울 수 있습니다.

초급

NestJS, PostgreSQL, TypeORM

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

초급

React, Firebase, 웹앱

따라하며 배우는 데노(DENO) - 기본 강의

John Ahn

출시 전부터 많은 관심을 받았던 데노가 드디어 나왔습니다. 이 강의에서 데노가 노드와 어떻게 다르며 어떻게 데노를 다루는지를 배울 수 있습니다.

초급

Deno

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

John Ahn

이 강의를 통해서 Google에서 제공하는 API를 사용해서 챗봇을 만들어 볼 수 있습니다.

초급

React, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드등의 개념만이 아닌, 실질적으로 어떻게 웹 사이트를 만드는지를 배울 수 있습니다.

초급

React, Node.js, 웹앱

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

John Ahn

이 강의를 통해서 Google에서 제공하는 API를 사용해서 챗봇을 만들어 볼 수 있습니다.

초급

React, Node.js

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

코배투

React로 광고 수익형 웹사이트를 만들어 봅니다. 광고를 최적화 하고 서버 비용을 줄이기 위한 방법과 규모에 따른 사이트 운영 Tip까지 배워봅니다.

초급

React, AWS, cloudflare

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드등의 개념만이 아닌, 실질적으로 어떻게 웹 사이트를 만드는지를 배울 수 있습니다.

초급

Express, React, Node.js

React + Firebase 풀스택 개발 - 파이어베이스 파이어스토어 Data Modeling

브라이트코딩

이 강의를 통해 파이어베이스로 DB의 관계를 구현하는 방법을 배우시게 됩니다. 빠르게 리액트 풀스택 개발자가 될 수 있습니다. 고용이 불안정한 지금 이 시대에는 새로운 기술을 배워 자신의 가치를 올려야 합니다. 그리고 무언가를 만들어야 합니다. 그 사이드 프로젝트와 아이디어를 구현 할 때 데이터의 "관계"를 구현할 수 있어야 합니다. 이 강의는 파이어베이스 "파이어스토어"로 "관계"를 구현할 수 있도록 도와 드립니다.

초급

Firebase, React, firestore

React 비기너: 튼튼한 기본 만들기

김영보

React 기본을 배울 수 있습니다. React와 관련된 HTML, JavaScript, DOM, Event, Object, Module, OOP 등을 정리할 수 있습니다.

초급

React, JavaScript, DOM

스프링 부트와 리액트로 구현하는 소셜 로그인

온코딩

스프링 부트와 리액트를 활용해 일반 로그인과 소셜 로그인을 통합 구현하는 방법을 배웁니다. MPA와 SPA 환경 모두에서 로그인 시스템을 구축하고, JWT와 OAuth2 인증을 실습합니다. 실무에 바로 적용 가능한 예제 프로젝트를 통해 전체 로그인 흐름을 이해하고 구현할 수 있습니다.

중급이상

Java, Spring Boot, JPA