728x90

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

 

Movie App

 

dasolpark.github.io

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

 

DasolPark/Dasol_ReactJS_Movie_App

ReactJS with Movie App. Contribute to DasolPark/Dasol_ReactJS_Movie_App development by creating an account on GitHub.

github.com

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

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

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

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

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

Top Rated Page
Latest Page
Detail Page
Full Page

728x90

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

 

Free Image Search with Unsplash

 

dasolpark.github.io

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

 

DasolPark/Dasol_React_Free_Image_Search_With_Unsplash

ReactJS with Unsplash API. Contribute to DasolPark/Dasol_React_Free_Image_Search_With_Unsplash development by creating an account on GitHub.

github.com

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

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

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

 

랜딩 페이지
검색 후 출력된 이미지 일부 페이지
검색 후 출력된 이미지 전체 페이지

+ Recent posts