JS 공부/NextJS (7) 썸네일형 리스트형 230228 /12/3/4/5/6 같이 여러 path가 있는 url을 만들어주고 싶다면 [...params].js 처럼 앞에 ...을 붙여주면된다. 그리고 url에 정보를 담아서 보내기 위해 query를 없애고 url에 title과 id를 추가해준 후 /movies/id로 마스킹 해주었다. const onClick = (id, title) => { router.push( `/movies/${title}/${id}`, `/movies/${title}` ); }; return ( {results?.map((movie) => ( onClick(movie.id, movie.original_title)} className="movie" key={movie.id} > {movie.original_title} ))} 그 후 [... 230224 url에서 pathname 과 query를 설정해주면 url이 안이쁘고 필요없는 정보를 가지게 된다. router.push({ pathname: `/movies/${id}`, query: { id, }, }); http://localhost:3000/movies/505642?id=505642 이럴 때 쓸 수 있는 기능이 as 이다 as는 url을 마스킹 해준다. router.push( { pathname: `/movies/${id}`, query: { id, }, }, `/movies/${id}` ); http://localhost:3000/movies/505642 이렇게 두번째 요소로 보여주고 싶은 url을 넣어주면 된다. 그리고 query에 넣어준 요소들은 router -> query에서 확인이 가능.. 230222 NextJS에서는 폴더명으로 url을 할당해준다. 이를 maping이라고 한다. /movies 주소를 만들고 싶으면 movies 폴더에 index.js 파일을 만들어주면 된다. /movies/:id 페이지를 만들어주고 싶으면 movies 폴더에 [id].js를 만들어주면 된다. const onClick = (id) => { router.push(`/movies/${id}`); }; 이런 형식으로 onClick을 만들어주면 id에 따라 다른 페이지를 보여줄 수 있다. rewrites에도 변수를 넣어주어야 한다. { source: "/api/movies/:id", destination: `https://api.themoviedb.org/3/movie/:id?api_key=${API_KEY}`, }, sour.. 230221 nextJS에서는 redirect 와 rewrites를 지원한다. next.config.js에서 async redirects() { return [ { source: "/contact", destination: "/form", permanent: false, }, ]; }, 를 추가해주면 /contact에 가면 /form으로 연결해준다. 대신 이 방법은 url의 변화를 유저가 알 수 있다. /contact:path, /form:path처럼 뒤에 :path를 추가해주면 뒤의 문자를 가져와서 redirect 해줄 수 있다. /contach/12345 -> /form:12345 /contact:path*, /form:path*처럼 뒤에 *를 추가해주면 모든 url을 가져와서 redirect해준다. /conta.. 230216 Home about style 태그에 jsx를 추가해주면 다음과 같이 스타일을 적용시킬 수 있다. 그러나 style과 component들을 계속 복붙해주어야하는 것이 귀찮다. 이런 것들은 NextJS에서는 _app.js 파일을 만들어서 해결해 줄 수 있다. (꼭 pages 안에 파일을 만들어주어야한다.) 이 파일은 제일 먼저 읽힌다. _app.js에 import NavBar from "../components/NavBar"; export default function App({ Component, pageProps }) { return ( ); } 를 추가해주며 그 페이지의 component가 App 함수에 들어가게되어 페이지를 띄워준다. 즉 모든 페이지는 밑에 렌더링되는 것이다. 그리고 css를 받아오.. 221214 NextJS NextJS에서 그냥 "hi"를 return하면 자동으로 div에 넣어서 출력해준다. 그리고 about.js파일을 만들고 /about으로 가면 about.js가 작동한다. 이것이 라이브러리와 프레임워크의 차이이다. # 라이브러리 : 개발자가 어떤 프로그램을 가져다 쓰는것 (Ex React: 렌더링할때 ReactDOM.render()를 불러와서 사용한다.) # 프레임워크: 개발자의 코드를 프로그램이 불러오는 것 (Ex NextJS: 정해진 규칙에 따라 코드를 작성하면 렌더링된다. ) export default를 해야만 사이트에서 볼 수 있다. 그리고 파일명은 URL명과 같다. 또한 장점으로는 앱에 있는 페이지들이 미리 렌더링 된다는 점이 있다. react-app은 client-side rend.. 221208 1. route npm i react-router-dom@5.3.0 으로 다운로드한다. router을 사용하면 주소에 따라 보여지는 component를 다르게 해줄 수 있다. import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import Detail from "./routes/Detail"; import Home from "./routes/Home"; function App() { return ( ); } Router와 Switch로 감싸 준 후 경로와 그에 해당하는 컴포넌트를 지정해주면 된다. 그리고 주소로 이동하게 해주는 버튼을 만들어주어야 하는데 HTML의 a=herf 를 사용해도 되기는 하지만 이렇게 하면 주소 이.. 이전 1 다음
