Web 백엔드 (11) / 영화 리뷰 사이트 제작 (2) - API 만들기

 

 

 

지난 포스팅에서 프론트엔드와 백엔드의 바인드를 마쳤었다.

이번에는 직접 API 만들어 연결해보자.

 

 

 

클래스 101 [유료강좌]

개발자 사관학교 - [웹 개발자 단과반 2교시] MySQL, Node.js 백엔드 속성 실무!

https://class101.net/ko/products/5fac071c1105fb001383cd2a

[웹 개발자 단과반 2교시] MySQL, Node.js 백엔드 속성 실무! | 개발자 사관학교

 

 

 

 

 

CHAPTER 4: 영화 리뷰 사이트로 백엔드 실전 연습하기

[2. 리뷰 저장 API 만들기 (+고급기술!)]

 

리뷰 저장은 새로운 문자열을 데이터베이스에 저장하는 것이기 때문에

API 종류 중에 POST 방식의 create api에 해당한다.

mainRouter에서 create api를 만들어보자.

 

 

 

콘솔을 통해 영화 정보 API구조를 살펴보면, 

다음과 같은 키값들이 들어있는 것을 볼 수 있다.

이때 영화를 식별하는 중요한 정보는 "id"라는 키값이다.

이것이 리뷰를 저장하는 코드내에서 어뗗게 사용되고 있는지 확인한다. 

 

 

main.ejs

main.ejs 파일에 가보면 addReview라는 함수에서 movie_id라는 변수에 target_id를 넘겨주는 것을 볼 수 있다.

main_id에 정보가 저장되므로, 이 키값을 활용해야 한다.

 

 

 

 

mainRouter.js

 

mainRouter.js에서 post방식의 create API를 만들어준다. 

moive_id와 review는 응답의 body 부분을 통해 받아올 것이다.

 

 

다음으로 만들어야 할 부분은 데이터베이스이다.

사용자가 리뷰를 적으면 해당 리뷰들을 저장할 공간이 필요하다.

이에 대한 역할을 바로 새로 만들 데이터베이스가 담당할 것이다.

 

 

 

 

 

reviews.js

 

model 폴더 안에 새로운 reviews.js 데이터베이스 파일을 만들었다.

기본적인 내용은 users.js것을 복사 붙여넣기 해주었다.

 

그리고 movie_id와 review 데이터를 추가했다.

movie_id는 영화 제목이므로 String타입으로, reviews는 긴 텍스트로 작성될 것이기 때문에

크기가 약 250자로 정해져있는 String타입은 적합하지 않다.

따라서 TEXT타입으로 정의해준다.

 

 

db.js

 

그 다음으로 해야할 일은 메인 데이터베이스 파일에서 새로 만든 reviews 데이터베이스를 import해주는 것이다.

모든 데이터베이스는 새로 만들면 메인 데이터베이스(여기서는 db.js)에 위와 같이 import해줘야한다.

 

 

vscode - terminal

서버를 실행해보면 Create Table if not exists (reviews)라고 뜨며, reviews테이블이 잘 만들어진 것을 확인할 수 있다.

 

 

 

 

데이터베이스 테이블이 정상적으로 만들어진 것이 확인되었으니,

데이터베이스에 저장하는 코드를 mainRouter.js에 추가한다.

 

mainRouter.js

db.reviews.create 함수로 데이터베이스에 받아온 값을 저장해주도록 한다.

그리고 데이터베이스에 값이 잘 전달되면 success:200이라는 메시지를 보내주도록 한다.

 

 

main.ejs

 

main.ejs에서도 api주소를 연결해준다.

같은 폴더내에 있기 때문에 상대주소로 쉽게 접근할 수 있다.

또한 값이 잘 전달되어 데이터베이스에 저장되었다면 success함수가 실행된다.

이때 mainRouter.js에서 보내주는 성공메시지, success:200라는 객체 값을 받아와 console.log에 띄워준다.

이처럼 프론트에서 서버에 요청하고, 그에 대한 응답 메시지를 받아오는 것을 콜백이라고 한다.

 

 

 

- Postman에서 API 작동 확인해보기

API를 만들었다면 Postman을 통해 작동이 잘되는지 확인해봐야 한다.

소소한 오타로 인한 오류가 많이 났고, 이를 수정했다. (위에 올린 내용은 오타가 수정된 코드들이다!)

작성될 내용도 오타 때문에 문제가 발생한 흔한 경우였지만, 다음에 또 같은 에러를 마주할 것 같아 기록해둔다.

 

앞서 위에 적었듯 reviews.js에서 column하나를 review가 아닌 reviews로 저장됐고 

