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

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React 대시보드

(4.7)
27개의 수강평 ∙  287명의 수강생

38,500원

지식공유자: 판다코딩
총 49개 수업 (6시간 45분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변: 미제공
폴더에 추가 공유

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

MERN Stack을 활용하여 커뮤니티 어플리케이션을 제작하고, 배포합니다. (MongoDB, Express, React, Node + Firebase)

✍️
이런 걸
배워요!
React
Express
MongoDB (Mongoose)
Firebase (Authentication)
AWS E3 (Naver Cloud Service)

MERN Stack으로 배우는 풀스택 웹 프로그래밍!

MongoDB, Express, React, Node.js 
커뮤니티 사이트 제작 (feat. Firebase) 

  • ✅ MERN Stack을 활용하여 커뮤니티형 웹사이트를 개발합니다.
  • ✅ Front-end와 Back-end 모든 지식을 다루며, 완성된 WEB/APP 제작을 목표로 합니다.

이 강의에서 다루는 기술

React 
(리액트) 

Express 
(익스프레스) 

MongoDB/Mongoose 
(몽고DB/몽구스) 

Firebase 
(파이어베이스) 


그런데, React가 뭐죠? ✨

React는 Facebook에서 만든 JavaScript 라이브러리입니다.
Vue.js, Angular 등 오늘날 우리가 사용할 수 있는 많은 Javascript Framework/Library가 있음에도 React는 Front-end 세상에서 가장 인기있고, 개발자가 가장 많이 찾는 옵션 중 하나입니다. 

React의 특징

1️⃣ JSX

Javascript XML으로서, XML/HTML과 같은 문법입니다. HTML과 유사한 코드가 JS 안에서 동작될 수 있도록 하며 이는 다시 브라우저가 읽을 수 있는 JS로 최적화되어 렌더링되기 때문에 일반 JS보다 훨씬 빠른 속도를 자랑합니다.

2️⃣ Virtual DOM

2013년 이전에는 웹사이트 혹은 웹페이지가 새로운 데이터를 사용자에게 보여주려면 항상 새로고침을 이용해야 했습니다. 그러나 React는 필요한 부분만 데이터가 바뀌는 부분만 새로 보여주며 웹페이지를 재렌더링할 필요가 없습니다. 이는 사용자가 앱과 유사한 경험을 React WEB/APP에서 제공해줄 수 있단 뜻이죠! 


강의 하나에 
MERN Stack을 잡았다!

#1.
React

게시글 작성, 회원가입 등 다양한 컴포넌트를 만들어보며 커뮤니티 사이트에 필요한 모든 기능을 구현합니다. 필요에 따라 Hook을 컴포넌트 사이클에 맞추어 제공하고, User 서비스는 Firebase를 사용하여 빠르게 개발하며 이는 Redux를 사용해 관리됩니다. 

#2.
Express

Express를 통해 웹 서버를 제작하고, React로 만든 앱을 보여줍니다. 클라이언트단에서 전송되는 텍스트/이미지 데이터들을 DB, 혹은 서버에 저장합니다. 이번 강의에선 Naver Cloud를 사용하여 외부 스토리지에 이미지를 저장하는 법 역시 학습합니다.

#3.
MongoDB / 
Mongoose

NoSQL DB인 MongoDB를 Mongoose를 통해 관리합니다. 게시글 정보와 사용자 정보를 DB에 저장하고, 읽고, 수정하고, 삭제하는 CRUD 과정에 대해 학습합니다. 이 과정에서 Mongoose를 사용하여 MongoDB에서 모델을 생성하고, 그 모델을 다양한 method로 다룹니다. 

#4.
React-Bootstrap, 
Emotion

빠르게 UI/UX를 완성할 수 있는 React-Bootstrap을 프로젝트에 도입하고, 필요에 따라 SASS 기반 스타일링 라이브러리인 Emotion을 활용하여 웹사이트 디자인을 제작합니다.

로그인/로그아웃 구현
유저 프로필 등록 구현

제가 이 강의를  
들어도 될까요? 🙋‍♂️

혹시 프로그래밍에 입문하시면서 본인만의 웹사이트를 직접 배포까지 경험해보고 싶으신 적 없으셨나요? 이번 강의는 프론트엔드와 백엔드 영역을 모두 다루기에, 강의를 따라오시는 것만으로도 여러분만의 웹 사이트를 만드실 수 있습니다.

Q. 이 강의를 통해 웹 개발에 입문해도 될까요?

이번 강의에서 사용하는 모든 스택은 해당 기술을 처음 접하는 사람들을 대상으로 강의 내용이 기획되었습니다. 따라서, 해당 기술에 대한 지식이 전무하셔도 강의를 수강하시는 데에 큰 지장이 없도록 충분한 설명이 이루어지나 HTML/JS/CSS 등 기초적인 웹개발 지식이 없다면 다소 어려우실 수 있습니다. (선수 지식을 꼭 확인해주세요!)

Q. 저는 프론트엔드(백엔드)밖에 경험이 없는데 괜찮을까요?

커뮤니티 웹사이트 제작에 반드시 필요한 부분만 효율적으로 학습하며, 새로운 기술 스택을 사용할 때마다 "왜 이 기술을 사용해야 하는지", "이 기술은 어떻게 사용하는지" 등의 정보를 강의 내부에 충분히 녹여냈습니다. 기본적으로 React가 메인인 강의이지만, 웹사이트의 전체적인 흐름을 잡을 수 있기 때문에 어떠한 방향의 개발자를 희망하시든 자신있게 추천드릴 수 있을 것 같습니다. 

Q. 이 강의를 통해 MERN Stack을 모두 마스터할 수 있나요?

아닙니다. 이 강의는 프레임워크, 혹은 라이브러리를 도입하여 웹사이트를 처음 개발하는 사람의 수준으로 난이도가 설정되어 있기 때문에 스택별 초/중급 정도의 내용을 다룹니다. 이번 강의를 통해서 본인의 웹 적성을 확인하시는 것도 하나의 좋은 방법이 될 것 같습니다.

Q. 어느 정도의 선수지식이 필요할까요?

이 문서를 살펴보시는 것이 좋을 것 같습니다. 기본적으로 JavaScript의 Data형과(배열과 object를 포함하여), 사용자 정의 함수의 선언과 사용 정도의 지식이 있다면 큰 지장이 없을 것 같습니다.

🚩 수강생 여러분의 피드백과 함께합니다!

  • 강의를 들으시면서, 혹은 다 듣고 난 이후에 질문하고 싶거나 추가하고 싶은 기능이 있다면 "질문" 기능을 활용해주세요! 많은 수강생들이 원하시는 부분이라면 추가적으로 강의를 제작하여 탑재하도록 하겠습니다 :)
  • 완성된 사이트를 직접 확인해보세요!
    https://react-community.herokuapp.com/

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
React를 이용해 완성된 웹사이트를 개발해보고 싶은 사람
BackEnd 지식이 부족해 프로젝트 구현이 힘든 사람
본인만의 사이트를 직접 배포해보고 싶은 사람
📚
선수 지식,
필요할까요?
HTML/CSS
JavaScript

