[React] 페이지 개발 - 핵심가치
페이지 개발 - 핵심가치 계속해서 사이트맵에서 정의한 메뉴의 페이지를 하나씩 작성하도록 하겠습니다. 먼저 페이지에 들어갈 구성요소부터 정하고 하나씩 붙여보도록 하겠습니다. 작업 내용 페이지 폴더, 스크립트 생성 사이트맵 연결 페이지 내용 작성- Content, Bottom 페이지 구성 - 공통 페이지는 [Content, Bottom] 2부분으로 구성이 되어집니다. 헤더부분은 component로 미리 구성된 드롭다운 메뉴에 추가하는 방식이고 메뉴 연결이 끝나면 연결된 페이지 내용이 표시되게 됩니다. 작업 내용과 같이 index에 페이지를 선언하고 Header에 연결한 후 페이지 내용(content, bottom) 내용을 작성합니다. 영역은 아래 그림과 같습니다. 내가 작성할 부분이 어느 부분인지 참고하시기 바랍니다. 👌 모든 작업은 vscode에서 실행합니다. vscode에서 Control + ` 를 누르고 터미널이 실행된 상태로 #npm start 를 입력하여 브라우저에 실행시킵니다. 1. 페이지 폴더, 스크립트 생성 페이지를 생성할 때는 views/ 폴더에 만들 페이지 폴더와 스크립트를 생성합니다. 앞으로 만들게 될 페이지들도 같은 작업으로 이루어 지게 됩니다. views 폴더에 마우스 오른쪽 클릭 new folder, new file을 이용하여 폴더와 메뉴를 생성합니다. 2. 사이트맵 연결 사이트맵 구성과 같이 코드를 작성하는 방법과 순서입니다. index.js 파일의 페이지 연결 코드 추가 components/Header 폴더의 HeaderLinks.js 파일의 메뉴 코드 추가 index.js 파일의 페이지 연결 코드 추가 사이트맵에 내용과 동일한 부분이며 이번에는 import의 component명을 HistoryPage라 작성하고 Router의 Switch테그에 path 는 /history-page, component는 HistoryPage로 작성합...