[React] 사이트맵(Sitemap) 작성하기
사이트맵 작성하기
저번글에서 페이지 연결하는 방법에 대해 잠깐 보았습니다. 이번 글에서는 사이트맵을 구성해보고 헤더 코드를 넣어 작동이 잘되는지 확인하겠습니다.
작업 내용
- 사이트맵 구성
- 사이트맵 연결
모든 작업은 vscode에서 실행합니다. vscode에서 Control + ` 를 누르고 터미널이 실행된 상태로 #npm start 를 입력하여 브라우저에 실행시킵니다.
1. 사이트맵 구성
- 간단하게 솔루션을 온라인으로 제공하는 회사를 예로 작성해 보았습니다. 메뉴 1개당 1개의 페이지로 구성을 하고 페이지 안에는 1개 또는 여러개의 섹션으로 구성이 되어집니다.
- 사업소개
- 솔루션
- 가격
- 회사소개
- 회사소개
- 연혁
- 핵심가치
- 문의하기
- 헤더 메뉴에서 최상위(Level 1)의 메뉴(사업소개,회사소개)는 드롭다운 형태로 클릭하면 하위(Level 2)의 메뉴(솔루션, 가격 등)가 표시되게 구성을 합니다. 실제 페이지가 필요한 메뉴는 하위(Level 2)의 메뉴들입니다.
2. 사이트맵 연결
- 사이트맵 구성과 같이 코드를 작성하는 방법과 순서입니다.
- views 폴더의 페이지 폴더/파일 생성
- index.js 파일의 페이지 연결 코드 추가
- components/Header 폴더의 HeaderLinks.js 파일의 메뉴 코드 추가
- views 폴더의 페이지 폴더/파일 생성
- index.js 파일의 페이지 연결 코드 추가
- HeaderLinks.js 파일의 메뉴 코드 추가
HeaderLinks.js의 <List> 태그안에 위와 같이 카테고리를 넣습니다.
경로(Path)
- 물리경로 : 실제 하드디스크의 위치를 말합니다. 윈도우(C:\user\...), 리눅스 (/var/html/...)
- 절대경로 : 웹서버에서 root 디렉토리로 지정한 경로가 C:\abc\(물리)라면 C:\abc\(물리)가 브라우저에서 url 최상위 /로 인식합니다. 도메인이 abc.com이라면 abc.com/의 /가 C:\abc\(물리)로 매칭되는 것이지요
- 상대경로 : 내가 있는 위치를 절대 경로로 인식합니다. 브라우져에 abc.com/abc/(물리 C:\abc\abc\) 폴더라 치면 절대경로는 abc.com/(물리 C:\abc\)이 되고 상대경로의 절대 경로는 abc.com/abc/(물리 C:\abc\abc\) 로 인식이 되는 차이입니다. 이 차이에서 /def(물리 C:\abc\def\)라는 곳으로 이동을 하려면 절대경로는 /def(물리 C:\abc\abc\def\)로 이동을 하고 상대경로는 ../def(물리 C:\abc\abc\def\)로 이동하는 겁니다.
참고로 물리경로는 \ 웹경로는 / 사용합니다. 중요 👍👍
경로에 대한 부분과 영역에 대한 부분은 반드시 머릿속에 있어야 나중에 헷갈리지 않습니다. 일상편에서 웹서버의 영역(Area)에 대한 이야기를 한번 올리도록 하겠습니다.
여기까지 사이트맵 작성하기 과정이 끝났습니다.