Web 백엔드 (10) / 영화 리뷰 사이트 제작 (1) - 프론트엔드와 백엔드 바인딩하기

 

지금까지 배운 내용을 활용해서 영화 리뷰 사이트의 API를 만들어보자!

지난 프론트엔드 강좌에서 영화 리뷰 사이트의 프론트를 만들었었다.

이제 직접 API를 만들어 완성해볼 차례이다.

이 포스팅에서 작성된 모든 내용은 아래 강좌를 통해 배운 내용을 바탕으로 하고 있다.

 

 

 

클래스 101 [유료강좌]

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

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

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

 

 

 

(* 영화리뷰 프론트 만드는 과정은 아래 포스팅에 담겨있다.)

https://leere.tistory.com/33

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

 

 

 

 

 

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

[1.영화 리뷰 사이트 주소 만들기 (라우터 복습)]

 

< 1. 프론트엔드 바인딩하기 >

 

 

프론트엔드의 내용을 백엔드에 바인딩해줄 것이다.

그 방법은 크게 어렵지 않다.

작업 중이던 node.js 백엔드 폴더에 views안에 main.ejs 파일을 만들어 준 뒤,

프론트엔드의 html 파일의 내용을 복사 붙여넣기 해준다.

프론트엔드의 css 파일의 내용은 기존에 만들어두었던 public - main.css 파일에 복사 붙여넣기 해준다.

마지막으로 로고이미지는 public폴더 안에 배치시켜준다.

 

 

 

 

 

 

내용을 복사붙여넣기 하는 과정이 끝난 후에는 기존 백엔드 파일에서 프론트 파일 경로들을 연결해주어야 한다.

기존에 제일 기본이 되었던 페이지를 main페이지로 이름을 짓고 render해주는 파일 이름을 main으로 지정해준다.

(아까 전 새로만든 main.ejs 파일이 연결된다.)

그리고 title은 영화 리뷰 사이트로 바꿔준다.

 

 

 

저장한뒤, 서버를 실행시켜본다.

(MySQL 서버도 실행시키지 않으면 에러가 발셍힌다. 잊지말고 터미널에서 실행시켜준다.)

 

 

 

CSS가 정상적으로 입혀지지 않았고 로고 이미지도 뜨지 않는다. 

이 부분도 연결시켜보자.

 

 

 

app.js에 들어가 보면 css와 이미지파일들은 /public에서 꺼내오기로 지정해둔 것을 볼 수 있다.

(실제로도 css파일과 로고이미지를 public폴더 안으로 옮겼었다.)

main.ejs에서 css파일과 이미지 파일의 경로에 public를 추가해 연결해준다.

 

 

css 경로 수정

 

 

로고이미지 경로 수정

 

여기까지 설정해주고 나면 웹사이트에 CSS스타일이 입혀진 것을 확인할 수 있다.

 

로고이미지도 적용이 되었다.

 

 

 

하지만 외부 API로 받아온 영화 데이터들이 보이지 않는다.

그 이유는 app.js의 다음 코드에서 알 수 있다.

 

 

app.use(helmet());은 웹사이트의 기본 보안을 추가해주는 기능이였다.

하지만 다음과 같이 내부에서 사이트의 url에 연결해 데이터를 받아오는 것 역시, 보안에 위험하다고 판단하여 막는다.

우선은 공부를 위해 만들고 있는 사이트이니 일단은 helmet를 주석처리해 없애준다.

 

 

 

(위와 같이 경우이다. 외부 url로 데이터, 이미지, Bootstrap, Jquery 등등 받아오는 것을 막는다.)

 

 

 

만약 실제 배포할 웹사이트를 위해서는 helmet을 사용하는 것이 좋다.

하지만 app.use(helmet());처럼 모든 보안을 다 켜두는 것이 아니라, 아래 링크에서 필요한 보안 부분이

무엇인지 살피고 목적에 따라 추가하는 과정이 필요하다.

https://www.npmjs.com/package/helmet

helmet

 

 

 

맨 왼쪽 영화 너무 무섭다..ㅠㅠ

 

다시 페이지를 실행시켜보면 영화의 정보까지 나타나는 것을 볼 수 있다.

이제 기본적인 연결 과정은 끝이 났지만, 몇가지 요소를 정리 및 추가해볼것이다.

 

 

 

 

 

Jquery와 Bootstrap을 import해주는 코드에서 필요없는 부분은 삭제하였다.

나 같은 경우에는 Jquery에서는 딱히 integrity나 crossorigin같은 속성이 없어 따로 지워주지는 않았고,

Bootstrap의 위처럼 표시해둔 코드들만 지워 정리해주었다.

integrity와 crossorigin은 부트스트랩의 정책과 같은 것인데 지금은 딱히 필요가 없어서 지웠다.

또한 popper~...은 지금 딱히 사용중이지 않기 때문에 작동을 가볍게 해주기 위해 지워주었다.

 

 

 

Jquery 부분

 

 

 

 

마지막으로 mainRouter에서 보내주고 있는 데이터를 main.ejs에서 받아와보자.

 

mainRouter.js

title에서 보내주고 있는 값을 받아보자.

 

main.ejs

그대로 title키를 이용해 <title>태그 안에 추가해준다.

 

지금은 간단한 title값을 받아왔지만, 더욱 규모가 큰 웹사이트에서는 데이터 크롤링 등에 사용되는 

og 메타 태그 등, 웹사이트의 기본 정보가 담긴 내용들을 Router에서 넘겨줄 수 있다.

= Router를 통해 페이지별로 중요한 정보들을 간편하게 넘겨줄 수 있다.

 

 

 

 

title이 적용되었다.

 

 

 

 

 

 

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