그로 인해 보내주는 key값(review)와 이름 달라져 오류가 발생했다.

보내는 key이름을 reviews로 바꾸어도 되지만, 본래 잘못적은 데이터베이스의 내용을 바꿔주기로 했다.

 

vdcode terminal

 

 

reviews라고 적힌 열을 수정하기 위해 아래와 같은 명령어를 터미널에 입력했다.

 

 

 

ALTER TABLE reviews CHANGE COLUMN reviews review varchar(16) NULL;

이 부분은 아래 블로그에서 큰 도움을 얻었다.

 

https://extbrain.tistory.com/39

[MySQL] 테이블 수정 (ALTER TABLE) 간단 정리

 

다시 테이블을 확인해보면 정상적으로 바뀐 것을 볼 수 있다.

 

 

vscode 저장 후, 포스트맨에서 API를 다시 테스트 하였다.

 

 

정상적으로 값이 보내졌다는 success메시지가 나타난다.

 

하지만 문제는 여기서 movie_id의 value값을 안쓰고 send를 보내도 success가 뜬다는 것이다.

프론트에서 보내온 값이 잘못되었을 경우, 서버 코드에서 값이 잘못되었음을 알려줄 수 있다.

이렇게하면 어디서 잘못되었는지 보다 쉽게 찾을 수 있어 실무에서도 매우 효율적이다.

 

 

 

 

- 분기처리 해주기

 

mainRouter.js

만약 movie_id가 비어있거나 id일 수없는 0이라는 값일 경우

success:400 이라는 객체를 보내주도록 한다.

(일반적으로 400 또는 500은 오류를 잘못됐음을 나타내는 값으로 사용된다.)

 

else문에서는 제대로 된 값이 담겼을 경우이므로 아까 성공했을 경우의 코드를 옮겨 넣어준다.

 

 

 

 

 

 

main.ejs

프론트의 콜백 부분에도 알린다. 

만약 success key값에 200이 담겨있을 경우 리뷰저장완료 라는 콘솔메시지가 나타나도록 하고,

400이라는 key값이 넘어왔을 경우에는, alert을 통해 사용자에게 데이터가 잘못됐음을 알린다.

 

이처럼 프론트에서 문제가 생겼을 때, 분기처리를 해주면 시간소모를 많이 줄일 수 잇을 것이다.

특히 지금 만드는 사이트와 달리 더욱 규모가 큰 사이트일수록 이런 분기처리가 필수적일 것이라 느껴진다.

 

 

 

 

 

 

 

[3. 리뷰 읽기 API 만들기 ]

 

테이블을 새로 만들고 이제 리뷰를 저장할 수 있도록 준비를 마쳤다.

다음으로는 리뷰를 저장하고 불러와보자.

 

리뷰를 읽기 위해서 mainRouter에 get방식의 API를 만들어보았다.

 

mainRouter.js

 

ajax에서 건내주는 데이터를 받기 위해서는 req.query.movie_id라는 문법을 이용해야 한다.

db 메인 데이터베이스에 reviews라는 테이블을 불러온 뒤, findAll로 모든 데이터를 찾도록 한다.

그리고 테이블의 movie_id들중에서 let movie_id 변수로 프론트에서 받아온 값과 일차하는 이름의 데이터(movie_id와 review)를

가져온다.  성공할 경우 응답으로 성공메시지와 결과값을 전달해준다.

 

 

 

main.ejs

 

전달해준 데이터는 실제로 이부분에서 받아 리뷰값만 꺼내 보여주고 있다.

또한 API도 url을 통해 연결해준다. GET방식이므로 ?를 연결해 요청할 데이터를 보내준다.

 

 

 

localhost:3000/main

 

서버에 들어가서 리뷰 보기를 누른 후, 후기를 작성한다.

그러면 성공적으로 저장이 되고 다시 창을 열었을때에도 여전히 리뷰가 데이터베이스를 통해 잘 불러와진다.

 

 

 

webpage-console

콘솔을 통해서도 저장이 잘 됐음을 확인할 수 있다.

 

 

 

 

 

 

 

 

 

영화 리뷰에 대한 내용은 모두 끝이 났다!

한가지 아쉬운 점이 있다면 부트스트랩4와 5가 modal창을 열고 닫는 법이 달라서

이전 코드로는 창이 열리 않았다.

임시방편으로 열리게는 해두었지만 닫히질 않는다..^^

데이터베이스에 대한 내용이 중요함으로 일단 이 부분은 스킵했다!

 

 

 

 

 

 

 

출처: 클래스101 / [웹 개발자  단과반 2교시] MySQL, Node.js 백엔드 속성 실무! - 개발자 사관학교