728x90

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

 

Video Search With YouTube API

 

dasolpark.github.io

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

 

DasolPark/Dasol_React_Video_Search_With_YouTube_API

ReactJS with YouTube API. Contribute to DasolPark/Dasol_React_Video_Search_With_YouTube_API development by creating an account on GitHub.

github.com

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

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

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

랜딩 페이지
영상 리스트
전체 페이지

 

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