Node.js, React 익히기 - 2

계속 이어서,

Node.js(Server) - HTML(Client) 소통설정(회원가입 예)

Node.js는 클라이언트 측의 정보를 BodyParser을 통해서 가져오는데, 그냥 쉽게 얘기하면 HTML에서 사용자가 볼수 있는 Body부분에 정보를 입력하면 그 정보가 서버에 요청되고, 이러한 Body의 정보를 Parsing 해주는 뭐 그런거라고 생각하면 될 것 같다. node.js의 모듈로, body내 파라미터를 편리하게 가져오는데 도움을 준다.

더 자세한 내용은 아래 블로거분의 글이 명료하니 좋은 것 같다.

https://medium.com/@chullino/1%EB%B6%84-%ED%8C%A8%ED%82%A4%EC%A7%80-%EC%86%8C%EA%B0%9C-body-parser%EB%A5%BC-%EC%86%8C%EA%B0%9C%ED%95%A9%EB%8B%88%EB%8B%A4-%ED%95%98%EC%A7%80%EB%A7%8C-body-parser%EB%A5%BC-%EC%93%B0%EC%A7%80-%EB%A7%88%EC%84%B8%EC%9A%94-bc3cbe0b2fd

[1분 패키지 소개] : body-parser를 소개합니다. 하지만, body-parser를 쓰지 마세요.

npm install body-parser --save

명령어로 설치가능하다

그리고 Postman이 혹시 안깔려져 있다면 서버-클라이언트의 소통을 확인할 수 있게 해주는 툴인 Postman을 설치하도록 하자. 나는 깔려있는 관계로 생략했는데 아래 사이트에서 다운로드 가능하다.

https://www.postman.com/downloads/

Download Postman | Get Started for Free

 

 

우선 우리는 회원가입을 구현해볼 것이다, 그를 위해서 Route를 하나 설정해줘야하는데("HelloWorld!" '/' 경로 설정해줬던 것 처럼) 

index.js 내에, post 방식으로 route를 하나 설정해주었다. 우선은 거의 만든 건 없고 user 모델을 선언해준다.

app.post('/register', (req, res) => {
    // 회원 가입 시 필요한 정보들을 클라이언트에서 가져오면, 그것들을 DB에 넣어준다
    // 그래서 유저 모델을 가져와야

    const user = new User
})

<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
app.use(bodyParser.json());

위의 코드는 아까 설치한 모듈인 bodyParser을 가져오는 것과 User 모델을 models에서 가져오는 것이다.

bodyParser 사용을 위해서 클라이언트 측으로 부터 urlencoded된 형식의 데이터를 가져오는 설정인 .urlencoded와 .json을 각각 해주어야 한다.

 

그리고 html내 body측에서 가져오는 정보들은

app.post('/register', (req, res))

에서 req에 넣어지게 되는데 그러한 정보들을 DB에 저장해야 하므로

const user = new User(req.body)

req.body 인자를 User에 던져준다. req.body가 가능한 이유는 bodyParser 모듈이 body내 정보들을 가져와줄 수 있어서 가능한 것이라고 생각하면 되겠다.

 

그리고 user.save를 통해서 DB에 저장하는데 저장하는데 문제가 있을 때 예외처리와 성공시 처리를 저렇게 해주면 되겠다.

app.post('/register', (req, res) => {
    // 회원 가입 시 필요한 정보들을 클라이언트에서 가져오면, 그것들을 DB에 넣어준다
    // 그래서 유저 모델을 가져와야

    const user = new User(req.body)
    user.save((err, userInfo) => {
        //저장시 에러가 있다면, 클라이언트에 에러가 있다고 전달(json형식으로)
        if(err) return res.json({success: false, err})
        return res.status(200).json({
            // 성공 시에는, 성공했다고 전달
            success: true
        })
    })
})

이렇게 해주고 나서 npm run start 해주고 해당 경로로('/register') postman을 통해 확인해보자.

새로운 HTTP request 하나를 만들어서 Post로 해둔 다음(아까 우리가 Post로 설정해두었으니) 이후 해당 경로의 url을 넣고, body 부분으로 raw 데이터에서 json 형식으로 아래와 같이 세가지만 보내주었다.

