React Movie App

Preview :

사이트 방문 : 

https://serene-kepler-b3e343.netlify.app/

개발목표 :

영화 API를 호출해 가장 인기있는 영화를 보여주는 웹사이트를 구현하는것을 목표로 하였습니다. 영화 포스터에 hover하여 간략한 Overview를 볼 수 있습니다. 그리고 평점도 확인할 수 있도록 구현하는것을 목표로 하였습니다.

구현기간 :

2021-06-01 ~ 2021-06-11

Skills :

React, HTML, CSS , JavaScript

배포 :

Netlify

시연영상 :

https://youtu.be/Tn7PxQ3aTns

Code :

https://github.com/bellcastle88/ReactMoviesApp.git

프로젝트 소감 :

영화 API (https://www.themoviedb.org/)를 호출하여 fetch기능을 활용하여 받아오도록 구현하였습니다. 받아온 API를 변수에 담아 화면에 표시되도록 하였고 받아온 API는 가장 인기있는 영화목록, 검색기능, 이미지를 가져올 수 있도록 하였습니다. ( title, poster_path, overview, vote_average )

먼저 API를 받아오기위해 위의 웹사이트에서 회원가입을하고 API승인을 받았습니다. 이후 Key를 받아 원하는 결과를 받아 올 수 있었습니다. 이를 통해 어떻게 React에서 어렵지 않게 가져올 수 있는지를 공부하였습니다.

웹 페이지상단에 favicon이미지( https://icons8.com/ )를 다운받아 표시하였습니다. 간단히 할 수 있는 작업이지만 실제 Client가 서비스를 이용할때 보다 쉽게 기억할 수 있도록 하였습니다. Logo에는 간단히<span>을 이용하여 다른색을 주었습니다.

Position: sticky를 사용하여 상단에 Navbar을 고정하였고 z-index: 1 속성을 사용하여 영화 포스터보다 Navbar가 먼저 배치되도록 하였습니다.

공부한 내용 :

useEffect() 함수

컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook

 

useState

useState는 값이 변하는지 변하지 않는지 상태를 관리를 한다.

그래서 초기값을 줄 수 있는데 초기값을 통해서 특정 값을 정의해주는 함수를 만들어 줄 수 있다.

 

영화 API Key 받기

https://proglish.tistory.com/147

 

fetch 란?

fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다.XMLHttpRequest와 비슷하지만 fetch는 Promise를 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다는 차이점이 있다.

props란?

props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용됩니다. parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용됩니다. 예제를 통하여 이에 대하여 알아보겠습니다.

JSX란?

쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 그것이 바로 JSX다!
어렵게 말해 JavaScript eXtension.. JavaScript의 확장 버전이고 결론은 자바스크립트이다.

"React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." (나무위키曰)
즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 주고 있다.

Rendering이란?

html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.

엘리먼트는 React의 가장 작은 단위입니다. 엘러먼트는 화면에 표시할 내용을 담고 있습니다. 브라우저 DOM 엘리먼트와는 다르게 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. (공식문서)

React Hooks란?

React Hooks은 리액트의 새로운 기능으로 React 16.8버전에 새로 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다. 예를 들면 function component에서 state을 가질 수 있게 된 것만일 앱을 react hook을 사용하여 만든다면 class component, render 등을 안해도 된다는 뜻이다. 모든 것은 하나의 function이 되는 것 함수형 프로그래밍이 가능해지는 것

Styled Components?

CSS나 SASS같이 class, id, tag name를 가져와 쓰지 않고, 스타일 지정된 컴포넌트 생성하여 Tag 쓰듯 스타일컴포넌트를 쓰는 것을 말한다. 즉, 리액트에서 ui단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 하여 재사용이 가능하며 전역에서 중첩 사용되지 않게 (컴포넌트 자체에서만 적용됨) 만들어준다.