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

리액트로 나만의 블로그 만들기(MERN Stack) 대시보드

(4)
30개의 수강평 ∙  470명의 수강생

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)

새 강의 및 로드맵 오픈했습니다! 새 강의는 >링크< 참고하세요
Docker로 개발부터 배포까지,Terraform으로 쿠버네티스 운영을 알고 싶다면 고고~!!!

새로 출시한 Node FullStack 개발 로드맵, A~Z 까지 로드맵 참여시 관련 강의 20% 할인 쿠폰을 드립니다
할인 쿠폰 받으러 >Go! <

자바스크립트 하나로 풀스택 개발 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://github.com/sideproject0214/blog)

싸플의 최신 강의 정보는 blog.ssaple.com 에서 확인하세요~

 

섹션마다 간단한 소개 📖

< 총 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번이라도 만들어보신분
웹 코딩을 빠르게 배우고 싶으신분

안녕하세요
싸플 입니다.
싸플의 썸네일

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

커리큘럼 총 66 개 ˙ 13시간 52분의 수업
이 강의는 영상, 수업 노트, 미션이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Intro
섹션 1. Backend
(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
(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
(61) Deploy(1) 12:23
(62) Deploy(2) 17:19
(63) FINAL 01:41
섹션 4. Bonus
(64) Https(GreenLock Express) 15:52
강의 게시일 : 2020년 08월 19일 (마지막 업데이트일 : 2020년 09월 06일)
수강평 총 30개
수강생분들이 직접 작성하신 수강평입니다.
4
30개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
한광훈 thumbnail
5
좋은강좌 감사합니다.
2022-06-02
달늑대 thumbnail
5
중간중간 오류로 인해서 며칠씩 허비하고... 정말 험난한 시간이었지만 어떻게든 완성할 수 있게 되어 너무 뿌듯합니다 ㅜㅜ 이걸로 리액트를 통해 어떻게 프론트엔드와 백엔드를 만들고 배포까지 할 수 있는지, 어느정도 감을 잡을 수 있게 되는 시간이었습니다. 더 공부를 많이 해야겠다는 생각만 드네요...ㅎㅎ 자유자재로 홈페이지를 만드는 그날까지 화이팅!!!
2021-09-01
gksrbanssla thumbnail
4
강의내용 및 편집이 훌륭합니다.
2021-05-06
임채영 thumbnail
3
리덕스, 리덕스-사가 관련 사전 지식이 없어서 내용을 이해하기 어렵습니다. 학습 진행중인데... 다른데서 공부를 좀 더 하고 와야겠네요.
2021-10-06
기본은하고싶다 thumbnail
3
중간중간 불친절해서 완강이 힘들었습니다
2021-04-17