백엔드에서 프론트로 정보남기기

프론트에서 비동기로 조회수를 올리기 코드를 짜는데 가물가물한 ajax를 리마인드 해본다.

 

우선 fetch를 이용해 내가 원하는 url을 가져오고 백엔드에서는 url의 video id를 보내주기위해  

잠시 포스팅했던 data-attribute를 사용한다. data-attr를 이용해서 html에 데이터를 저장하고 프론트에서 그 정보를 가져오게 한다.

니코 왈 data-attr는 백엔드와 프론트간에 정보교환을 하는데 있어 가장 쉬운 방법이라고 한다.

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

데이터 속성 사용하기 - Web 개발 학습하기 | MDN

이렇게 템플릿에서 원하는 엘레멘트에 data-videoId에 서버에서 넘겨받은 video객체의 id를 넣어주면

html에 아이디가 표시된다. 

그리고 자바스크립트에서 해당 엘레멘트를 가져와 .dataset을 콘솔창에 찍어보면

 

따라~~~

 

그리고서 조회수 작업을 할 핸들러에서 해당 id를 가져와주고 출력하면 id가 출력이되고

apiRouter에서 만든 url에 접근할 수 있다.

 

 

fetch를 이용해 해당 url에 접근하면 되는데 꼭 method를 신경쓰자~ 라우터에서 post를 사용했기에

fetch의 기본은 get이므로 Post로 설정해주고~

조회수인 meta.view를 +1을 해주고 save해준다.

그리고 꼭 return을 해주는데 여기서 중요한 점은 기존과 같이 status(200)이런식으로 status코드만

res해주면 pending으로 멈춰있다. 왜냐 status()는 꼭 render라던지 redirect같은 resposne할 수 있는

무언가를 함께 해줘야 한다. 그래서 sendStatus를 써주고 해주면~ 완료!

 

그리고 db를 보면 view가 올라가있다~~~

순서를 생각해보면

먼저 백에서 api라우터를 만들어주고 내가 임의로 이동할 url을 만들어준다

그리고 프론트에서 post로 정보를 받고 컨트롤러에서 req가 들어오면 video의 view를 +1해주고

save 한다음 sendStatus로 return해주면 완료가 된다

프론트에서는 fetch로 해당 url로 접근하면 된다~

완성으로 조회수를 보면 올라가있따~