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

React에 적용하는 방법이랑 똑같다 근데 명확하게 정리를 안해놔서 휴..! 다시 적어보도록하자. https://react-bootstrap.github.io/getting-started/introduction React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 이곳에들어가면 자세한 설명이 있지만 npm install react-bootstrap bootstrap@5.1.3 이와같이 프로젝트 안에서 설치해준다. {/* The following line can be included in your src/index.js or App.js file*/} import 'bootstrap/..

별거 아니지만 별거인..? 프로젝트중에 Navbar를 부트스트랩에서 가져와서 사용하고있는데 Navbar를 커스터마이징하려고 하다가 기록해둔다. https://react-bootstrap.github.io/components/navbar/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 이와같이 기본적으로 제공하는 색상이 있다. 근데 이걸 커스터마이징하려면 react-bootstrap에서는 간단한 설정이 필요하다. https://react-bootstrap.github.io/getting-started/introduction React-Bootstrap The most popul..