[React] 꿈 일기 기록 사이트 제작 일지-2. 리액트 프로젝트 시작 및 페이지 만들기, 라우터 설정, 공용 컴포넌트 설정
리액트 설치 npx create-react-app my-app 라우터 라우터 설치 npm install react-router-dom --save 만들어야 할 페이지는 메인 페이지, 일기 작성 페이지, 일기 수정 페이지, 일기 개별 조회 페이지로 총 4개이다. 페이지를 만들고 라우터에 각 페이지와 url을 매핑한다. function App() { return ( ); } 이제 url과 각 페이지가 매핑되었다. 공용 컴포넌트 생성 웹 사이트에 전체적으로 쓰일 버튼과 상단의 헤더, 카드 컴포넌트를 생성한다. 헤더에는 왼쪽 버튼, 중앙의 텍스트, 오른쪽 버튼의 요소가 들어간다. import "./Header.css"; const Header = ({ leftBtn, headText, rightBtn }) =>..
2023. 9. 22.