여러 페이지를 만들고 싶다면 라우터 이용. 그러기 위해서는 react-router-dom이라는 라이브러리 설치. npm install react-router-dom 그리고 index.js 파일에 필요한 컴포넌트를 import 해준다 이때 index.js 파일은 쉽게 말하자면 App.js에 있는 컴포넌트를 index.html에 꽂아주는 파일이라고 보면 된다. import { BrowserRouter } from 'react-router-dom'; 태그를 태그로 감싸준다. const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 라우팅 준비 끝. 이제 라우팅으로 페이지를 나누는 법을 살펴보자. App.js 파일로 간다..
React Bootstrap 설치 React Bootstrap을 사용하기 위해 우선 설치를 하자. Bootstrap까지 같이 설치해주어야 한다. Bootstrap은 무료 프론트엔트 프레임워크로 Responsive Web Design을 쉽게 할 수 있게 해준다. Responsive Web Design은 웹사이트가 디바이스의 크기에 맞게 보이도록 자동으로 조절해주는 것이다. React Bootstrap은 Bootstrap을 리액트에 맞게 변형시켜준 라이브러리다. npm i react-bootstrap bootstrap 설치하고 나면 React Bootstrap 홈페이지에서 필요한 컴포넌트들을 찾아서 편리하게 갖다 쓰면 된다. 나는 index.js에 아래의 코드를 넣어줘야 제대로 부트스트랩이 적용되었다. im..
1. 리액트 프로젝트 생성 추후에 PWA로 앱처럼 만들 것이기 때문에 처음에 프로젝트 생성 시 다음과 같은 명령어로 프로젝트를 생성한다. ※ 여기서 PWA란? npx create-react-app 프로젝트명 --template cra-template-pwa 빌드 시에 service-worker.js 파일을 생성하기 위해서는 index.js 파일의 설정을 다음과 같이 변경 필요. //serviceWorkerRegistration.unregister(); serviceWorkerRegistration.register();
