Thumbnail
개발 · 프로그래밍 풀스택

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

(4.9)
215개의 수강평 ∙  11,179명의 수강생

무료

지식공유자: John Ahn
총 22개 수업 (4시간 57분)
수강기한: 
무제한
수료증: 미발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

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

✍️
이런 걸
배워요!
리액트 React JS
몽고 디비 Mongo DB
노드 Node JS
리덕스 Redux

| 강의소개

안녕하세요. 이 강의를 만들게 된 계기는 시중에 보면 리액트와 노드를 설명하는 개념 강의나 Todo Lists를 만드는 강의는 많은데 생각보다 좀 더 큰 웹사이트를 만드는 강의는 많이 못 본 것 같아서 이렇게 이 강의를 만들게 되었습니다.

| 강의에서 만드는 예제

- 메인 페이지

John Ahn

- 상세 비디오 페이지

- 상세 페이지 댓글 , 좋아요 , 구독 기능 

- 이미지 업로드 페이지

| 여기서 다루는 툴

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

| 강의에 대해서

- 비전공자도 들을 수 있나요?

넵 ! 전공자, 비전공자 상관없이 들을 수 있는 강의입니다.


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

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

 

- 노드, 리액트을 배우면 어떤 일을 할 수 있나요?

웹 개발자로서 일을 할 수 있습니다.

 

- 이 강의만의 특별한 장점이 있을까요?

하나씩 단계별로 기능을 만들어보면서 자연스럽게 전체 개념과 최신 기술(리액트 훅, 리덕스 등)을 익힐 수 있습니다.

 

🙋🏻‍♂️ 안녕하세요!

최근에 유튜브에서 영어 공부를 하려고 개발 강의를 영어로 찍기 시작했는데 의외로 해외 사람들이 보기 시작하여서 한글로도 이곳에 올리게 되었습니다.

혼자 하나하나 프로젝트를 만들 때 생각보다 자료가 많이 없어서 고생했던 것들을 이곳에서 많은 분과 나누면 좋겠다고 생각하여 이 강의를 시작하게 되었습니다.

 

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
즐겁게 따라하며 배우고 싶으신 분
개념과 실질적인 코딩을 함께 배우고 싶으신 분
📚
선수 지식,
필요할까요?
javascript

안녕하세요
John Ahn 입니다.
John Ahn의 썸네일

안녕하세요. 

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

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


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

커리큘럼 총 22 개 ˙ 4시간 57분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 따라하며 배우는 노드, 리액트 시리즈
강의 소개 미리보기 03:13
전체적인 틀 만들고 Mongo DB 연결 11:52
Boiler Plate 강의 02:03
비디오 업로드 FORM 만들기 (1) 19:43
비디오 업로드 FORM 만들기 (2) 12:35
Multer로 노드 서버에 비디오 저장하기 13:28
ffmpeg로 비디오 썸네일 생성하기 15:09
비디오 업로드 하기 17:47
랜딩 페이지에 비디오들 나타나게 하기 13:35
비디오 디테일 페이지 만들기 16:02
디테일 비디오 페이지에 Side 비디오 생성 09:12
구독 기능 (1) 20:16
구독 기능 (2) 11:34
구독 비디오 페이지 13:40
댓글 기능 생성 (1) 구조 설명 09:20
댓글 기능 생성 (2) Comment.js 15:53
댓글 기능 생성 (3) SingleComment 25:56
댓글 기능 생성 (4) ReplyComment 21:46
좋아요 싫어요 기능 생성 (1) 구조 설명 04:34
좋아요 싫어요 기능 (2) 템플릿, 데이터 가져오기 20:00
좋아요 싫어요 기능 (3) 클릭시 기능들 20:17
도표 자료 미리보기
강의 게시일 : 2020년 01월 02일 (마지막 업데이트일 : 2020년 01월 21일)
수강평 총 215개
수강생분들이 직접 작성하신 수강평입니다.
4.9
215개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
HM L thumbnail
5
여러기능을 리액트와 노드로 만들어볼 수 있어서 유익해요 거기다 무료라서 좋아요 ㅎㅎ 근데 설명이 조금 부족한 부분도 있긴한데 무료인걸 생각하면 이정도는 괜찮다 생각해요 ㅋㅋ
2022-03-18
wizstudy1004 thumbnail
5
너무 좋아요
2020-08-27
kangdari_ thumbnail
5
정말 좋은 강의였습니다. react 뿐만 아니라 기본적인 express와 mongoDB 사용법까지 공부할 수 있었습니다.
2020-03-26
지식공유자 John Ahn
좋은 강의평 감사합니다 ^^ 완강하시느라 너무 수고하셨어요 !!!
2020-03-31
JK Cho thumbnail
5
React를 처음 배우는 분들에게 매우 추천하는 강의입니다. React와 NodeJS, MongoDB의 사용법에 대해 전반적으로 배울 수 있습니다. 수업 진행도 매끄럽고(영상의 길이, 목소리, 말 속도 등), 문제가 생겼을 때 질문하면 강의자님께서 친절히 답변해주십니다! 이 강의를 수강하면 하나의 결과물이 확실하게 나오는 것 뿐만 아니라 기능을 더 추가하거나, 다른 사이트를 만들어 보면서 응용하기에도 쉽습니다. 무료로 강의를 올려주셔서 감사드리고, 다른 강의도 기다리겠습니다!
2020-03-23
지식공유자 John Ahn
너무나 전문적이게 평가를 써주셨네요 ^^ 진심으로 감사드립니다. 앞으로도 좋은 강의로 찾아뵙겠습니다 ~!!! 감사합니다!
2020-03-23
릴롱궤 thumbnail
5
기초부터 쭉 달리고 있습니다. 제가 인프런에서 만났던 강의들 중에 베스트인것 같습니다 ㅎㅎ 특별히 좋았던 것은 반복 숙달이었어요 처음에 이해가 잘 안되던 것도 계속 반복하니 어느새 체득하게 되는 것 같습니다 ! react를 이제 조금 알게 된것같습니다. 아 그리고 ㅎㅎㅎㅎ 처음 접하게 되는 메소드들에 대해서 개념설명을 좀 더 자세히 해주시면 더더욱 좋은 강의가 될 것 같습니다! 그리고 질문올리면 정말 성의껏 답변해주셔서 너무너무 감사합니다! 저는 또 쇼핑몰 배우러 갑니다 :)
2020-05-09