[Web] - 4편 React & MongoDB 설치

리액트는 '사용자 인터페이스를 만들기 위한 JavaScript 라이브러리'이다.

 

Front : react

Back : nodejs + express

DB : mongodb

로 이뤄진 프로젝트를 기획중인데, 준비하며 리액트 공부를 해보고자 한다.

 

2편까지의 setting으로 node와 npm을 설치해준다.

 

1. npm의 상위호환인 yarn을 설치해준다. (성능 속도를 개선했다고 한다.)

 

$ sudo npm install -g yarn

 

2. create-react-app을 설치하고, 프로젝트 폴더를 생성한다. (이하 myshop 자리엔 프로젝트 폴더)

$ sudo yarn global add create-react-app
$ sudo create-react-app myshop

생성되면 다음과 같이 뜸

 

3. 그리고 리액트 앱 구동해보기전 포트 작업을 해준다.

본인처럼 iwinv에서 방화벽을 쓰거나, AWS에서 자체 방화벽을 쓴다면 Inbound 규칙을 추가해준다.

$ sudo iptables -I INPUT 1 -p tcp --dport 3000 -j ACCEPT

리눅스 내부에서도 3000포트를 열어준다.

 

4. sudo yarn start로 제대로 구동되는지 확인해본다.

 

5. nodemon을 설치해준다. 이러면 개발할때 코드가 수정되면 자동으로 반영해준다.

$ sudo yarn global add nodemon

---

NoSQL DB 중 하나인 mongoDB이다.

 

1. mongoose와 dotenv, cors를 설치해준다.

$ sudo yarn add cors mongoose dotenv

mongoose는 mongoDB를 사용하기 위한 라이브러리이고, dotenv는 DB의 URL을 감추기 위한 파일이다.

 

2. mongoDB에 회원가입해주고, 무료 버전 DB를 만들었다.

 

3. connect 페이지에 들어가서 2번째 Connect your application 선택

4. nodejs 버전 맞춰주고 url을 긁어온다. 이걸 .env라는 파일을 만들어서 복붙하면 되는데 아래와 같은 느낌이다.

mongodb+srv://<user_name>:<password>@cluster0.i5pie.mongodb.net/myFirstDatabase?retryWrites=true&w=majority

5. 참고로 비번 만들때 특수문자를 안섞는게 좋은데, 나중에 

MongoParseError: mongodb+srv URI cannot have port number

이런 에러를 만났다. 만약 특수문자가 들어가있다면 <password> 자리에 % formating을 해줘야한다. 

Ex) @ 를 %40 으로 적는...

 

6. 이후 server.js를 다음과 같은 형식으로 작성하고

const { MongoClient } = require('mongodb');
const uri = "mongodb+srv://wq0212:<password>@cluster0.i5pie.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });
client.connect(err => {
  const collection = client.db("test").collection("devices");
  // perform actions on the collection object
  client.close();
});

 

7. sudo nodemon server 으로 실행해주면 된다.

 

8. 되야하는데 이런 에러를 마주했다.

MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't whitelisted.

 

처음엔 화이트 리스트에 등록이 안된 mongodb access 문제인줄 알고 30분을 허비했으나...

정답은 iwinv 차원에서 제공하는 방화벽 문제였다.

Out bound 규칙에 27017 port를 개방시켜주면 문제가 해결되었다.

연결 성공