앱의 가장 상위 파일 app.js에서
3001
포트를 이용해 서버와 연결해보자!const express = require('express') const app = express() const port = 3001 app.use(cors()); // CORS 사용할 수 있게 함 app.use(express.json()); // json request.body 받아올 수 있게 함 // something... app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) }) module.exports = app
이걸 기본 틀이라고 생각하고
// something...
에 라우팅을 해줘서 클라이언트의request
에 맞추어 분기를 만들어줄 수 있다.
그럼 라우팅은 어떻게 하느냐? 만약 기차표를 예약하는 사이트라면,const ktxRouter = require('./router/ktxRouter') const bookRouter = require('./router/bookRouter') app.use('/ktx', ktxRouter); app.use('/book', bookRouter);
이렇게 해서,
url-path
에 따라 분기할 수 있다.
http://localhost:3000/ktx
->./router/ktxRouter
http://localhost:3000/book
->./router/bookRouter
주로 각 기능마다 라우터 파일을 따로 만들어 관리하고, 정말 분기만 해 준다. 기능을 하는 모듈은 또 다른 파일에 모아 보관한다.
const { findAll, ktxById, update } = require('../controller/ktxController') const express = require('express') const router = express.Router() router.get('/', findAll) router.get('/:id', findById) router.put('/:id', update) module.exports = router
router.메소드('url-path', 함수)
이렇게 분기해 준다.
그럼 위의 파일에서 가져온
ktxController.js
파일에는 뭐가 들어있어야 할까?const ktxLists = require('../repository/리소스파일') module.exports = { findAll: (req, res) => { let result = ktxLists // ... return res.status(200).json(result) }, findById: (req, res) => { // ... return res.status(200).json(result) }, update: (req, res) => { // ... return res.status(200).json(result) } }
이렇게 모듈을 내보낸다. 형식이 조금 특이한데, 객체 안에 객체: 함수로 내보낸다. 리턴은 응답 코드에 따라 다양하다. 대표적으로
성공했으면return res.status(200).json(result)
응답코드와 결과를 반환해주고,
실패했으면res.status(404).json()
응답코드만 반환한다.
내가 처음에 가장 헤메었던 부분이다. 일단, 로컬호스트에선 웹 포스트맨은 쓰지 못하니, 컴퓨터에 앱을 설치했다. 그리고 위에서 만든 파일을 포스트맨으로 요청 응답을 실험해보자.
모든 기차표의 리스트를 받아와보자.
내가 만든 파일을 보면findAll
을 받기 위해서는 메소드는get
, url은localhost:3001
이다. 이거면 다 할 수 있다.
이렇게 하면 모든 리스트를 받아볼 수 있다.
우선 request의 주요 Properties를 알아보자.
req.query
: 쿼리스트링으로 요청된 정보를 받아낼 수 있다.req.params
: '/:key' 형식으로 요청해 데이터에 key로 접근해 라우팅할 수 있다.req.body
: 주로 POST나 PUT으로 정보를 보냈을 때 사용한다.위에서 모든 기차표를 조회했었는데, 이제 부산에만 가는 기차표를 예약하고싶다고 하자.
서버에 기본적으로 정보를 이렇게 저장해 놓는다.{ id: '1234-1234-1234-1234-1234567891011', departure: 'SEOUL', destination: 'BUSAN', departure_times: '2021-11-19T12:00:00', arrival_times: '2021-11-19T12:00:00' }
그렇다면 데이터의
destination
을 통해 요청을 보낼 수 있다. 이렇게 포스트맨에 요청을 보낼 수 있다.
요청한 정보를ktxController.js
파일에서 콘솔로 확인해 볼 수 있다. 어떻게? req.query 를 통해서!module.exports = { findAll: (req, res) => { console.log(req.query) // {destination: 'BUSAN'} }, // ... }
이렇게 객체 형태로 전달이 된다.
다음으로, PUT으로 기차데이터를 일부 수정할 수 있다. 같은 시간 기차의 출발지와 목적지가 바뀌었다. 어떻게 바꾸어 줄까? 위에서 만든 라우터 파일을 보면,
router.put('/:id', update)
이렇게 분기해 주었다.id
를 통해 데이터에 접근해 수정할 수 있다. 수정사항을body
에JSON
형태의 객체로 전달한다.
요청한 정보를ktxController.js
파일에서 req.params, req.body로 콘솔에서 확인해 볼 수 있다.module.exports = { // ... update: (req, res) => { console.log(req.params) // {id: '1234-1234-1234-1234-1234567891011'} console.log(req.body) // { departure: 'YONGSAN, destination: 'YEOSU'} } }
이렇게 request의 Property를 알면,
.filter()
나.forEach()
등 메소드를 통해 코드를 작성해서 데이터를 걸러서 응답으로 보내주거나 수정해서 보내줄 수 있다.
,
를 안 써서 그런 것이었다... 어제 저녁에 유튜브에서 점 하나 안찍어서 코드 안돌아가는 개발자 영상 보면서 코웃음 쳤는데... 반성...😅