리액트로 나만의 블로그 만들기(MERN Stack)
리액트로 나만의 블로그 만들기(MERN Stack)
수강정보
(5개의 수강평)
144명의 수강생
스킬태그 #React, #Redux, #Node.js, #Bootstrap
29,700원
지식공유자 : 싸플
66회 수업 · 총 13시간 52분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 중급이상
싸플의 다른 강의 연관 로드맵
아직 다른 강의가 없어요
연관 로드맵이 없어요

이 강의는

풀스택으로 나만의 블로그를 만들어 보아요~~!

이런 걸 배워요

  • Mongo DB
  • Express
  • React
  • NodeJS
  • Redux, Redux-Saga
  • JWT Web Token
  • Infinite Scroll(Intersection Observer)
  • CKEditor5
  • CSS(BootStrap4)
  • Https(GreenLock Express)

자바스크립트 하나로 풀스택 개발 OK!
나만의 블로그를 직접 만들어보세요.

주제 소개 📝

백엔드(서버)와 프론트(웹 화면)을 한 사람이 모두 만들 수 있는 기술을 풀스택(Full Stack)이라 합니다. 풀스택 기술은 다양하게 구현할 수 있지만, 우리는 자바스크립트를 이용하여 백엔드(NodeJS, Express, MongoDB)와 프론트(React, Redux, Redux-Saga, Bootstrap, Ckeditor5 등)을 만들어 볼 것입니다. 

왜 배워야 하는지 ✒️

여러분, 자바스크립트로 하나로 모든 걸 만들 수 있다면 믿어지세요? @.@
자바스크립트 풀스택 개발자가 되면 여러분의 모든 아이디어는 바로 현실이 되며, 수익창출로 이어집니다. 

덤으로!!!
프론트엔드 개발 라이브러리인 React를 배우면 React로 모바일 앱(안드로이드, 아이폰)을 만드는 React Native까지 쉽게 접근할 수 있다는 사실!!!

여러분의 머리속 아이디어는 더 이상 단순한 상상이 아닙니다.
지금 당장!!! 현실세계에 여러분들의 생각의 나래를 펼치세요. 

코딩은 나의 상상을 현실화 시켜주는 도구 입니다~~~ *^^*

이 강의에서 배우는 것들 ✏️

Infinite Scroll

Category Search

CKEditor5

Comment

이밖에 MongoDB, Express, React, Node JS(이상 MERN Stack), Redux, Redux-Saga, JWT Web Token, Bootstrap4를 배우게 됩니다.

강의 특징 💡 

웹 개발자는 기본적으로 자신의 지식과 기술을 저장해 놓을 블로그가 필요합니다.
하지만... 웹개발하신다면서... 아직 나의 기술로 만든 블로그가 없다고요? 그러면 한번 따라서 만들어보세요. 

이 강의는 HTML, CSS 등 막 입문하신 분들을 대상으로 만들어져, 비교적 상세히 개념들을 설명하고 있습니다. 

이 강의는 교육을 위한 사이트를 만드는 것이 아니라, 현재 제가 실제 운영하고 있는