안녕하세요
판다코딩 입니다.
판다코딩의 썸네일

문의 : nani6765@gmail.com


주요이력 

[대외활동]
- 한국대학생IT경영학회 22기 부학회장

[경력/이력]
- 전 주식회사 아이보스 분석팀 (2019)
- 전 주식회사 미라이크 Developer (2020)
- 전 미디어프렌드 CTO (2021 ~ )

[강사/강의]
- 인프런 강의 다수
- 국비지원과정 특강 다수
- 부트캠프 HTML/CSS/VUE 강사

커리큘럼 총 49 개 ˙ 6시간 45분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. React
Component 미리보기 11:09 JSX 미리보기 11:42 useState (1) 미리보기 08:01
useState (2) 06:21
useState (3) 07:50
react-router-dom 10:06
props 06:24
useEffect 06:52
섹션 2. Express/Mongoose/Style
Express 12:10
MongoDB 08:45
axios & cors 11:42
Mongoose Model 08:13
React Bootstrap 06:55
Emotion 13:47
섹션 3. Post
Create : 게시글 생성하기 07:29
Read (1) : 게시글 불러오기 06:47
Read (2) : 게시글 불러오기 15:12
Update : 게시글 수정하기 09:04
Delete & Router : 게시글 삭제하기 & Router 07:49
ImageUpload_Server (1) : 이미지 서버에 업로드하기 07:42
ImageUpload_Server (2) : 이미지 서버에 업로드하기 09:48
ImageUpload_S3 (1) : 이미지 외부 저장소에 업로드하기 09:17
ImageUpload_S3 (2) : 이미지 외부 저장소에 업로드하기 06:03
ENV : 환경 변수 06:37
섹션 4. Authentication
User Component : 로그인/회원가입 컴포넌트 생성하기 06:22
Redux (1) 08:50
Register (1) : 회원가입 구현하기 08:30
Register (2) : 회원가입 구현하기 09:51
Login : 로그인 구현하기 05:27
Redux (2) 11:47
Logout : 로그아웃 구현하기 04:40
Post-User : 게시글 정보와 회원 정보 연동하기 09:48
Name Check : 닉네임 중복검사 06:44
섹션 5. Reple
Reple Component : 댓글 컴포넌트 09:22
Reple Upload : 댓글 업로드 05:50
Reple Read : 댓글 불러오기 04:54
Reple Content : 댓글 내용 채우기 07:04
Reple Update : 댓글 수정하기 06:21
Reple Delete : 댓글 삭제하기 05:16
섹션 6. ScaleUp
User Profile : 회원 정보 수정하기 23:39
Timestamp : 게시글에 시간 정보 입력하기 09:04
Sort, Search : 게시글 검색 기능, 정렬 기능 구현하기 08:56
LoadMore : 게시글 일부만 불러오기, 더 불러오기 08:19
섹션 7. Outtro
Heroku : 배포하기 12:31
Source Code
강의 게시일 : 2022년 01월 19일 (마지막 업데이트일 : 2022년 01월 26일)
수강평 총 27개
수강생분들이 직접 작성하신 수강평입니다.
4.7
27개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
copperhun thumbnail
5
진행속도 개빨라서 좀 빡셉니다. 근데 백엔드부분 너무 유용한거같아요. 초보여도 볼만한듯. 계속 반복해서 볼 예정
2023-01-18
지식공유자 판다코딩
감사합니다 :)
2023-03-31
새옹지마 thumbnail
4
React와 node를 한번씩 다뤄본 후 강의 수강했습니다. 전반적으로 예전에 배운 내용을 훑으며 상기시키기에 좋았고 react와 node를 어떻게 연결하여 다룰지 막막했는데 axios로 서버와 클라이언트 데이터 옮기는 법을 알게 되었습니다. 다만 아쉬웠던 점은 강사님 ide에 폰트가 너무 작아서 제 태블릿으로 강의를 보면 가독성이 좋지 않았고 짧은 수업으로 다양하게 전반적으로 다뤄주시려다보니 redux파트는 코드가 전혀 이해가 되질 않아서 예전에 봤던 강의를 한번 더 뒤적여봤습니다. 아마존 S3를 사용하는 것이 네이버 클라우드를 이용하는 것인 줄도 사실 몰랐습니다. 이건 제 잘못이군요. 마지막으로는 질문을 올려도 답변이 2주째 안 오고 있습니다. 강사님이 바쁘신건지 ㅠㅠ.. 유료 강의인 만큼 조금 더 질문 답변에 신경써주셨으면 하는 마음이 있네요. 그래도 전반적으로 프론트, 백엔드, db, 외부 저장소 어떻게 사용해야 할지 큰 그림을 잡을 수 있는건 좋았습니다.
2023-02-13
지식공유자 판다코딩
감사합니다 :)
2023-03-31
Dana Kim thumbnail
5
강의 너무 유익하고, 쉽게 알려주십니다! 인프런에서 다른 강의 이것저것 많이 수강해봤는데, 리뷰 처음 달아볼 정도로 만족도 높은 강의에요 ! 디테일하게 AtoZ 다뤄주시는 것도 너무 좋았고, 조금 더 쉽게 이해할 수 있는 포인트를 잘 집어주신 것 같아요. 사실 비전공자로서 개발배우기 막막했는데 깔끔한 설명이 너무 좋아요. 최근 여러 웹사이트에서 활용하는 react 라이브러리 사용하니까 실무에서도 많이 도움될 거 같다는 생각이 들었습니다! react 관심 있으신 분들 이 강의 한번 들으면 아주 깔끔하게 이해되실 것 같아요 :) 판다코딩님 좋은 강의 정말 감사합니다 !! 다른 강의도 얼른 내주세요!!!
2022-01-19
지식공유자 판다코딩
감사합니다 :) - 첫 번째로 수강평을 남겨주셨네요, 감사합니다 :) 저도 비전공자의 입장에서 코딩을 입문하였고, 현재 개발자로 일하고 있습니다. 코딩을 배우며 가장 중요한 점 중 하나는 코딩에 관련된 흥미를 잃지 않는 것이라고 생각합니다. 그런 의미에서 단순한 문법 설명과 나열의 강의를 탈피하고자 많이 애썼습니다. 앞으로도 코딩에 흥미를 잃지 않으실 수 있도록 애써보겠습니다.
2022-01-19
김동민 thumbnail
5
속도가 조금 빠르긴하지만 괜찮아요 여러번 들으면됩니다~~ 이제 30% 조금 넘겼는데 재밌어요 ~ 뷰로 개발하다가 리액트 해보려니 겁났었는데 강사님덕분에 재밌게 하고있어요! // 추가 너무 바빴어서 끝까지 듣는데 시간이 꽤 오래걸렸네요 ㅜㅜ 얻어가는게 너무 많아서 어떻게 감사드려야 할지 모르겠습니다! 웹개발이 어떤식으로 진행되는지 큰 그림 잡기 너무 좋았고 아직 많이 부족한 부분들을 알게 되었기에 그 부분은 제가 따로 프로젝트 진행하면서 더 공부해 나갈 생각입니다. 감사합니다~
2023-02-14
지식공유자 판다코딩
감사합니다 :)
2023-03-31
류지창 thumbnail
5
기대했던 것 보다 더 여러가지를 배울 수 있었던 것 같습니다. 단순히 데이터베이스와 기술스택의 사용법만이 아닌 응용하는 법을 배울 수 있었고 작성하는 방식의 차이로 인해 여러가지 개선점을 확인할 수 있었습니다.
2022-11-08
지식공유자 판다코딩
감사합니다 :) - 죄송합니다. 답변이 늦었네요! 단순히 문법을 배우는 데에 그치지 마시고 그것을 응용하고 사용하는 방법을 배워가셨으면 좋겠습니다 (__)
2022-12-23