[TroubleShooting] 여러가지 요청 처리 불가 문제

📌 문제 1 :

이번에 서버 파일을 수정하다보니 GET요청을 처리하지 못하는 상황이 발생했다.

 

로그인 버튼을 누르면 /Dashboard로 GET요청을 보내도록 되어 있는데 왜 안되는지 차근차근 살펴보자...후....

 

먼저, 아래는 클라이언트측의 get요청 진입점이다.

    const handleLogin = (event) => {
        event.preventDefault();
        toast.info('Navigating to VT CAS login page...');
        const casLoginUrl = 'https://login.vt.edu/profile/cas/login?service=https://crescendo.cs.vt.edu:8080/Dashboard';
        window.location.href = casLoginUrl;
    };

로그인 버튼을 누르면 /Dashboard로 라우팅 된다.

 

다음은 서버측 라우팅 설정을 확인 해보자.

app.use('/auth', require('./routes/authRoutes'));

 

이 라인은 '/auth' 경로로 시작하는 모든 요청을 authRoutes 파일로 라우팅 한다.

 

어 근데... 지금 다시보니 클라이언트에서 요청을 /Dashboard 라고만 보내고 있었다. 방금 말한것 처럼 경로를 잘못 설정해 발생한 일이다. 이렇게 고치니 제대로 요청이 들어왔다.

 

📌 문제 2:

코스를 생성하려고 하면 코스를 생성 할 수 없다고 뜸... 이것도 99% 경로 문제라고 확신한다. 일단 보자....

 

먼저, 서버 파일을 확인해 라우팅 설정을 확인 해준다.

app.use('/courses', require('./routes/courseRoutes'));

 

이 라인은 '/courses' 경로로 시작하는 모든 요청을 courseRoutes 파일로 라우팅 한다.

 

이제, courseRoutes를 확인 해보자.

const express = require('express');
const router = express.Router();
const courseController = require('../controllers/courseController');

router.post('/create', courseController.createCourse);
router.post('/register', courseController.registerCourse);
router.get('/', courseController.getCourses);
router.get('/:courseId', courseController.getCourse);
router.put('/:courseId', courseController.updateCourse);
router.delete('/:courseId', courseController.deleteCourse);

module.exports = router;

 

라우터 설정

-express.Router()를 사용하여 라우터 객체를 생성한다.
-courseController에서 각 컨트롤러 함수를 가져와서 사용한다.

라우터 엔드포인트

router.post('/create', courseController.createCourse): 강좌 생성 엔드포인트. POST /create 요청을 받아 새로운 강좌를 생성한다.
router.post('/register', courseController.registerCourse): 강좌 등록 엔드포인트. POST /register 요청을 받아 사용자를 강좌에 등록한다.
router.get('/', courseController.getCourses): 강좌 목록 조회 엔드포인트. GET / 요청을 받아 모든 강좌를 반환한다.
router.get('/:courseId', courseController.getCourse): 특정 강좌 조회 엔드포인트. GET /:courseId 요청을 받아 특정 ID의 강좌를 반환한다.
router.put('/:courseId', courseController.updateCourse): 강좌 업데이트 엔드포인트. PUT /:courseId 요청을 받아 특정 ID의 강좌 정보를 업데이트한다.
router.delete('/:courseId', courseController.deleteCourse): 강좌 삭제 엔드포인트. DELETE /:courseId 요청을 받아 특정 ID의 강좌를 삭제한다.

 

모두 제대로 되어 있는것 같으니 요청을 보내는 클라이언트쪽 코드를 보자.

    const handleCreateCourse = async () => {
        try {
            const response = await axios.post('https://crescendo.cs.vt.edu:8080/createCourse', {
                name: courseName,
                term: term,
                crn: crn
            }, {
                withCredentials: true,
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            if (response.status === 201) {
                toast.success('Course created successfully!');
                setCourses([...courses, response.data]);
                setShowModal(false);
                setCourseName('');
                setTerm('');
                setCrn('');
                setSelectedCourseId(null); 
            }
        } catch (error) {
            toast.error('Failed to create course');
            console.error('Error creating course:', error);
        }
    };

 

역시나! 요청 경로가 잘못되어 저런 오류가 발생했다.

https://crescendo.cs.vt.edu:8080/courses/create 의 경로로 요청을 보내야 제대로 된 요청을 받고 처리 할 수 있다.

 

📌 문제 3: 코스 삭제 불가

생성된 Course를 삭제하려고 하니 자꾸 404 에러가 발생. 이건 확인해보니 경로 문제는 아니였다.

 

문제는 다음과 같았다 : 컨트롤러에서는 req.params.id를 사용하고 있지만, 라우트에서는 :courseId로 정의되어 있다. 이를 일치시켜야 한다.

 

이게 무슨 말이냐면...

 

Express.js에서 라우트를 정의할 때, URL 파라미터를 사용할 수 있다. 이 파라미터는 콜론(:)을 사용하여 정의하며, 이를 통해 동적으로 값을 받을 수 있다.

이전 코드에서는 다음과 같이 라우트가 정의되어 있었다:

router.delete('/:courseId', courseController.deleteCourse);

여기서 :courseId는 URL 파라미터다. 예를 들어, /courses/123이라는 요청이 오면, 123이 courseId 파라미터의 값이다.
그러나 컨트롤러 함수에서는 이 파라미터를 다음과 같이 접근하고 있다:

const courseId = req.params.id;

여기서 문제가 발생한다. 라우트에서는 :courseId로 정의했지만, 컨트롤러에서는 id로 접근하고 있어 불일치가 발생한다.
이 문제를 해결하기 위해서는 두 가지 방법이 있다:

라우트 정의를 컨트롤러와 일치시키기:
router.delete('/:id', courseController.deleteCourse);

컨트롤러에서 파라미터 접근 방식을 라우트와 일치시키기:
const courseId = req.params.courseId;


두 방법 중 하나를 선택하여 파라미터 이름을 일치시키면, 서버가 올바르게 course ID를 받아 삭제 작업을 수행할 수 있다.
이 불일치로 인해 courseId가 undefined가 되어 course를 찾지 못하거나 삭제하지 못하는 문제가 발생했던 것이다.