[Personal Portfolio] 3. 라우팅 및 네비게이션 섹션 이동하기

라우팅 설정하기

---

기본 라우팅 과정에서 브라우저 라우터를 처음에 사용했다가… 예전에 본 네비게이션 메뉴 효과가 멋있는 사이트가 있어서 그 사이트를 참고했다.
네비게이션 메뉴를 클릭하면, 해당 섹션으로 스크롤이 이동하는 효과를 주었는데 포트폴리오 사이트에 도입해보고 싶었다.
그래서 방법을 찾기 위해서 사이트를 뒤져 보다가, 네비게이션 메뉴를 클릭할 때마다 url에 해시라우터처럼 #이 붙는 것을 보게 되었다.
그래서 해시라우터로 작업하다가 보니, react router 라이브러리에는 이런 기능이 없어보였고, 직접 구현해야 하나? 하는 생각이 들었다.
그래서 구글링을 해보다가, 라이브러리를 찾았다!

 

 

내비게이션 메뉴를 클릭하면 해당 섹션으로 이동되게 하고싶었어요

---

react-router-hash-link 라이브러리가 해당 역할을 해 주었다.
적용은 일반 react router의 Link와 똑같이 하되, 링크에 걸어 둔 path 값의 # 해시 뒤에는 이동할 섹션의 id값이 붙었다.

/* Nav.jsx */

import React from "react";
import { HashLink as Link } from "react-router-hash-link";

const Nav = () => {
  return (
    <header className="main-header">
      <nav className="main-header__nav">
        <ul className="nav__lists">
          <li className="nav__list">
            <Link to="/#home" smooth={true}>
              Home
            </Link>
          </li>
          <li className="nav__list">
            <Link to="/#about" smooth={true}>
              About
            </Link>
          </li>
          <li className="nav__list">
            <Link to="#education" smooth={true}>
              Education
            </Link>
          </li>
          <li className="nav__list">
            <Link to="/#skill" smooth={true}>
              Skill
            </Link>
          </li>
          <li className="nav__list">
            <Link to="/#projects" smooth={true}>
              Projects
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default Nav;

원래 BEM 방법론을 사용하는 걸 선호해서, 거기에 맞게 className만 사용해서 틀을 잡아두었는데, 이 라이브러리를 사용하면 id를 사용해야 한다고 해서 그 부분을 수정했다.
className도 원래는 main_about__container 이런 식으로 적었지만 아무래도 url에 나오는 것이기 때문에 간결한 표현이 좋을 것이라고 생각했다.
그래서 id로 변경해주면서 #about 과 같은 식으로 간단하게 표현했다.

 

 

프로젝트 디테일 페이지 라우팅 및 리다이렉션

---

프로젝트와 관련된 정보가 들어 있는 가짜 데이터 배열을 만들어 두고, 메인 페이지에서 디테일 페이지의 params 로 해당 프로젝트의 id값을 넘겼다.
가짜 데이터가 생각보다 조금 길어져서, 서버를 만들어서 거기에 저장해두는게 낫지 않나? 하는 생각이 들었다.
지금 당장은 빠르게 배포까지 끝내는게 목표이기 때문에, 서버까지 구현하는 것은 advanced로 놓기로 했다.
다른 부분은 문제가 되지 않는데, 들어갈 자료에 이미지와 영상이 있어서 이것들을 저장할 방법을… 찾는 것이 시간이 걸릴 것이라고 판단했다.
그리고 일단은 typescript를 사용하지 않고 있어서, propTypes를 사용할 예정이다.