감공사

Click! 👉https://dasolpark.github.io/Dasol_ReactJS_Movie_App/#/

Github 👉https://github.com/DasolPark/Dasol_ReactJS_Movie_App

🎞 가장 높은 평점을 받은 영화와 최근 개봉한 영화 리스트를 알려주는 Movie App입니다.

✨ state 관리, event 관리, API를 이용해 데이터 받아오기는 물론이고,
react-router-dom을 이용하여 HashRouter, Route, Link를 연습하기에 좋은 프로젝트입니다.

가장 상단에 위치한 컴포넌트는 영화 제목, 장르, 개봉 연도, 평점, 러닝타임, 요약 등 자세한 영화 정보를 안내합니다.
그리고 이 컴포넌트를 클릭하면 해당 영화 데이터와 함께 Detail 페이지로 이동하여 더욱 더 자세한 영화 정보를 안내합니다.

TOP RATED 페이지에서는 평점 순위대로 영화 목록이 출력되며,
LATEST 페이지에서는 가장 최근에 개봉한 영화를 출력해줍니다.

웹과 모바일에서 모두 이용 가능하도록 디자인하였습니다.

Click! 👉 https://dasolpark.github.io/Dasol_React_Video_Search_With_YouTube_API/

Github 👉 https://github.com/DasolPark/Dasol_React_Video_Search_With_YouTube_API

🔍 YouTube API를 이용해 YouTube 영상을 검색하는 간단한 웹 앱 사이드 프로젝트입니다.

✨ Functional? or Class? Component, Communicating Child to Parent,  Deeply Nested Callbacks, Event,
axios를 이용하여 API 다루기 등 개념을 익히기에 좋습니다.
앞서 만들었던 Unsplash 프로젝트와 중복되는 개념이 많아 React 기초를 확고히 다지기 좋은 프로젝트입니다.

영상 리스트는 최대 30개까지 출력되며,
grid를 활용하여 모바일에서도 문제 없이 사용 가능하도록 디자인하였습니다.

Click! 👉 https://dasolpark.github.io/Dasol_React_Free_Image_Search_With_Unsplash/

Github 👉https://github.com/DasolPark/Dasol_React_Free_Image_Search_With_Unsplash

🔍Unsplash API를 이용해 무료 이미지를 검색하는 간단한 웹 앱 사이드 프로젝트입니다.

✨ components 구성하기, state 다루기, 부모와 자식 component 간 데이터를 주고 받기, event 다루기, 
React.createRef()를 이용하여 DOM 접근하기, axios를 이용하여 API 다루기 같은 개념을 익히기에 좋습니다.

이미지 결과는 최대 30개까지 출력하며, 각 이미지 크기에 맞게 grid 크기를 적용하였습니다.