Web 프론트엔드 (12) / 영화 리뷰 사이트 만들기 3

 

이번 포스팅은 강의에서 제공해준 API를 사용하여 기능을 구현하는 부분에 대한 내용이다.

 

사실 이 블로그 포스팅 작성 목적에 대해 짧게 설명드리자면,

전생에 금붕어가 아니였을까.. 싶을 정도로 시간이 지나면 금방 까먹어 버려서...

혹시 비슷한 내용의 작업을 다시 하게 되었을때 읽고 복습하기 위해서가 주된 목적이였다.

 

그렇기 때문에 혹시라도 이 포스팅을 읽는 분들이 있으시다면...

이번 포스팅은 그대로 보고 따라할 수는 없는 내용이라고 말씀드리고 싶다.

아래 링크 속 강좌에서 직접 개인적으로 만드신 API를 수업자료로 공유해주신 상황이라서

해당 API주소를 블로그에 공유하기가 어려울 것 같다...T-T

 

하지만 API자체가 필요하다기보다 API 를 어떻게 연결하는지,

버튼과 어떤식으로 연결하면 되는지 등에 대한 도움이 필요하신 분들께는 내용이 도움이 되지 않을까 싶다.

 

그럼 프론트엔드 마지막 수업을 마무리해보자!

 

 

클래스 101 [유료강좌]

