MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
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를 포함하여), 사용자 정의 함수의 선언과 사용 정도의 지식이 있다면 큰 지장이 없을 것 같습니다.
이런 분들께
추천드려요!
학습 대상은
누구일까요?
React를 이용해 완성된 웹사이트를 개발해보고 싶은 사람
BackEnd 지식이 부족해 프로젝트 구현이 힘든 사람
본인만의 사이트를 직접 배포해보고 싶은 사람
선수 지식,
필요할까요?
HTML/CSS
JavaScript
커리큘럼
전체
49개 ∙ (6시간 45분)
해당 강의에서 제공:
Introduction
02:59
MEAN Stack
06:40
Setting
02:14
Create-React-App
04:31
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
Express
12:10
MongoDB
08:45
axios & cors
11:42
Mongoose Model
08:13
React Bootstrap
06:55
Emotion
13:47