send 버튼을 누르면, 안되네?

확인해보니까 내 로컬 IP가 whitelist에 없단다. 추가해주자.

내 컴퓨터 IP 를 추가해주고 다시 Send 버튼을 누르면,

success가 뜬다.

 

Node Mon 다운로드

Node Mon은 우리가 소스코드를 변경할 때마다 npm run start를 새로 시작할 필요가 없도록 자동으로 서버를 재 시작해주는 툴이다. 편리한 기능을 제공하기에 설치해보도록 하자.

npm install nodemon --save-dev

을 터미널에서 실행해주기만 하면 된다.

* -dev? -- local에서 development 모드에서만 사용하겠다는 뜻이다. product로 사용되고 있는 경우에는 소스코드가 변경할 때마다 적용되면 불리한점이 있기에 구분

그리고 package.json에서 nodemon을 이용해서 사용가능하게 backend 명령어를 설정해주었다

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

이제 npm run backend 명령어 실행 후, index.js가 돌아가면 재실행할 필요없이 수정한 것이 즉각 반영된다.

 

민감한 정보 설정관리

우리가 git push 할때, 민감한 정보는 어떻게 관리해야할까. 예컨대 우리가 만든 파일에서만 보아도 mongoose.connect 부분에서 사용되는 소스에 <password>란이 있는데, 바로 올리면 보안상의 문제가 생긴다는 점을 알아차릴 수 있을 것이다. 이를 관리하는 방법은 해당 비밀 정보를 다른 파일로 관리를 하고, 그 부분을 불러와서 적용하는 것이다. 이후에 gitignore에 민감한 정보를 관리하는 파일을 적용하면 git push를 해도 민감한 정보는 함께 올라가지 않을 것이다.

 

그래서 우선 프로젝트 폴더에 config라는 이름의 폴더를 추가해주고 그 안에 dev.js파일을 만들어줬다. 

config - <dev.js>

module.exports = {
    mongoURI: 'mongodb+srv://seunghwan:<password>@atlascluster.scdh2ae.mongodb.net/?retryWrites=true&w=majority'
}

그리고 위와같이 소스를 만들어주면 된다.

그런데 여기서 한가지, 개발환경은 두 가지로 나뉘는데. 하나는 로컬 환경에서의 development 모드이고 하나는 서비스를 배포한 후의 production 모드이다. 보통 development 모드에서는 위의 URI의 변수를 갖다 쓸수는 있지만, production 모드에서는 만약 Heroku 호스팅 서버를 사용한다고 치면 해당 웹사이트에서 Config Vars 부분에 추가해주어야 한다.

인터넷에서 찾은 Config Vars

그래서 우선 config 폴더 내에 dev.js 말고도 prod.js와 key.js 파일을 각각 만들어주었다.

config - <prod.js>

module.exports = {
    mongoURI: process.env.MONGO_URI
}

즉 production 모드일 때 mongoURI로 Config Vars에 추가된 변수명이 MONGO_URI인 값을 쓰겠다고 설정한 것이다.

 

config - <key.js>

if(process.env.NODE_ENV === 'production'){
    module.exports = require('./prod')
} else {
    module.exports = require('./dev')
}

key.js는 보면 알다시피 현재 서비스의 모드가 production이면 process.env.NODE_ENV가 production을 return 하는데 만약 production 모드라면 prod.js를 참고하고, 아니면(development 모드) dev.js를 참고하겠다는 것이다.

 

이를 사용할 수 있도록 index.js에서,

const config = require('./config/key')

config라는 변수로 key를 불러와주고,

mongoose.connect(config.mongoURI,
).then(() => console.log('MongoDB Connected...'))
 .catch(err => console.log(err))

mongoose.connect 부분에서 config.mongoURI를 함께 던져주는 설정을 해주면 된다 .

실행이 잘 되는 걸 보니 잘 작동한다.

이제 github에서 해당 파일이 안보여야 하니까 gitignore에 dev.js 한 줄 추가만 하면 된다.

그런기념으로 커밋해주기~