MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React - goormEDU
All Lectures
RouteNoticeQ&A

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

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

Lecture Introduction
Difficulty
Normal
Category
Web Programming - Programming
Tag
데이터베이스, 리액트, 자바스크립트, 파이어베이스, node.js
Certificate
You can issue a certificate of completion
Target Audience
- React를 이용해 완성된 웹사이트를 개발해보고 싶은 사람
- BackEnd 지식이 부족해 프로젝트 구현이 힘든 사람
- 본인만의 사이트를 직접 배포해보고 싶은 사람

강의 주제

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

주요 기술

  • React
  • Express
  • MongoDB / Mongoose
  • Firebase




그런데 React가 뭐죠? ✨

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

React의 특징

  • JSX
    Javascript XML으로서, XML/HTML과 같은 문법입니다. HTML과 유사한 코드가 JS 안에서 동작될 수 있도록 하며 이는 다시 브라우저가 읽을 수 있는 JS로 최적화되어 랜더링되기 때문에 일반 JS보다 훨씬 빠른 속도를 자랑합니다.
  • Virtual DOM
    2013년 이전에는 웹사이트 혹은 웹페이지가 새로운 데이터를 사용자에게 보여줄려면, 우리는 항상 새로고침을 이용해야 했습니다. 그러나 React는 필요한 부분만 데이터가 바뀌는 부분만 새로 보여주며 웹페이지를 재랜더링 할 필요가 없습니다. 이는 사용자가 앱과 유사한 경험을 React WEB/APP에서 제공해줄 수 있단 뜻이죠! 




학습 내용

  • React
    게시글 작성, 회원가입 등 다양한 컴포넌트를 만들어보며 커뮤니티 사이트에 필요한 모든 기능을 구현합니다. 필요에 따라 Hook을 컴포넌트 사이클에 맞추어 제공하고, User 서비스는 Firebase를 사용하여 빠르게 개발하며 이는 redux를 사용해 관리됩니다. 
  • Express
    Express를 통해 Web-Server를 제작하고, React로 만든 App을 보여줍니다. client 단에서 전송되는 텍스트/이미지 데이터들을 DB, 혹은 서버에 저장합니다. 이번 강의에선 Naver Cloud를 사용하여 외부 Storage에 이미지를 저장하는 법 역시 학습합니다.
  • MongoDB / Mongoose
    NoSQL DB인 MongoDB를 Mongoose를 통해 관리합니다. 게시글 정보와 사용자 정보를 DB에 저장하고, 읽고, 수정하고, 삭제하는 CRUD 과정에 대해 학습합니다. 이 과정에서 Mongoose를 사용하여 MongoDB에서 Model을 생성하고, 그 Model을 다양한 method로 다룹니다. 
  • React-Bootstrap , Emotion
    빠르게 UI/UX를 완성할 수 있는 React-Bootstrap을 프로젝트에 도입하고, 필요에 따라 SASS 기반 스타일링 라이브러리인 Emotion을 활용하여 웹사이트 디자인을 제작합니다.




제가 이 강의를 들어도 될까요? 

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

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

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

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

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

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

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

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

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




강의를 들으시면서, 혹은 다 듣고 난 이후에 질문, 사이트에 추가하고 싶은 기능이 있다면 "질문" 기능을 활용해주세요! 많은 수강생들이 원하시는 부분이라면 추가적으로 강의를 제작하여 탑재하도록 하겠습니다. :)

완성된 사이트를 직접 확인해보세요!

사이트 예제 링크



Preview
Expand All
Curriculum
Expand All
  • 01
    intro
  • Introduction
    MERN Stack
    Setting
    Create-React-App
  • 02
    React
  • Component
    JSX
    useState (1)
    useState (2)
    useState (3)
    react-router-dom
    props
    useEffect
  • 03
    Express/Mongoose/Style
  • Express
    MongoDB
    axios & cors
    Mongoose Model
    React Bootstrap
    Emotion
  • 04
    Post
  • Create
    Read (1)
    Read (2)
    Update
    Delete & Router
    ImageUpload_Server (1)
    ImageUpload_Server (2)
    ImageUpload_S3 (1)
    ImageUpload_S3 (2)
    ENV
  • 05
    Authentication
  • User Component
    Redux (1)
    Register (1)
    Register (2)
    Login
    Redux (2)
    Logout
    Post-User
    NameCheck
  • 06
    Reple
  • Reple Component
    Reple Upload
    Reple Read
    Reple Content
    Reple Update
    Reple Delete
  • 07
    ScaleUp
  • User Profile
    Timestamp
    Sort, Search
    Load More
  • 08
    Outtro
  • Heroku
    Source Code
Instructor Introduction
hello.Goorm Edu Captain 판다코딩.Let's start learning together!

Lecture Reviews
38,500

Average Rating
5.0
Difficulty
Normal
Lecture Period
Unlimited