MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React - goormEDU
오늘은 9름데이!
지금 모든 강좌 10% 추가 할인10% 추가 할인받으세요.
ll:ll:ll후에 종료됩니다.
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
TipFor more detailed information, such as other courses and reviews from the instructor, you can view the instructor introduction page by clicking on their profile.

Lecture Reviews
38,500

Average Rating
0.0
Difficulty
Normal
Lecture Period
Unlimited