개요 및 기본구조
개요
우선, 해당 프로젝트에서 사용자의 게임기록, 랭킹 등의 데이터를 수집하기 위해 백엔드와 통신했어야 했고, MySQL과 같은 데이터베이스 관리 시스템과 연동하기 위해 node.js를 사용했다.
node.js는 서버가 아니라 자바스크립트를 동작할 수 있는 시스템으로써, 자바스크립트 런타임이다.
해당 프로젝트에서 node.js는 MySQL과 연동시키기 위함이기때문에 node.js의 문법은 거의 사용하지 않았고, Express 등 MySQL과 연동을 위한 내용들만 기록해놓겠다.
node.js 설치
위의 링크에서 node.js를 먼저 설치해야 한다.
터미널에서 다음과 같이 실행시키면 버전을 확인할 수 있다.
node -vexpress
node.js를 설치했다면 REST 서버를 편리하게 구현하게 해주는 프레임워크인 express를 설치해주면 된다. express 또한 설치해주고 기본설정을 해보자. 해당 프로젝트 폴더에 들어가서 다음과 같이 해준다.
해당 프로젝트에서는 MySQL과 연동시키고 백엔드와 통신하기 위함이기에 simple-server 폴더를 생성해서 거기서 실행했다.
npm init -y
yarn init이제 package.json 파일이 생성되었을 것이다. 그리고 express 를 다음과 같이 설치해준다.
npm install express
yarn add express그리고 nodemodules 폴더가 생성된 것을 확인할 수가 있다. 이 폴더엔 무수히 많은 폴더와 파일이 들어가 있는데, node에서 사용할 모듈들이 저장되어 있는것이다. express도 폴더에 위치해있다. 다음과 같이 express 모듈을 사용해준다.
require를 통해서 express 모듈을 가져와서 사용한다.
app이라는 변수에 express 함수의 변환값을 할당한다.
// index.js
const express = require('express')
const app = express()
const port = 65100
app.get('/', (request, response) => {
response.send('hello, world!')
})
app.listen(port, () => {
console.log(`example service app listenling at http://localhost:${port}`)
})이제 express를 이용해 간단한 서버를 구현했고 이는 다음과 같은 명령어로 실행하면 된다.
node index // index.js라고도 가능(파일 이름을 적으면 됨.)이제 http://localhost:65100 에 입장하면 "hello, world!" 가 쓰여져 있음을 확인할 수 있다.
MySQL과 연동
node.js를 설치했다면 연동시킬 MySQL 또한 설치해야한다.
다음과 같이 —save를 해주면 package.json의 dependencies에 mysql의 버전이 추가된다.
dependencies는 소스코드 사이즈를 최소화해 다른 환경에 코드를 옮길 때 설치한 모듈들을 같이 이동하지 않고 package.json만을 이동하여 동일한 패키지들을 설치할 때 사용된다.
npm install --save mysql
yarn add mysql
MySQL을 설치했다면 다음과 같이 mysql.js 파일을 만들어서 기본설정을 해준다. 다음은 mysql.js의 전체코드이다.
connection변수는 연결할 때 사용되는 정보를 담고 있다..connect()메소드를 통해mysql에 연결한다.- 비밀번호는 별도의 파일로 분리해서 버전관리에 포함시키지 않아야한다.
- 해당 파일을
exports를 해줌으로써index.js와 연동시킬 수 있다.
// mysql.js
const mysql = require('mysql') // mysql 모듈을 사용
const connection = mysql.createConnection({
host: 'localhost',
port: 3306,
user: 'root',
password: '',
database: 'baseball'
})
connection.connect()
module.exports = {
connection
}그리고 index.js에서 mysql.js에서 export한 connection을 다음과 같이 연동해주면된다.
// index.js
const { connection } = require('./mysql')CORS
교차 출처 리소스 공유(Cross-origin resource sharing, CORS), CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 즉, API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야한다.
쉽게 말해, 브라우저는 보안 상의 이유로 출처가 다른 리소스에 접근하지 않는다. 하지만 추가 HTTP 헤더를 사용하여 접근 권한을 부여하여 브라우저가 다른 출처의 리소스를 불러오도록 하는것이 CORS이다.
웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP요청을 실행한다.
데이터베이스와 해당 프로젝트와 연동시킬때 CORS 문제가 발생했는데 이를 해결하는 방법은 여럿 있지만, 해당 과제에서는 CORS 미들웨어를 사용하는 방법을 택했다. 코드는 다음과 같다.
const cors = require('cors')
app.use(cors())하지만 app.use(cors())의 방식을 택하면 모든 출처에서 오는 요청을 허용하는 것이므로 지양하는 게 맞다.
body-parser
로그인의 기능을 구현할 때, 다음과 같이 데이터를 body에 담아 POST request를 보내고자 했다.
app.post('/auth', (request, response) => {
const { id, password } = request.body
console.log(request.body)
}request.body는 body-parser를 사용하기 전에는 기본값으로 undefined가 설정되어 있기 때문에 console.log에 undefined Error가 발생했다.
다음과 같이 body-parser를 설치해 주고 모듈을 불러와 express에 붙여 사용한다.
npm install --save body-parserconst bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true })){ extended: true } 이면 따로 설치가 필요한 qs 모듈을 사용하여 쿼리스트링을 해석하고
{ extended: false } 이면 기본으로 내장된 querystring 모듈을 사용한다.
무슨 말이냐면 중첩된 객체를 사용할수 있냐없냐의 차이이다. qs 모듈을 사용하면 다음과 같이 중첩객체를 만들 수 있다.
var qs = require("qs")
var result = qs.parse("person[name]=bobby&person[age]=3")
app.use(bodyParser.urlencoded({ extended: true }))
console.log(result) // { person: { name: 'bobby', age: '3' } }