티스토리 뷰
우선, 도서 API를 구현해보기 전에 바꿔야할 것이 있다.
API 설계 당시 books의 컬럼명에 문제가 있었다. format과 description 그리고 index 이다.
해당 단어들로 컬럼으로 만들어서 사용하려하면 파란색으로 바뀐다.
즉, 예약어이니 웬만하면 사용하지말지? 라는 뜻이다.
그래서 format 은 form 으로, description은 detail로, index는 contents로 바꿔서 사용하였다.
이번 도서 API도 이전에 했던 회원가입 API와 동일하게 routes 폴더안에 books 라는 경로 파일을 만들어주고,
controller 폴더 안에 BookController 라는 파일을 만들어 로직을 짰다.
도서 API는 총 3가지로 설계했었다.
1. 전체 도서 조회
2. 개별 도서 조회
3. 카테고리별 도서 조회
💥 전체 도서 조회
const allBooks = (req,res) => {
let {category_id} = req.query;
if(category_id) {
let sql = 'SELECT * FROM books WHERE category_id=?';
conn.query(sql, category_id,
(err, results) => {
if(err) {
console.log(err);
return res.status(StatusCodes.BAD_REQUEST).end();
}
if(results.length) {
return res.status(StatusCodes.OK).json(results);
} else {
return res.status(StatusCodes.NOT_FOUND).end();
}
})
} else {
let sql = 'SELECT * FROM books';
conn.query(sql,
(err, results) => {
if(err) {
console.log(err);
return res.status(StatusCodes.BAD_REQUEST).end();
}
return res.status(StatusCodes.OK).json(results);
}
)
}
};
위의 코드를 보면 의아한 점이 있을 것이다...
전체 도서 조회 하는데 로직이 왤케 쓸데없이 길지? 라는 의문일 것이다..🤔
아래의 코드를 보며 설명해보겠다..
router.get('/', allBooks);
router.get('/:id', bookDetail);
router.get('/', booksByCategory);
books.js의 일부 코드이다. 원래는 3가지 설계를 위한 라우터를 만들었었다.
하지만 여기서 문제가 생겼었다. allBooks와 booksByCategory의 경로가 같아서 bookByCategory는 구현이 안되는 것이다.
같은 경로일 때 오류는 안 나지만, 코드 위치 상 allBooks가 위에 있기 때문에 먼저 사용된 allBooks만 구현이 된다.
아무리 category_id를 넣어도 booksByCategory는 사용할 수가 없었다. 그래서 allBooks와 booksByCategory를 합치기로 했다.
let {category_id} = req.query;
if(category_id) {
// 카테고리 별 도서 조회
let sql = 'SELECT * FROM books WHERE category_id=?';
conn.query(sql, category_id,
(err, results) => {
if(err) {
console.log(err);
return res.status(StatusCodes.BAD_REQUEST).end();
}
if(results.length) {
return res.status(StatusCodes.OK).json(results);
} else {
return res.status(StatusCodes.NOT_FOUND).end();
}
})
}
그래서 이 부분을 보면 category_id가 있으면 카테고리별 도서 조회가 되게끔 수정했다.
말 그대로 URL에 category_id가 없으면 전체 도서 조회를, 있으면 카테고리별 도서 조회를 구현하게끔 되는 것이다.
우선, 전체 도서 조회 결과를 보겠다🙋♀️ (데이터는 미리 넣어놨다.)
전체 데이터가 잘 나오는 것을 볼 수 있다 👍
그럼 개별 도서 조회는 어떨까?
💥 개별 도서 조회
개별 도서 조회는 사실상 위의 로직보단 간단하다.
sql문은 SELECT를 사용해서 만들었다.
let sql = 'SELECT * FROM books WHERE id=?';
이렇게 되면 /books 뒤에 올 id 값을 받아 해당 id와 일치하는 데이터를 뽑아줄 것이다.
/books 뒤에 id 값이 2 라서 데이터도 id가 2인 데이터가 뽑히는 걸 볼 수 있다👍
이제 가장 문제였던 카테고리별 도서 조회 이다...😥
💥 카테고리별 도서 조회
카테고리별 도서를 조회하기 위해 category_id를 req.query() 로 받아와야한다.
해당 category_id를 받아서 비교 후 데이터를 뿌리는 것이다.
category 테이블도 물론 생성해야하고 테이블엔 id 와 name의 컬럼으로 id에 해당하는 name이 뽑히게 사용할 예정이다.
빨간줄을 보면 알 수 있다 싶이 /books뒤에 ?를 볼 수 있다.
쿼리스트링이 시작된다는 걸 알 수 있다. 그렇게 category_id = 1 로 주었을 때,
실제로 category_id가 1인 데이터만 뽑을 수 있는 걸 볼 수 있다.
💥 카테고리 목록 리스트
이 category를 다른 페이지에서도 필터 처럼 사용할 예정이다. 그래서 category를 따로 관리하기로 했다.
다른 파일과 똑같이 category.js 파일과 CategoryController를 생성해 관리하겠다.
필터로 사용하기 위해선 sql 문은 SELECT를 사용하여 전체 카테고리 리스트를 보여주도록 로직을 짰다.
let sql = 'SELECT * FROM category';
conn.query(sql, (err, results) => {
if(err) {
console.log(err);
return res.status(StatusCodes.BAD_REQUEST).end();
}
return res.status(StatusCodes.OK).json(results);
})
이렇게 따로 관리를 하게되면 category 테이블의 DB가 바뀌어도 관리에 용이하다.
프론트가 관리해도 되겠지만 백에서 먼저 해주면 프론트도 편하게 사용할 수도 있으니 말이다 😁
/category 도 전체 카테고리 데이터가 잘 나오는 걸 볼 수 있다 👍
오늘은 회원가입API 이후로 또 새로운 API를 설계해 보았다.
이전의 회원가입API와 다른 점이 꽤나 있었어서 조금 어려웠던 부분이 있었다.
우선, 카테고리별 도서 조회가 안되었을 때.... 굉장히 당황했다 😥
내 기억엔 그 때도 강사님께서 강의를 멈추고 혼자서 한 번 해보라고 하셨다.
그래서 해봤었는데......... 결론은 망했다. 어쩌다보니 둘 다 안 되게 망쳐버렸다 ㅋㅋㅋㅋㅋ...
그렇게 로직을 다시 되돌리고 강의를 보면서 고쳐보았는데, 이렇게 2개의 API를 if 문으로 관리하는 방법을 보고
굉장히 놀래서 '오.. 이런 방법도 있구나. 무조건 따로 할 필요는 없었구나. 고정관념 이슈 에반데..' 싶었다.
아마 이 방법 외에도 다른 방법이 많겠지만, 되게 색다른 방법이어서 강의에 훅 집중했던 것 같다.
오늘 배운 API도 굉장히 잘 사용할 것 같다. 미니 프로젝트를 할 때 실제로 사용해보고 싶은 API 이다.
로직을 짜고 POSTMAN으로 확인할 때 데이터가 잘 나오는 걸 보면...
혼자 만든 로직도 아닌데 괜히 뿌듯하다 ㅋㅋㅋ.. 아 컴퓨터가 말 잘 듣는다 아주 좋다 ^ㅁ^ 이런 느낌..
아무튼, 오늘 강의도 굉장히 재밌고 유익했다.. 슬슬 백에 빠지는 것 같기도 하다. 물론 혼자하면 또 힘들겠지만....
얼른 프론트 도 배워보고 싶고 백에 대해 좀 더 깊숙히 배워보고 싶은 생각도 든다🤣
'웹 개발 공부하기' 카테고리의 다른 글
[12.16] 좋아요 API 구현해보기😍 (0) | 2024.12.16 |
---|---|
[12.13] 도서 목록 조회 페이징구현과 신간 뽑아보기🧐 (2) | 2024.12.15 |
[12.11] 비밀번호도 바꿔볼까?🤔 + 오늘의 포스팅 (0) | 2024.12.11 |
[12.11] 설계한 API를 구현해보자(회원가입,로그인)😀 (0) | 2024.12.11 |
[12.10] app.js 구현 및 프로젝트 준비 + 오늘의 포스팅 (0) | 2024.12.10 |