블로그(https://www.ssaple.net/)를 그대로 만들어 보는 것이기에 실제 활용가치가 높습니다. 

여러분만의 블로그를 만들고 지금부터 키워나가 보세요~~~
(깃허브 : https://github.com/sideproject0214/blog)

섹션마다 간단한 소개 📖

< 총 63개 강의, 815분 >

Section 1 (강의 1개, 4분)
*인트로: 기본 MERN 스택에 관한 개요와 앞으로 배울 기술 소개

Section 2 (강의 12개, 126분)
*Express(백엔드), Router, MongoDB 등 기본 서버작업

Section 3 (강의 47개, 653분)
*React, Redux 등을 활요한 프론트엔드 작업과 이에 맞춘 백엔드 작업

Section 4 (강의 3개, 32분)
*AWS Deploy 작업

Bonus (강의 1개, 15분)
*Https(GreenLock Express)

여기서 다루는 툴 🧰 

MongoDB, Express, React, NodeJS, Redux, Redux-Saga, JWT Web Token, Infinite Scroll(Intersection Observer), CKEditor5, BootStrap4

*컴퓨터 사양: 리눅스, 맥, 윈도우

예상 질문 Q&A 🙋🏻‍♂️ 

Q. 비전공자도 들을 수 있나요?
A. 네 당연합니다. 왜냐하면 제가 비전공자로 여러분들처럼 인터넷으로 독학하였습니다. 다만 처음 입문하시는 분이라면, 리액트 자습서(https://ko.reactjs.org/tutorial/tutorial.html#completing-the-game)를 보시고 오시는 것을 추천드립니다. 

Q. 리액트는 어렵나요?

A. 리액트 자체는 어렵지 않습니다. 다만, 문제는 리덕스인데, 리덕스부터 난이도가 급상승하기에 리액트가 어렵다는 편견도 존재하는 것은 사실입니다. 리덕스 없이 만들수도 있으나 사이트 규모가 커질수록 상태관리에 어려움이 발생하므로 거의 필수(?)적으로 Redux, Mobx등을 사용하게 됩니다. 

이 단계만 넘기면 자유자재로 사이트를 만들수 있으니 포기하지 않으시면 좋겠습니다. *^^*

Q. MERN Stack은 무엇인가요?
A. 자바스크립트 언어 한개로 MongoDB, Express, React, NodeJS(MERN) 을 사용하여 서버(백엔드), 웹(프론트)를 모두 만드는 기술을 의미합니다. 

Q. 이 강의만의 특별한 장점이 있을까요?
A. 저도 여러분처럼 인프런 등 인터넷으로 독학을 하였기에, 기존 강의에서 느낀 아쉬운 점을 보완하여 입문하시는 여러분의 입장에서 강의를 진행하였습니다. 

도움 되는 분들

  • 웹기초지식(HTML, CSS)를 아시는 분
  • 자바스크립트 기초("console.log"를 아시는 분)
  • 리액트, Express기초를 아시는분
  • 리액트 To-do list 1번이라도 만들어보신분
  • 웹 코딩을 빠르게 배우고 싶으신분

공개 일자

2020년 8월 19일 (마지막 업데이트 일자 : 2020년 9월 06일)

지식공유자 소개

낮에는 평범한 회사원이지만, 밤에는 열정을 가진 개발자 입니다

4.2
5개의 수강평
default_profile.png
프레드 25일 전
제 개인적인 느낌점입니다만, 일단 강의가 중급 강의라고 생각듭니다. 입문강의는 아니라고 생각듭니다. 하지만 강사님의 답변 하나 하나에 신중하고 친절한 답변을 남겨주셔서 매우 좋습니다. 얼른 초급을 떼고나서 이 강의를 정주행 해보려구요. 감사합니다.
싸플

싸플 24일 전
프레드님 감사드려요~~~ 앞으로 다 같이 힘내보도록해요. 화이팅!!! *^^*

default_profile.png
ALSO 3일 전
HTML, CSS, JavaScript 기초만 된다고 해서 절대 알 수 없습니다. 무조건 M, E, R, N를 한번 씩이라도 공부하고 듣는게 좋을 거 같습니다. 이 강의를 시작하고 30%가 지나서 후회하지만 강의 다듣고 M E R N를 따로 된 강의를 다시 한번 들어야들어야 할 것 같습니다.
싸플

싸플 3일 전
리액트가 리덕스부분에서 갑자기 러닝커브(난이도)가 급상승하여 아마도 어려움을 겪으시는것으로 판단됩니다. 리덕스 나오기 전만하더라도 리액트는 크게 어렵지는 않거든요.... ㅜㅜ 죄송하네요. 제가 처음강의하다보니 처음에 모든 것을 담을려다보니 부작용이 있는 것같습니다. 현재 제가 기획하고 있는 쿠버네티스 쇼핑몰 강의가 끝나면 초보분들을위한 입문 강의를 만들어야 하겠네요. 저는 개인적으로 여러 입문강의 토대로 현재 강의를 기획한 것이라... 이렇게 어려운지 몰랐네요... 개인적인 불찰은 초보부터 접근 가능한 강의를 기획 못한 것이네요. ㅠㅠ 향후 무료강의(?) Html, Css 강의를(보충자료 포함, 충실하게 만들게요... 저도 이번 강의를 통해서 수강생분들이 강의요약 자료를 많이 원하신다는 처음 느꼈네요... ㅜㅜ) 만들고 여러분들께서 입문하기 편한 강의를 만들어야 한다는 사명감을 느끼고 월요일 밤을 마무리 하고자 합니다. 강의의 부족함의 노여움을 푸시고, 저의 수강생 분들에게(물론 필요는 없겠지만....) Html, css을 이용한 강의를 드리고자 약속하면서... 이 밤을 마무리하겠습니다. ㅠㅠ 연말되면서 일이 너무 바쁘네요. ㅠㅠ ps. 추천강의 코스: Html, css 학습 후 -> 자바스크립트 기초 강의 -> 리액트로 todo리스트 만들기 이정도 해보시길 추천드립니다. 위에 언급한 강의코스는 대부분 무료강의가 있습니다. 인프런에도 무료강의가 많으니 학습해보실 권해드립니다. ps2. 참고로 저도 리액트 배울때 리덕스 부분이 너무 어려워서,순수 리액트로만 state관리 -> graphql -> vue -> 를 배웠지만... 결국에는... 돌고돌아 리덕스로 돌아오더라고요... 리덕스 알기만 하면, 웹사이트 만드는게 정말 쉽고 재미있습니다.

ALSO

ALSO 2일 전
MERN stack에 흥미를 가지고 있기때문에 싸플님의 MERN stack 강의를 계속 구매하거나 볼 것입니다. 꼭 초급 강의를 내주시면 감사하겠습니다. 기다리겠습니다!!

교육과정

모두 펼치기 66 강의 13시간 52분
섹션 0. Intro
1 강의 04 : 09
섹션 1. Backend
12 강의 126 : 05
(02) NodeJS Install
03 : 09
(03) Git, VScode Install, Npm Init
04 : 53
(04) Express, Babel, Mongoose Install
10 : 17
(05) Express Start
08 : 32
(06) MongoDB Modeling(1)
10 : 27
(07) MongoDB Modeling(2)
09 : 26
(08) MongoDB Cluster Connect
12 : 28
(09) Router(1)
18 : 25
(10) Router(2)
06 : 02
(11) UserRoutes
18 : 52
(12) Auth Middleware
09 : 36
(13) Auth Routes
13 : 58
섹션 2. Front
49 강의 654 : 36
(14) CRA & Redux(1)
04 : 06
(15) CRA & Redux(2)
07 : 16
(16) CRA & Redux(3)
19 : 48
(17) Router Basic Setting
17 : 36
(18) Footer
11 : 55
(19) Header(1)
09 : 18
(20) Header(2)
13 : 47
(21) Header(3) - Reducer Setting
15 : 46
(22) Header(4) - LoginModal(1)
10 : 54
(23) Header(4) - LoginModal(2)
23 : 17
(24) Header(5) - AppNavBar Auth
14 : 06
(25) Header(6) - Register Modal(1)
22 : 16
(26) Header(6) - Register Modal(2)
13 : 44
(27) UserLoading
14 : 54
(28) Header(7) / history@^4.7.2
09 : 49
(29) Router
15 : 37
(30) PostCardList(1)
14 : 47
(31) PostCardList(2)
31 : 35
(32) CKEditor5 Webpack Setting(1)
06 : 23
(33) CKEditor5 Webpack Setting(2)
08 : 36
(34) CKEditor5 EditorConfig
08 : 05
(35) AWS Setting
05 : 58
(36) Server Image Router
11 : 31
(37) CKEditor Final Setting
04 : 01
(38) CKEditor5 For React
17 : 00
(39) CKEditor GetDataFromCKEditor5
21 : 23
(40) Post Route
14 : 36
(41) Post Upload Saga
11 : 07
(42) Post Detail(1)
19 : 08
(43) Post Detail(2)
11 : 05
(44) Post Detail(3)
10 : 54
(45) Post Detail(4)
08 : 36
(46) Comment Reducer
08 : 42
(47) Comment Saga
21 : 54
(48) Comment Front
26 : 43
(49) Post Delete
11 : 08
(50) Post Edit(1)
07 : 27
(51) Post Edit(2)
14 : 49
(52) Post Edit(3)
13 : 21
(Code Challenge) Login 후 바로 Profile 수정하려면?
(53) Category(1)
14 : 15
(54) Category(2)
10 : 00
(55) Category(3)
05 : 14
(56) Search
21 : 36
(57) Profile(1)
14 : 16
(58) Profile(2)
21 : 40
(59) Infinite Scroll
25 : 06
(59-1) Infinite Scroll Bug Fixed
06 : 58
(60) Final Clear Up
02 : 33
섹션 3. Deploy
3 강의 31 : 23
(61) Deploy(1)
12 : 23
(62) Deploy(2)
17 : 19
(63) FINAL
01 : 41
섹션 4. Bonus
1 강의 15 : 52
(64) Https(GreenLock Express)
15 : 52
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스