Thumbnail
BEST 개발 · 프로그래밍 웹 개발
리액트로 나만의 블로그 만들기(MERN Stack)
(4.3)
24개의 수강평 ∙ 305명의 수강생

29,700원

지식공유자 : 싸플
총 66개 수업˙총 13시간 52분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
내 목록 추가 268 공유
중급자를 위해 준비한
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.

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

✍️
이런 걸
배워요!
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 등)을 만들어 볼 것입니다. 

※ 해당 강의는 Node 12 LTS  또는 Node 14 LTS 버전을 사용하실 것을 권합니다(Node 15 비권장)

왜 배워야 하는지 ✒️

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

덤으로!!!
프론트엔드 개발 라이브러리인 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번이라도 만들어보신분
웹 코딩을 빠르게 배우고 싶으신분

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

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

커리큘럼 총 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일)
수강평 총 24개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.3
24개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
mitchell.sung thumbnail
코드를 작성할 때 너무 설명이 부족한 것 같습니다. 다른 강의처럼 오히려 코드 작성 영상보다는 설명에 집중하는 것이 좋을 것 같아요. 그리고 강의가 너무 어수선 하다는 느낌을 많이 받습니다.
2021-04-02
ALSO thumbnail
HTML, CSS, JavaScript 기초만 된다고 해서 절대 알 수 없습니다. 무조건 M, E, R, N를 한번 씩이라도 공부하고 듣는게 좋을 거 같습니다. 이 강의를 시작하고 30%가 지나서 후회하지만 강의 다듣고 M E R N를 따로 된 강의를 다시 한번 들어야들어야 할 것 같습니다.
2020-10-26
지식공유자싸플
리액트가 리덕스부분에서 갑자기 러닝커브(난이도)가 급상승하여 아마도 어려움을 겪으시는것으로 판단됩니다. 리덕스 나오기 전만하더라도 리액트는 크게 어렵지는 않거든요.... ㅜㅜ 죄송하네요. 제가 처음강의하다보니 처음에 모든 것을 담을려다보니 부작용이 있는 것같습니다. 현재 제가 기획하고 있는 쿠버네티스 쇼핑몰 강의가 끝나면 초보분들을위한 입문 강의를 만들어야 하겠네요. 저는 개인적으로 여러 입문강의 토대로 현재 강의를 기획한 것이라... 이렇게 어려운지 몰랐네요... 개인적인 불찰은 초보부터 접근 가능한 강의를 기획 못한 것이네요. ㅠㅠ 향후 무료강의(?) Html, Css 강의를(보충자료 포함, 충실하게 만들게요... 저도 이번 강의를 통해서 수강생분들이 강의요약 자료를 많이 원하신다는 처음 느꼈네요... ㅜㅜ) 만들고 여러분들께서 입문하기 편한 강의를 만들어야 한다는 사명감을 느끼고 월요일 밤을 마무리 하고자 합니다. 강의의 부족함의 노여움을 푸시고, 저의 수강생 분들에게(물론 필요는 없겠지만....) Html, css을 이용한 강의를 드리고자 약속하면서... 이 밤을 마무리하겠습니다. ㅠㅠ 연말되면서 일이 너무 바쁘네요. ㅠㅠ ps. 추천강의 코스: Html, css 학습 후 -> 자바스크립트 기초 강의 -> 리액트로 todo리스트 만들기 이정도 해보시길 추천드립니다. 위에 언급한 강의코스는 대부분 무료강의가 있습니다. 인프런에도 무료강의가 많으니 학습해보실 권해드립니다. ps2. 참고로 저도 리액트 배울때 리덕스 부분이 너무 어려워서,순수 리액트로만 state관리 -> graphql -> vue -> 를 배웠지만... 결국에는... 돌고돌아 리덕스로 돌아오더라고요... 리덕스 알기만 하면, 웹사이트 만드는게 정말 쉽고 재미있습니다.
2020-10-27
ALSO
MERN stack에 흥미를 가지고 있기때문에 싸플님의 MERN stack 강의를 계속 구매하거나 볼 것입니다. 꼭 초급 강의를 내주시면 감사하겠습니다. 기다리겠습니다!!
2020-10-27
gksrbanssla thumbnail
강의내용 및 편집이 훌륭합니다.
2021-05-06
kootae88 thumbnail
클론코딩!
2021-04-18
hse05105@naver.com thumbnail
중간중간 불친절해서 완강이 힘들었습니다
2021-04-17

29,700원

내 목록 추가 268 공유
지식공유자 : 싸플
총 66개 수업˙총 13시간 52분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스