앞의 노드, 리액트 기초 시리즈 에서 이어지는 내용은 아니지만 기초 세팅에 필요한 Boiler-plate를 기초 시리즈에 기반을 두고 이것저것 보완하신 코드이기에 먼저 정독하고 오면 좋다. 그리고.. 아예 node나 react에 대해 모르는데 기초 시리즈 안듣고 이것부터 들으면.. 이해가 안된다.
⚙️ Boiler-plate 기초 세팅
1. boiler-plate clone
해당 강의에서는 boiler-plate를 제공하므로 해당 코드에 기반을 두고 기능을 더해나간다!
git clone https://github.com/jaewonhimnae/boilerplate-mern-stack2. dependency 재설치
clone 해온 프로젝트의 dependency들을 재설치해주는 과정이 필요하다.
server와 client 모두 node module들을 재설치 해주어야하므로 각각의 디렉토리에서 한번씩 실행해준다.
npm install➕ Boiler-plate 살펴보기
boiler plate를 아예 모르고 넘어가기에는 너무 아까워서 조금 살펴보았다.
회원가입, 로그인 기능과 스타일이 구현되어있고,landingPage에 필요한 컴포넌트들의 스타일 정도가 구현되어있다.
아래는 client만 살펴 본 내용이다!(server는 아직 잘 모른다..)
1. 회원가입, 로그인
- 유효성 검증
formik, Yup 등으로 입력값에 대한 유효성 검증 처리를 해둔 것 같다.
추후에 해당 코드를 기반으로 react hook form 을 사용해서 리팩토링 해보려 한다! - 디자인
디자인은 AntD 프레임워크를 써서 예쁘게 디자인 해두었고, 요것은 고대로 가져가겠다. - gravatar
회원가입에서 gravatar라는 것을 봤는데 뭐.. 찾아보니 유저 이미지에 관련된 부분인 것 같다.
기존에 기초 시리즈의 코드보다 훨씬 더 길어져서 겁먹었는데 살펴보니 크게 특징적인 부분은 없고 CSS 관련한 작업으로 인해 길어진 것 같다.
⚙️ MongoDB 기초 세팅
1. server/config/dev.js 파일 생성
server/config/key.js 파일을 살펴보면 process.env.NODE_ENV 속성이 production인지 아닌지에 따른 분기처리를 해두고 있는데, 배포한 경우에도 로컬에서 작업하지는 않으니 환경에 따라 분기하는 과정이 필요하다.
지금은 로컬에서 작업중인 상황이니 dev.js 파일을 만들어서 해당 파일 안에 본인의 MongoDB_URI를 해당 파일 안에 있는 변수를 사용하게 한다.
module.exports = {
mongoURI: process.env.MONGO_URI,
};2. mongoDB 연결
mongoDB에 프로젝트를 연결해준다.
mongoDB 연결에 관해서는 해당 포스팅에 자세하게 기술되어있다.
3. server/config/dev.js 파일 수정
클러스터를 생성한 후 나온 application code를 앞서 생성한 파일인 dev.js에 넣어주어 수정하자!
mongodb+srv://<username>:<password>@travel-shopping-mall.pl76hss.mongodb.net/?retryWrites=true&w=majority➕ 참고
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기 를 공부하며 작성한 글입니다.
