[프로젝트] 영화 정보 웹사이트 React로 구현하기

링크

깃허브: https://github.com/crohasang/React-Practice

GitHub - crohasang/React-Practice: 별점이 8.5점 이상인 영화들을 정렬해서 보여주는 사이트를 React를 활

사이트 접속: https://crohasang.github.io/React-Practice/

React App

---

만들게 된 계기와 과정

노마드코더의 'ReactJS로 영화 웹 사이트 만들기'를 수강하면서, React를 활용하여 웹사이트를 만드는 방법을 배웠다.

create-react-app을 어떻게 사용하는지, API에서 필요한 정보들만 어떻게 웹사이트에 적용시키는지, 그리고 결과물을 github page에 deploy하는 법을 배웠다.

강의 링크: https://nomadcoders.co/react-for-beginners

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

---

후기

이번 프로젝트를 통해 React의 문법들을 익힐 수 있었는데, 특히

• createElement, ReactDOM, JSX
• useState()
• Props
• useEffect()

위 항목들을 어떻게 사용하면 되는지 익힐 수 있었다.

(위에서 작성한 문법들에 대하여 블로그에 정리를 해놓았다. 밑의 카테고리에 들어가서 해당하는 글을 확인할 수 있다.

https://quickchabun.tistory.com/category/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C/React)

 

그리고 특히 router를 활용하여 다른 페이지로 이동할 수 있다는 것이 인상깊었다. API가 제공하는 영화의 ID를 활용하여 동적 URL을 생성하였는데, 웹사이트에서 페이지들이 어떻게 연결되고 이동하는지에 대한 정보를 얻을 수 있었다.

 

전세계의 수많은 웹사이트에서 React를 활용하고 있다. 이번 프로젝트 한 번으로 React를 활용하기에는 아직 연습이 부족하다. 더 많은 이해와 노력의 필요성을 깨닫게 되었다.