import "./App.css"; import MovieList from "./components Navbar/MovieList/MovieList"; import Navbar from "./components Navbar/Navbar/Navbar"; import Fire from "./assets/fire.png"; import Star from "./assets/glowing-star.png"; import Party from "./assets/partying-face.png"; function App() { return ( ); } export default App; 각 섹션에 id 를 type으로 주어서 위의 네브바에 있는 을 선택하면 해당 스크롤 위치로 이동하게끔 만들거임 이렇게되면 스크롤이 좀..

테마 추가하기 svg 이미지 사용으 위해서 사용하는 플러그인 추가 https://www.npmjs.com/package/vite-plugin-svgr?activeTab=readme vite-plugin-svgr Vite plugin to transform SVGs into React components. Latest version: 4.2.0, last published: 4 days ago. Start using vite-plugin-svgr in your project by running `npm i vite-plugin-svgr`. There are 132 other projects in the npm registry using vite-plugin-svg www.npmjs.com 다크모드 svg파..

https://blog.naver.com/drv983/223202618615 로대쉬 설치및 select 선택에 따라 정렬하기 Lodash 라이브러리 Lodash(로대쉬)는 JavaScript의 인기있는 라이브러리 중 하나로 제이쿼리, 리액트와... blog.naver.com https://lodash.com/docs/4.17.15#orderBy Lodash Documentation _(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chain..

최소 점수와 같다면( 평점 선택 안할 경우) 에는 만들어놓은 전체 영화 (movies)를 setFilterMovies에 넣고 만약에 평점을 선택했다면 setMinRationg에 평점을 저장하고 필터를 사용해서 평점 이상인 movies만 setFitlterMovies에 저장한다. handleFilter(8)} > 8+ Star handleFilter(7)} > 7+ Star handleFilter(6)} > 6+ Star 평점에 handleFilter 매개변수로 각 평점을 넣어준다. MovieCard컴포넌트 map반복분을 수정한다. 평점 8점 이상 active클래스 적용 평점 7점 이상 active클래스 적용 평점 6점 이상 active클래스 적용 정열 방법에 대한 state를 추가한다.

https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 본인 API 키가 있어야 하므로 회원가입하고 API키 발급받는다. https://developer.themoviedb.org/reference/discover-movie Movie Find movies using over 30 filters and sort options. developer.themoviedb.org 필요한 쿼리스트링 확인한다. 인기순 조회 https://developer.themoviedb.org/reference/movie-..

가로로 구성해보고 싶어서 css를 수정했다. 그리고 리스트가 많아지면 가로로 스크롤바가 늘어나는데, https://github.com/Norserium/react-indiana-drag-scroll GitHub - Norserium/react-indiana-drag-scroll: React component which implements scrolling via holding the mouse button or touch React component which implements scrolling via holding the mouse button or touch - GitHub - Norserium/react-indiana-drag-scroll: React component which implement..

현재 폼에는 두 가지를 설정할 수 있다. 1. 일정 2. 진행 상황 이 두 가지가 변하면 자동으로 리랜더링 되게끔 useState로 관리한다. 아래와 같이 각 각 관리도 가능하지만 이 두개는 하나의 폼에서 입력되는 값이므로 객체에 담아서 사용이 가능하다. 그리고 폼에도 input창에 값이 바뀌면 setTask로 바뀐 값이 업데이트돼서 저장되게끔 코드를 수정한다. const handleChange = (e) => { const { name, value } = e.target; setTaskData((prev) => { return { ...prev, [name]: value }; }); }; const handleSubmit = (e) => { e.preventDefault(); console.log(ta..

기존에는 npm create-react-app 으로 만들었는데, 속도가 느려서 vite@latest를 사용하기로 함 npm create vite@latest npm start와 같은 기능 vsCode로 열어보면 이전에 create-react-app으로 설치한 파일들과 살짝 다르다 public : 정적 파일들만 넣음 (이미지 .. 바뀌지 않는 파일들) index.html 은 그대로 사용하면됨 src 폴더안에 파일들도 크게 바꿀것없음 index.js와 동일한 기능을 하는 것이 main.jsx임 App.js 가 App.jsx임 index.css * { margin: 0; padding: 0; box-sizing: border-box; } App.css .app { display: grid; grid-templ..

그냥 배포하면 env 파일이 없기 때문에 아까 만들어 놓은 .env 에서 키 랑 값을 가져온다. https://react-imagegallery-joeuni.netlify.app/ 이미지 갤러리 react-imagegallery-joeuni.netlify.app

function App() { return ( Photo by John Doe Views: 4000 Downloads: 300 Likes: 400 #tag1 #tag2 #tag3 ); } export default App; https://pixabay.com/api/docs/ Pixabay API Documentation lang str Language code of the language to be searched in. Accepted values: cs, da, de, en, es, fr, id, it, hu, nl, no, pl, pt, ro, sk, fi, sv, tr, vi, th, bg, ru, el, ja, ko, zh Default: "en" category str Filter resul..