아마 이번이 마지막 글이 될 것 같다. 기본 사용법인데 내가 봐도 너무 길구만.
koa-bodyparser?
바디파서 역시 미들웨어인데,
POST/PUT/PATCH같은HTTP METHOD들의Req body에JSON형식으로 데이터를 넣어 주면, 이를 파싱해서 사용할 수 있도록 한다.
여기서 헷갈리는 점이 있는데
- 바디파서가
form을 통해submit하는 데이터를JSON형태로 만들어주는가?- 아니면 이미
JSON으로 온 데이터를 바디파서가 서버가 사용할 수 있는 어떤 형태로 만들어주는가?
로 궁금증이 나뉠 것 같다.
https://velog.io/@yejinh/express-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4-bodyParser-%EB%AA%A8%EB%93%88
위 벨로그 글을 참고해본 결과 내가 낼 답장은 다음과 같다.
- 클라이언트에서 보내는 걸
JSON으로 해주진 않는다. 이건 클라이언트 측에서 처리하나보다.- 클라이언트가 보내
JSON으로 온 것을req.body를 통해 그냥 접근하면undefined라고 나오는데,bodyParser로 파싱을 해주면 그때부턴 접근할 수 있다고 한다.
그러니까 내가 헷갈리는 점이라고 언급한 것 중 후자가 맞는 것 같다.
혹시라도 내가 틀렸으면 꼭 댓글을 달아주시면 바로 고치겠으니 고수님들 부탁드립니다.
구현
역시나 바디파서를 사용하기 위해선 yarn add koa-bodyparser를 통해 라이브러리를 가져와야 한다. 좀 귀찮네 그냥 Express써야지 할수도 있는데, 사실 Express도 예전엔 바디파서가 내장되어있었는데 요즘 버전은 오히려 라이브러리로 다운 받아야 한다고 함.
참고로 이 바디파서는 가장 최상위의 src/index.js에 정의해야 한다.
왜냐면 2편에서도 적었듯 URL을 타고오면 일단 src/index.js를 거쳐 라우팅이 되기 때문에, 여기서 정의하면 한번에 어떤곳으로 라우팅이 되도 JSON데이터를 사용할 수 있다.
// /src/index.js
const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser'); // 모듈 가져오기
const api = require('./api');
(... 중략)
app.use(bodyParser()); // router 적용하는 코드 위에 있어야 함!
app.use(router.routes());
(... 중략)주의할 점은 주석으로도 적었듯 router적용 코드 보다 위에 있어야 정상 동작한다고 한다.
컨트롤러 파일 작성
라우트 처리 함수로 쓰는 미들웨어 함수들을 모아놓은 파일을 컨트롤러라고 부르는데,
보통 .js 앞에 .ctrl 라는 키워드를 하나 더 집어넣어서 파일을 만든다.
지금 우리가 처리할 라우트 처리 함수는 전편에 이어서니 posts이다.
따라서 파일은 posts.ctrl.js로 만든다. 이는 Express에서도 동일한 동작을 거치니 참고.
만들고 나면 위처럼 디렉토리 구조가 나올 것이다.
여기서 미들웨어 함수를 다음과 같이 만들어준다.
exports.write = ctx => {} // 포스트 처리 함수이런식으로 여러 개의 함수를 만들어주고, posts폴더의 index.js에선 이걸 require()를 통해 가져다 쓰기만 하면 된다.
// /api/posts/index.js
const postsCtrl = require('./posts.ctrl');
posts.post('/', postsCtrl.write);이런식으로 말이다.
좀더 추가해보면 이렇다.
// /api/posts/posts.ctrl.js
exports.read = ctx => {} // GET 처리 함수
exports.write = ctx => {} // POST 처리 함수
exports.update = ctx => {} // PATCH 처리 함수
exports.remove = ctx => {} // DELETE 처리 함수이런식으로 구현해놓으면 postsCtrl변수를 통해 위 함수들을 가져오게 될경우,
postsCtrl = {
read: Function,
write: Function,
update: Function,
remove: Function
}이런식으로 가져온다.
그럼 이제 각종 처리하고 싶은 것들을 저 {}안에 집어넣어 주기만 하면 된다.
게시판의 경우라면, 글 생성, 수정, 삭제, 조회 등이 가능해질 것이고,
회원가입이라면 유저 생성, 수정, 삭제, 조회가 가능해질 것이다.
이 부분은 각자 공부를 통해 한 번 구현해보는 게 좋을 것 같다.
PUT은 웬만하면 사용을 지양하고 PATCH를 쓰는게 좋은게, 기존 body가 사라지게 되서 모든 필드가 다 있는지에 대한 검증이 필요하다.
마치며
참고로, 위 모든 것들은 당연히 백엔드 구축을 하는 사람이라면 웹에 어느 정도 지식이 있는 사람들일테니 모를리는 없겠지만, REST API만으로는 당연히 CRUD 웹사이트를 구현할 수가 없다.
데이터베이스의 도움이 필요한데, Node.js와 React.js로 백엔드, 프론트엔드를 전부 구축할 수 있으면, JSON으로 데이터를 저장하면 MongoDB를 사용해서 서버를 만드는게 가장 효율적이지 않을까라는 생각이 든다. 물론 Express는 Sequelize를 통해 MySQL로도 만들 수 있지만.. 코아도 그런 기능이 있을까?
https://falsy.me/sequelize-1-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-for-mysql/
찾아보니 있는 듯 하다. RDBMS로 웹 구축을 하고 싶다면 위 사이트를 참고해보면 좋을 것 같다.
