Nodejs와 Express 프레임워크를 사용해서 기본적인 게시판을 만들어보려고 한다.
Node.js를 아직 설치하지 못했다면 ➡ Node.js 설치
1. 🎈 시작하기
npm의 모듈을 관리하기 위해서 $ npm init -y 명령어를 통해
package.json 파일을 생성해주자
package.json 파일 내
"main" 키의 밸류는 "index.js"로 기본 설정되어 있을텐데
기본 실행파일을 app으로 할 것이기 때문에 "app.js"으로 수정해주고,
$ node + 파일명 + α 로 자주 파일을 실행해야 하기 때문에
"scripts" 키에 "dev" 명령어를 추가해 실행 명령어를 쉽게 다뤄보자.
package.json 파일
2. 💻 서버 구축하기
app.js 파일을 생성해주고 다음과 같이 입력한다.
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
// .env 파일 내의 PORT 값을 가져오고 없다면 3000으로 설정
// 위 예시의 3000번 포트가 사용 중일 경우 다른 포트 사용 가능
app.listen(PORT, () => {
console.log(`✅ Listening on 'http://localhost:${PORT}'`);
});
이후 사용하고 있는 코드 에디터(Vscode) 터미널에
$ npm run dev 명령어를 입력하면 서버가 실행되고
브라우저 실행 후 http://localhost:3000(포트번호) 를 통해 확인할 수 있다.
서버 중지: Ctrl + C
정상 실행 화면
3. 🚦 라우터 생성하기
서버가 정상적으로 실행된 상태에서
http://localhost:3000(포트번호) 에 접속하면
' Cannot GET / ' 이라는 메시지가 출력된다.
'/' URI에 클라이언트가 접속했을 때 서버에서 어떤 응답도 주고 있지 않기 때문이다.
app.js 파일로 돌아가 아래와 같이 '/' URI 접속 시 응답을 설정해 준다.
app.get('/', (req, res) => {
res.send('Welcome my home 😊');
});서버 중지 Ctrl + C, 재시작 $ npm run dev 후
Localhost 주소를 입력해보면 설정한 메시지가 출력된다.
하지만 우리는 app.js 파일 안에 서버 실행에 관련된 것만 작성할 것이고,
나중에 더 많은 URI에 대한 응답을 다루기 위해 Router 파일을 따로 만들어주자.
① routers 폴더 생성 후 globalRouter.js 파일을 만들고 아래와 같이 입력한다.
const express = require('express');
const globalRouter = express.Router();
globalRouter.get('/', (req, res) => {
res.send('Welcome my home 😊 - Router');
});
module.exports = globalRouter;② app.js 에 방금 만든 파일을 불러오고
const globalRouter = require('./routers/globalRouter');③ 작성했던 코드를 다음과 같이 수정한다.
/*
app.get('/', (req, res) => {
res.send('Welcome my home 😊');
});
*/
app.use('/', globalRouter);
// `/`로 접근 시 globalRouter를 사용한다사실 Router 에서는 경로 관리만 하고
Controller 를 만들어 작업 로직을 다루는 것이 좋지만
게시판만 구현하는 경우 로직이 복잡하지 않기 때문에
router 파일 내에 전부 작성할 예정이다.
(2021-07-29 추가)
구현하다보니 로직 분리 필요성을 느끼게 됐고
뒤에는 Controller를 만들어 콜백함수를 따로 관리할 예정
전체 코드 보기
📃 Node.js 와 Express로 게시판 만들기 - Github
