간단한 게시판 만들기 - 4

지난번 게시물에서 로그인 구현까지 모두 마쳤다.
문제는 없는지 테스트해보는 과정에서 새로고침을 할 때마다 작성했던 내용이 전부 사라지는 것이 찝찝했고
결국 db에 연결해서 내용이 사라지지 않도록 해보려고 한다.
node.js의 express와 mysql을 이용해서 하려고 하는데 아직 미숙해서 해보는데까지 해보려고 한다.
 
이번 포스팅부터는 웹 개발과정도 과정이지만 아직 모르는 부분들을 정리하는 부분이 더 많을 것이다.
 
 

node.js

node.js에 대해서 간단히 짚고 넘어가려고 한다.
지금까지 사용해온 react.js는 UI를 구축하기 위해 사용되는 JavaScript의 라이브러리로 프론트엔 개발을 하기 위한 도구이다.
React의 강점은 JSX의 사용으로 편하게 코드를 작성할 수 있다는 점인데, JSX는 웹브라우저가 이해할 수 없다.
따라서 JSX코드를 변환해주어야 하고 이를 편하게 해주는 것이 Node.js이다.
 

express

이번에 사용하게될 express는 왜 사용되는가에 대해서 먼저 공부하게 되었다.
node.js를 통해 서버를 구동시켰다고 생각했는데 express를 통해 또다른 서버를 만들어야 한다고 한다.
이해한 것이 맞다면 지금까지는 nodejs가 react로 만든 파일을 변환시켜 단순히 이미 만들어진 웹페이지를 보여주는 등의 정적인 동작을 하는 웹서버의 역할을 하였다. 그리고 앞으로 사용할 express는 그 외의 동적인 처리 (db 등)을 담당하는 웹 어플리케이션 서버(WAS)의 역할을 할 것이다.
그러니까 데이터를 DB에 저장하거나 불러오고 싶다면 WAS를 구동해야하고 그 역할을 해줄 express의 사용이 필요하다.

주제에서 벗어나지만, express를 왜 사용해야하는지에 대해서 알아보다가 웹 서버와 웹 어플리케이션 서버에 대해서 알게되었고 이해가 잘되지 않아 정리해보았다.

https://memo-code.tistory.com/23

 

서버 환경

게시판에 db를 연결하기 위해 서버를 만들어야 한다.

일단 client 폴더를 만들어 그동안 만든 내용을 전부 이동시키고 server라는 폴더를 만들어 여기에 서버를 만들 것이다.

npm init

명령어를 통해 package.json 파일을 생성하여주고

몇가지 모듈을 설치하여 준다.

npm i express
npm i body-parser
npm i mysql
npm i nodemon  //서버의 코드가 수정될때마다 자동으로 서버를 재부팅하는 모듈
------------------------------
npm i express body-parser mysql nodemon

body-parser에 대한 것도 따로 정리해두었다.

https://memo-code.tistory.com/24

[Node] Body-Parser

 

기본적인 서버 모듈의 설치가 끝났으니 서버 코드를 작성한다.

server 폴더 안에 index.js 라는 파일을 만들어 express 서버 파일을 작성한다.

 

<index.js>

(express의 홈페이지 예제를 참고하였다.)

const express = require('express')
const app = express()
const port = 8000 //react가 3000번 포트를 사용하기 때문에 임의로 8000번 포트로 설정

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 

이제 node index.js를 실행시켜보면 정상적으로 작동할 것이다.

 

마무리로 nodemon을 활욜하기 위해 package.json 파일을 수정한다.

 

<server/package.json>

...
"scripts" : {
	...
    "start" : "node index.js",
    "dev" : "nodemon index.js"
},
...

npm run dev