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

강의 주제

• 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를 포함하여), 사용자 정의 함수의 선언과 사용정도의 지식이 있다면 큰 지장이 없을 것 같습니다. 

---

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

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

사이트 예제 링크