Node.js와 React로 간단한 웹페이지를 만들어보자 2편

<목차>
BodyParser & PostMan & 회원 가입 기능
Nodemon 설치
비밀 설정 정보 관리

BodyParser & PostMan & 회원 가입 기능

client와 sever간의 통신을 위해 미리 준비해야할 것들이 있습니다.
client는 로그인할 때 정보를 입력하고, 서버에 이를 요청(request)합니다.
그 과정에서 client가 입력한 정보(body data)를 변환해야하는데요.
BodyParser는 Body Data를 분석(Parse)해서 req.body로 출력해줍니다.

그리고 PostMan은 현재 저희가 작성할 프로그램에는 client가 없기때문에 이를 대신하여 PostMan이 request를 보내주는 역할을 합니다.

먼저 BodyParser와 PostMan을 설치합니다.

npm install body-parser --save

PostMan 다운로드 링크

Register Route 만들기
index.js에 밑의 코드들을 추가하였습니다.

const bodyParser = require('body-parser');
const { User } = require("./models/User");

//application/x-www-form-urlencoded (이러한 형태의 데이터를 분석해서 가져올 수 있게함 )
app.use(bodyParser.urlencoded({extended: true}));

//application/json (json파일을 분석 후 가져올 수 있게 함)
app.use(bodyParser.json());

.
. (기존 부분 생략)
.

app.post('/register',(req,res) => {
  //회원가입 할 때 필요한 정보들을 client에서 가져오면
  //그것들을 DB에 넣어줍니다.

  const user = new User(req.body)

  user.save((err,doc) => {
    if(err) return res.json({success: false, err}) //에러가 뜰 경우
    return res.status(200).json({ //성공할 경우
      success: true //이게  POST MAN에 뜨면 회원가입 성공입니다.
    }) 
  })
})

먼저 Node SERVER를 실행하고, POST MAN으로 Register Route에 Request를 보냅니다.
npm run start 입력 후 port가 준비되고, MongoDB도 연결되면 아래의 사진처럼 뜹니다.

이후 POST MAN으로 이동하여 app의 주소와 회원가입 시 필요한 정보를 입력하여 send하면 아래의 사진처럼 회원가입 성공 시 success: true가 뜬 것을 확인할 수 있습니다.

NODE MON 설치

NODEMON은 소스의 변경을 감지하고 자동으로 서버를 재시작해주는 tool입니다. 이제 설치를 하기 위해 아래의 코드를 터미널에 입력합니다.

 npm install nodemon --save-dev

이후에 pakage.json을 보면 아래의 코드가 추가된 것을 확인할 수 있습니다.

"devDependencies": {
    "nodemon": "^2.0.18"
  }

그 외에도 pakage.json에서 수정해야할 부분이 있는데요.
NODE MON으로 프로그램을 시작하기 위해 scripts 부분을 수정합니다.

"scripts": {
    "start": "node index.js",
    "backend": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

원래는 start와 test만 있었던 데에 backend를 추가하였어요.
기존엔 node로 시작하던 것을 nodemon으로 시작하기 위해 추가한 것입니다. backend는 단순히 이름이기 때문에 다른 이름으로 바꾸어도 무관해요.

이제는 프로그램을 시작할 때 npm run start가 아니라
npm run backend를 입력하면 nodemon으로 시작할 수 있습니다.
그러면 프로그램이 중간에 수정되어도 바로 반영할 수 있는 환경을 구축한거라고 볼 수 있습니다.

비밀 설정 정보 관리

소스코드를 Git에 올리면 다른 사람들이 Secret한 정보들을 열람할 수 있게 됩니다. 그래서 비밀 정보들은 한 파일로 모아서 .gitignore 파일에 넣어두는 것이 매우 중요합니다.
그리고 이는 개발 환경이 로컬인지 배포 모드인지에 따라서도 다르게 적용해주어야합니다. (ex: heroku 서비스를 통해 배포하는 경우)

그래서 비밀 정보 관리 설정을 시작하도록 하겠습니다.

환경 변수로는 process.env.NODE_ENV를 두는데 development 시기에는 이 변수가 development로, 이미 배포한 이후면 production으로 값을 저장합니다.

그래서 config 폴더를 생성하고, 그 안에 dev.js와 prod.js를 만들어 구분하였습니다. 이 과정에서 변수 config.mongoURI를 사용해서 분기점을 생성하였는데 여기서 오류가 발생하였습니다.

mongoose.connect(mongoDB주소가 들어가는 곳, {})에서 직접 주소를 입력해놓은 상태에서는 연결이 성공적으로 되는 반면에 config.mongoURI라는 변수를 사용하면

MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a 
string.

라는 에러가 자꾸만 발생하였습니다.
구글링 해본 바로는 Heroku를 사용시 환경변수 process.env.NODE_ENV의 값을 디폴트로 producion으로 해주기 때문에 해당 강의에서는 자연스레 링크가 이어져서 정상적으로 앱이 작동했던 반면에 저의 경우에는 Heroku를 가입하지 않은 채로 해당 코드를 사용해 process.env.NODE_ENV의 값이 undefined 상태여서 정상적으로 MongoDB의 link가 연결되지 않아 발생한 오류였습니다. 그러나 지금 상황에서 Heroku로 배포를 할 계획은 없기 때문에 직접 MongoDB의 주소를 넣은 채로 진행하기로 하였습니다.

알아본 바로는 다른 곳에서 배포할때는 package.json에서 아래와 같이 수정해서 사용하기도 한다고 합니다.

"scripts": {
"dev": "NODE_ENV=development nodemon index.js",
"prod": "NODE_ENV=production node index.js",
"prod:compress": "NODE_ENV=production USE_COMPRESS=1 node index.js"
},

그리고 보안을 위해 .gitignore에 직접 DB주소가 적힌 dev.js를 적어놓는 일을 해두었습니다. (물론 저는 index.js에 그대로 주소가 적혀있기 때문에 큰 의미는 없습니다만)

오늘 들은 강의는 이렇게입니다.