매우매우 고군분투했다. console을 수도없이 찍어볼만큼 휴...! 하지만 요약해서 기록해두자 아래코드는 useEffect로 불러온 axios코드 부분이다. let [array,setArray] = useState([]) ........ return ...... .then((result)=>{console.log('요청성공') console.log(result) setArray(result.data) ...... { array.length ===0 ?null :( array.map(function(a,index){ return ( // {index} {a.name} // 아니 배열+1개까지뜨다가지금은 왜 되냐..? ) }) ) } ........ - 여러가지 시도를 해봤다. 그렇게 해본결과 알게된 특이..

위와같은 검색창을 만들었는데 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..

function R1(props){ // return( // hihi {props.ramen1} // ) if(props.ramen1===0){ return }else if(props.ramen1===1){ return }else if(props.ramen1===2){ return } } Next.js 에서는 style jsx로 CSS속성을 주는데 이와같이 급하게 ? 혹은 간단하게 속성 에다가 직접적으로 css속성을 주는방법 이와같이 주면된다. style = {{}} 를 꼭주의하고 안에는 오브젝트 형태로 display:"inline"형태로 주면된다.

box.js export default function Layout(){ return } function R1(props){ // return( // hihi {props.ramen1} // ) if(props.ramen1===0){ return }else if(props.ramen1===1){ return }else if(props.ramen1===2){ return } } 위와 같이 사용할 수 있다. box.js export default function Layout(){ return } 이게 기본적인 형태라고 보면 저 Layout안에다가 새로운 컴포넌트를 따로 만들어서 쓰고싶다. 다른 페이지에 만들어도 되겠지만 한페이지에서 불러오려면 function R1(props){ // return( // hi..

위 페이지에서 사용하고 있는 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태그이기..

npm run dev로 Next.js프로젝트 진행중 위와같은 알림이 떴다. 관련하여 검색을해보니 부트스트랩을 가져와 사용중인데, SSR관련해서 컴포넌트를 감싸줘서 사용해야 하는 이슈가 있었다. React는 CSR이니 상관없는데 Next.js는 신경써줘야 하는것 같다. 당장 작동은 되지만 추후 어떤 문제가 있을지 모르기 때문에 방법대로 해결 하기로 결정 https://react-bootstrap.github.io/getting-started/server-side-rendering/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io Server-side Rendering React-..

간단한 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..

https://nextjs.org/docs/basic-features/script Basic Features: Handling Scripts | Next.js Next.js helps you optimize loading third-party scripts with the built-in next/script component. nextjs.org import Script from 'next/script' export default function Home() { return ( ) } 특정 js파일을 Script태그를 이용해서 사용해야할때 참고하자 Mui를 마주치면서 쓸 일이 생겼다.