[음악 관리 프로그램][에러 해결] 404, 500 ERROR

기존에 mysql과 raw하게 연결했던 음악 관리 프로그램을 쿼리문을 직접 작성하지 않고 데이터를 생성, 삭제, 변경 등을 할 수 있는 Sequelize를 사용하도록 개편했다.

 

Sequelize란 ORM의 일종이다. 간단히말해 ORM 이란, 객체(Object) 와 관계형 데이터베이스 (Relational Database)의 데이터를 자동으로 맵핑(Mapping) 해주는 것 이다. express에 Sequelize를 사용하는 것은 이 분의 유튜브 를 보고 진행했다. react와 express, Sequelize를 모두 함께 쓰는 코드를 찾기 어려웠는데 결과적으로 아주 원활히 성공했기 때문에 정말 만족했다.

 

하지만 그 와중에 몇 가지 에러가 발생했다. 프론트 엔드단인 리액트의 App.js에서 MySQL 테이블의 모든 데이터를 불러들이는 부분에서 발생한 404와 500 에러 였다.

 

App.js

import MusicDataService from './services/MusicService';

// musicdata 테이블의 모든 데이터를 불러들이는 함수

// ...
const retrieveMusics = () =>{
    MusicDataService.getAll()
      .then(res => {
        setMusics(res.data);
      })
      .catch(e=>{
        console.log(e) //에러가 잡힌 부분
      })
  }
 // ...

 

보통 이러한 HTTP 에러가 발생했을 때 해당 에러가 무슨 원인으로 발생하는지에 대해 잘 찾아보지 않고 넘겼는데 이번엔 찾아봤다.

 

1. 404

 

HTTP 404 NOT FOUND 에러는 

 

자원이 존재하지 않는다

 

라고 볼 수 있다.  하지만 Rest API 의 관점에서는

 

1. 경로가 존재하지 않음

2. 자원이 존재하지 않음

 

이 두 가지 경우로 생각할 수 있다.

 

Rest API에서는 경로(라우팅)에 대한 에러 처리를 해준다. 즉, 존재하지 않은 경로는 쉽게 404로 응답할 수 있다.

그러나, 자원의 경우일 수 있다.
GET /users/1 경우 /users/:id로 존재하는 경로다. 이때 서버는 ID 1을 갖는 사용자가 있는지 먼저 확인을 해야 한다.
이것이 자원에 대한 존재 여부를 파악하는 것이다. 만약, 존재 여부를 파악하지 않고 그대로 진행을 하면 후속 작업에서 오류가 발생할 가능성이 있고 이것은 5XX 오류로 이어질 수 있다. (나의 경우..) 즉, 존재하는 경로에 대한 요청이라도 자원이 존재하는지 파악 후, 존재하지 않는다면 404 상태 코드로 응답해야 한다.

 

나는 이 것을 확인하고 express에서 라우팅을 하는 과정에서 경로 설정이 잘못된것이 아닌가 의심을 했다. 우선 Rest API에 요청을 보내는 함수가 담긴 MusicService.js 를 살펴보았다. 

 

MusicService.js

import http from '../http-common' // axios 접속을 위한 파일, URL이 담겨있다.

// ...

const getAll = () => {
    return http.get('/musicdatas') // 해당 경로에 GET 요청을 보냄
}

// ...

나는 getAll 이라는 함수를 통해 /musicdatas 라는 URL에 GET 요청을 보냈다. 그렇다면 Rest API의 /musicdatas에는 모든 데이터를 반환하는 Sequelize의 findAll 메서드가 실행되도록 설정되있어야한다. Rest API의 라우팅을 하는 파일은 다음과 같다.

 

musicdata.routes.js

// musicdata.routes.js
// Rest API의 라우팅을 설정하는 파일

module.exports = app => {
    const musicdatas = require('../controllers/musicdata.controller.js');

    var router = require('express').Router();

    router.post('/musicdatas', musicdatas.create);

    router.get('/musicdatas', musicdatas.findAll) // 여기

    app.use('/musicdatas', router)
}

 

주석을 달아놓은 행에서 라우팅이 잘되어있음을 확인했다. 하지만 그 바로 밑에 

app.use('/musicdatas', router)

이 행을 다시 한번 보았다. 나는 아직 express의 메서드들에 대해 완벽하게 알지 못했고 use의 사용법 또한 얼핏 알 뿐이지 정확하게 알지 못했다. 

 

app.use

 

보통의 HTTP 메서드(GET, PUT, DELETE, POST)는 요청 주소(URL)와 HTTP 메서드가 일치해야 요청이 실행된다.

하지만 app.use 의 경우 요청 주소(URL)만 일치하면 요청이 실행된다. 이게 무슨 뜻이냐면 

app.use('/musicdatas', router)

이 코드를 다시 보자면 요청 주소가 /musicdatas 이기만 한다면, router를 미들웨어로써 작동시키겠다는 것이다. 

app.use('/', index)
app.use('/user', user)

다시 한번 위의 코드로 보자면 요청 주소가 '/' 이라면 index 라는 미들웨어를, '/user'라면 user의 미들웨어를 적용시키는 것이다. 이로써 라우팅이 적용 될 수 있는 것이다. 나의 문제로 돌아와서 보면 나는 요청주소가 '/musicdata' 일 때 Router 객체가 미들웨어로 작동하고 GET 메서드가 요청되는 것이다.

 

그렇다면 저 코드는 틀렸단 것을 알 수 있었다. "localhost:3000/"으로 접속이 되기 때문에 요청 주소는 '/'가 되고 해당 미들웨어 (router)는 요청이 실행 되지 않는 것이다.

// musicdata.routes.js
// Rest API의 라우팅을 설정하는 파일

module.exports = app => {
    const musicdatas = require('../controllers/musicdata.controller.js');

    var router = require('express').Router();

    router.post('/musicdatas', musicdatas.create);

    router.get('/musicdatas', musicdatas.findAll) // 여기

    app.use('/', router)
}

그래서 난 위처럼 요청 주소를 바꿔 주었다. 하지만 이어서 500에러를 마주쳤다.

 

2. 500

 

개발자의 문제로 발생할 가능성이 큰 에러로써 발생하면 안되는 에러라고 했다.

 

그리고 API 측의 문제인 에러라고 했다. 나는 고개를 끄덕이며 Rest API 의 /musicdatas 로 접속해보았다.

 

위와 같이 에러 예외처리를 해놓은 것이 찍힌 것을 볼 수 있었다. 저 createdAt이란 Timestamp이다. 저 속성을 false로 바꾼 후, 3000 포트로 접속 했더니,

 

감격의 순간

 

위와 같이 데이터가 제대로 나왔다.

 

전혀 복잡한 부분이 아니었는데 한가지 부분때문에 헤맸다고 생각한다.

 

1. 코드에서 사용하는 기능을 제대로 이해하지 못한것

 

사실 에러가 나지않았다면 이렇게 찾아보지 않았을 수 도 있다. 코드를 사용하려면 일단 이해를 하는 것이 정말 중요하다는 것을 다시 깨달았다.!!

 

 

ORM : gmlwjd9405.github.io/2019/02/01/orm.html

[DB] ORM이란 - Heee's Development Blog

404, 500 에러 : sanghaklee.tistory.com/61

REST API 관점에서 바라보는 HTTP 상태 코드(HTTP status code)

app.use : backback.tistory.com/341

Node - Express [Router 객체로 라우팅 분리]