[Nomad Coder] 영화 웹 서비스 제작

웹페이지 메인 화면

 

웹페이지 디테일 화면

 

웹페이지 링크 : https://cheolyong-kim.github.io/movieApp/

React App

---

Nomad Coder 사이트의 'ReactJS로 영화 웹 서비스 만들기' 강의를 보고 만든 앱이다.

https://nomadcoders.co/react-for-beginners

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

YTS 사이트에서 제공하는 API를 사용했다.

 

강의에서는 api에서 데이터를 가져다 쓰는 방법과, 리액트 라우터를 사용하는 방법 정도를 알려주기 때문에 css를 비롯해 기능을 추가한 웹페이지 제작은 학습자 본인이 끝마쳐야 한다.

 

간단한 데이터만을 제공하는 api에다가 서버와 연동되지 않는 단순 웹페이지이기 때문에 화려할 수가 없지만,

최대한 그럴싸하게 보이도록 꾸미고 싶었다.

 

홈페이지 메인 화면은 영화 하나씩을 보여주기 위해서 세로로 긴 캐러셀을 제작했다. 사실은 가로로 긴 무한 캐러셀을 만들고 싶었는데 조금 더 공부가 필요한 부분인것 같아서 다음으로 미뤄뒀다.

메인 화면에서 제목과 장르 밑에 바로 영화 설명이 짧게 나오는데, 마음같아선 제목과 설명 사이에 영화의 장면들을 삽입하고 싶었지만 api에서 딱히 제공하는 것이 없어서 그런 식으로 제작하지는 못했다.

다만 영화 장면 하나 정도는 제공해주는것 같아서 백그라운드 이미지로 사용해봤다.

 

디테일 화면에서는 제목과 설명, 유튜브 트레일러 영상을 볼 수 있게 했다.

메인 화면에서 제목과 설명은 말줄임 처리가 되어있어, 디테일 화면에서는 제목과 설명 모두 말줄임 없이 볼 수 있게 했다.

유튜브 트레일러 영상의 경우 react-youtbe를 사용해서 구현했다. api에서 유튜브 트레일러 영상 코드를 제공해주길래 사용해봤다.

사실 api에서 제공하는 내용이 딱히 없어서 유튜브 트레일러 영상을 제외하고는 별로 집어넣을게 없다.

 

이 앱이 html, css, javascript, react를 모두 배우고 나서 처음 제작해보는 웹사이트 앱인데, 생각보다 만들기가 너무 어려웠다.

자바스크립트가 익숙하지 않다는 것도 있겠지만 처음부터 끝까지, 그러니까 코딩부터 디자인까지 모두 혼자서 하려니 단순한 앱을 만드는데도 머리가 엄청 복잡했다.

특히 캐러셀을 만드는 부분에서는 여러 글들을 보면서 만들었지만 내 사이트에 맞게 만드는 것이 상당히 어려웠다.

라이브러리를 사용하면 간단하게 구현할 수 있지만 지금은 라이브러리 없이 만들어 보고 싶었다.

결과는 그럭저럭 괜찮게 나온 것 같은데, api에서 조금만 더 많은 데이터를 제공해줬으면 내가 생각하는 디자인의 사이트를 만들 수 있었을 것 같다.

 

위 앱의 코드는 모두 아래 링크에서 확인할 수 있다.

https://github.com/Cheolyong-Kim/movieApp

GitHub - Cheolyong-Kim/movieApp: Nomad Coder의 ReactJ로 영화 웹 서비스 만들기 클론 코딩 프로젝트입니다.

---

참고한 링크

https://anerim.tistory.com/221

[리액트 React] 리액트 로딩화면(스피너) 추가하기 / api 호출 시 로딩화면(스피너) 넣기

https://youhavetosleep.dev/react-carousel/

React - Simple Carousel

https://velog.io/@taek2yo/TlL-React-img-%EC%97%90%EB%9F%AC%EC%8B%9C-%EA%B8%B0%EB%B3%B8-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0img-error

[TlL] React img 에러시 기본 이미지 불러오기(img error)

https://cocococo.tistory.com/entry/YouTube-IFrame-API-React%EC%97%90%EC%84%9C-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EB%8F%99%EC%98%81%EC%83%81-%EC%B6%9C%EB%A0%A5-%EB%B0%A9%EB%B2%95

[YouTube IFrame API] React에서 유튜브 동영상 출력 방법