위와같은 검색창을 만들었는데 query: { "ramenType":ramenresult[0], "noodleType":ramenresult[1], "ramenStyle":ramenresult[2] }, 위와같은 타입으로 쿼리를 다음페이지로 전송하려고한다. 그래야 다음 페이지에서 받은 내용(쿼리)을 기반으로 백엔드 서버에 요청해 부합하는 리스트를 쭉 보여줄 수 있기 때문이다. 여튼 다른페이지에 주소로 '쿼리'를 보내는방법 (Next.js에서!) - useRouter()를 사용한다. import { useRouter } from 'next/router' export default function ReadMore({ post }) { const router = useRouter() return ( { rout..

위 페이지에서 사용하고 있는 Navbar는 ReactBootstrap에서 가져온걸 사용중이다. 다만 여기서 문제가 발생했다. 1. Nav.Link를 그대로 사용하면 페이지는 이동하지만 새로고침 하게된다. Next.js에서는 SPA방식으로 동작하려면 Link를 사용해 줘야한다. 그래서 이와같이 해결해 주었다. import Link from "next/link"; 키워드검색 이와같이 Nav.Link속성은 라면검색 이와같이 링크가 들어있는데 아래 방식으로 사용하면 SPA방식을 사용할 수 없다. 그래서 href속성을 지워주고 Nav안에서 반응형에도 동작하기위해 남겨두고 안에서 Link를 사용해 주었다. 그리고 Next.js에서 사용하는 방법인 a태그내에서 className을줘 스타일을 지정해 주었다. a태그이기..

간단한 Grid시스템은 Bootstrap을 사용하는데 전체적인 내브바부터 여러 필요한 디자인 컴포넌트들을 Mui로 구성하기로 했다. React와 사용방법은 거의비슷하다. https://mui.com/getting-started/installation/ Installation - MUI Install MUI, the world's most popular React UI framework. mui.com npm To install and save in your package.json dependencies, run: // with npm npm install @mui/material @emotion/react @emotion/styled // with yarn yarn add @mui/material @em..