개발자 사관학교 - [웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무!

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

[웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! | 개발자 사관학교

-- > 재밌고 알차서 추천드려요!!

 

 

 

 

 

CHAPTER 5 : 배운 내용으로 30분만에 프로젝트 시작하기

[영화별 모달 댓글창에 댓글 달기 API 연결]

 

 

 

현재 영화 리뷰 사이트에서 부족한 부분은 다음과 같다.

리뷰 보기를 누르면 Modal창이 뜨고 작성된 리뷰들을 보여주고 원하면 리뷰를 추가로 더 작성할 수 있어야 한다.

그러기 위해서 구조를 살짝 다듬어보자.

 

 

 

 

표시한 부분처럼 SaveChanges 문구 대신 "후기 작성"으로 변경하고

클릭했을때 앞으로 만들어줄 addReview() 함수와 연결되도록 하였다.

 

 

 

 

 

close버튼을 없애주고 리뷰를 작성할 수 있는 창을 input태그를 사용해 만들어준다. (부트스트랩 제공)

 

 

 

 

 

코드가 잘 적용됐다면 후기를 남길 수 있는 텍스트 창이 나타난다.

 

 

 

 

 

 

 

 

 

1. 후기 불러오기

 

 

리뷰보기를 눌렀을때, 전에 쓰인 리뷰가 나타나도록 해보자.

onclick (버튼이 눌렸을때) review함수를 호출하며 id값을 넘겨주도록 한다.

 

 

 

id값은 영화 API에서 자체적으로 제공해주는 id키에 대한 value 값이다.

 

review 함수에서도 id를 파라미터로 받아올 수 있도록 한다.

짧게 내용을 정리해보자면, 다음과 같은 과정이 아주 빠르게 이루어진다.

리뷰 보기 버튼을 누르면 -> 어떤 영화의 리뷰버튼인지 (id) review함수에 전달 -> review 함수가 받음.

 

이제 이 받은 id로 어떤 영화의 리뷰 보기 버튼인지 파악했으니, 그에 맞는 리뷰들을 꺼내 보여주는 일이 남았다.

 

 

 

 

 

 

서버 API에서 데이터를 가져올때 쓰이는 Juery의 함수 ajax를 사용해준다.

기본 포맷을 지켜 쓴 뒤, url은 강의에서 제공해준 API를 적고 끝에 받아온 id를 연결해준다.

data는 바로 웹사이트에서 가져오고 있기 때문에 비워두고 type은 정보만 가져오는 GET으로 해준다.

성공시에는 console에 해당 데이터를 가져오도록 적어주었다.

(추가로 실패시에는 API가 연결이 안된다는 메시지를 넣었다.)

 

 

 

 

 

 

여기서 문제가 생기고 말았다.

API와 연결이 되지 않았다...

코드를 이래저래 살펴봐도 문제는 API와의 연결인 것 같다.

이유가 뭘까.. 생각해보니 영화사이트에서 제공해준 데이터가 최신에 업데이트가 된 모양이다.

강의에서는 옛날 버전의 id들로 작업을 해두셨는데 영화들이 갱신되면서 id도 함께 바뀌어버렸다.

현재로서는 아쉽게도 결과를 볼 수는 없을 것 같다..!

나중에 서버까지 배운 뒤에 자체 API를 만들어 도전해보는 것으로 하고!

아쉽지만 지금은 코드 구조를 익혀두는 방향으로 진행해보기로 한다. (= 웹페이지에는 변화가 없다 8ㅅ8)

 

 

 

 

 

웹페이지가 나타난다고 가정하고 이어갔다.

아래와 같이 작성해주면 리뷰보기를 눌렀을때 해당 영화의 리뷰가 나온다. (고 한다...)

 

 

data를 json.data로 바꾼 이유는 API에서 리뷰데이터를 data라는 키로 받고 있기 때문이다.

때문에 reviews라는 변수를 만들어 리뷰만 받도록 json.data를 담아주었다.

 

$(".modal-body").html('');

코드는 modal-body의 창을 비워주는 역할을 한다.

 

 

빨간 부분으로 표시한 곳이 .modal-body부분이다. 지금 예시로 남아있는 글을 지워준다.

 

그 이후에 아래에 for문을 통해 .modal-body에 모든 리뷰를 <p>태그로 차례대로 작성해준다.

 

 

 

 

API 연결이 아쉽게도 작동하지 않는다.

 

 

 

 

 

 

 

1. 후기 작성하기

그 다음으로 후기를 작성해보자.

후기를 작성하기 위해서는 다음과 같은 짧은 과정을 거쳐야 한다.

 

 

후기를 타이핑하는 곳이 바로 input태그인데 앞서 review라고 아이디를 붙여두었다.

후기 작성 버튼을 누르면 호출되는 addReview() 함수에 review 아이디를 통해 작성된 값을 넘겨준다.

addReview()를 작성해보자!

 

 

 

 

 

 

review 변수를 만들어 input창에 쓰인 문자열을 받아온다. 

Jquery의 .val(); 함수는 안에 데이터(value)를 받아오겠다는 의미이다.

 

또한 review_html 변수를 만들고 <p>태그 안에 review문자열을 넣어 리뷰 작성 버튼을 누르는 순간,

바로 리뷰 목록에 뜨게 준비해둔다.

 

서버에 보내주기 위해 다시 ajax함수를 호출한다.

url에는 강의에서 제공해준 영화 리뷰 사이트에 리뷰를 추가할 수 있는 API를 불러와준다.

data에는 서버에 보내줄 데이터를 작성한다. 아까 보았던 API에서 movie_id와 review로 내용을 받기 때문에

해당 key값들을 적어주었다.

review는 그대로 review를 넘겨주면 되지만, id의 경우 어떻게 넘겨줄 수 있을까?

 

 

 

 

 

 

target_id 변수를 review 함수 안에 만들어 받아온 id를 담아준다.

이것의 의미는 "리뷰 보기"를 누르면 review함수가 실행되는데 이때 어떤 영화의 리뷰보기인지 id를

target_id에도 저장해주는 것이다.

 

let을 쓰지 않은 이유는 전역변수로 위에 선언해줄 것이기 때문이다.

 

 

 

<script>태그 아래에 let target_id = 0;으로 전역변수를 선언과 동시에 초기해준다.

이렇게 밖에다 선언하는 이유는 특정 함수 안에 let으로 선언하게 되면 지역변수가 되어 다른 함수에서 접근하지

못하기 때문에, 하나의 변수의 값을 각각 다른 함수들에서 공유하고 싶다면 전역변수로 선언해야 한다.

 

 

 

 

 

 

지금 리뷰창이 열린 영화의 id를 가진 target_id를 서버에 movie_id로 넘겨준다.

 

 

 

 

 

 

type은 서버에 작성해주는 것이기 때문에 "POST"로 해준다.

데이터를 성공적으로 서버에 넘겨주면 API에 업데이트된 내용 전체들을 콘솔에 띄워준다.

서버에 값을 모두 넘겨주고 나면 리뷰들이 써있는 창에 방금 쓴 리뷰도 뜨도록 .modal-body 아래 append해준다.

그리고 input창을 깨끗하게 비워준다.

.val(' ');에서 ()안에 아무것도 입력하지 않으면 단순히 위에처럼 값을 받아오는 것이지만,

값을 넣으면 그 값으로 초기화 해주겠다는 의미이다.

 

 

 

이 과정을 마무리하고 나면 영화 리뷰사이트의 글까지, 정상적으로 작동된다.

직접 화면을 보지 못한건 아쉽지만 구조를 파악할 수 있어 매우 유용한 것 같다!

 

 

 

 

 

 

 

 

 

 

 

 

이것으로 프론트엔드 공부가 끝이났다.

이제 드디어 백엔드 공부에 들어갈 예정이다!!

기대도 많이 되지만 어려울 것 같아 걱정도 된다.

나만의 웹사이트를 만들어 배포하는 그날까지...

화이팅!!

 

 

 

 

 

 

 

 

 

출처: 클래스101 / [웹 개발자  단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! - 개발자 사관학교