Portfolio 페이지 만들고 배포하기(3) React에서 제공하는 Link 사용

요즘 레이아웃을 제공해주는 사이트들이 매우 많다. 장기적으로 봤을땐.. 실력향상에 도움이 될지는 모르겠지만 너무 편하고 짧은 시간에 개발을 해야되는 나의 입장으로썬 매우 감사한 서비스다. 이번 포트폴리오 페이지 제작에있어서 tailwindcss를 사용했고 https://tailblocks.cc/ 라는곳에서 제공하는 레이아웃을 대거 채택했다. 조금씩 손보는 과정에서 <a> 태그 대신 React의 Link 컴포넌트로 교체하는 작업을 진행했다. (이걸 작업이라고 해야되나 -0-) 교체하는 이유는 다음과 같다.

 

React에서 제공하는 Link 컴포넌트를 사용하는 이유는 브라우저의 주소만 바꾸고 페이지는 새로 로딩하지 않는다는 점이다. 이로 인해서 브라우저의 히스토리가 남게되어 앞으로가기 뒤로가기 기능을 사용할 수 있어 긍정적인 사용자 경험을 높일 수 있다고 판단했다.

 

단점으로는 초기 로딩시간이 조금 더 걸릴 수 있다고하는데, 애초에 엄청 가벼운 페이지만 만들 예정이기때문에 별 문제가 되지 않을것이다. 또한 SEO 최적화 문제도 발생한다는데 검색을 통한 유입은 기대를 하지 않기 때문에 상관없다.

 

까먹지 않기 위해 작업을 기록해두자.

 

포트폴리오 페이지에서 몇 안되는 컴포넌트중 Header (navigation) 역할을 하는 컴포넌트의 태그들을 좀 바꿔 볼 것이다.

 

 

//header.js
export default function Header(){
  return(
    <>
      <header className="text-gray-600 body-font">
        <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
          <a className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" className="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
            </svg>
            <span className="ml-3 text-xl">Porkbelly's Portfolio</span>
          </a>
          <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
            <a className="mr-5 hover:text-gray-900">Home</a>
            <a href="/projects" className="mr-5 hover:text-gray-900">Projects</a>
            <a className="mr-5 hover:text-gray-900">Contact me</a>
          </nav>
          <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">Button
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" className="w-4 h-4 ml-1" viewBox="0 0 24 24">
              <path d="M5 12h14M12 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>
      </header>
    </>
  );
}

 

 

import Link from 'next/link';

 

에러가 발생했다. Next 11버전 이후부터는 Link 태그가 a태그를 포함하고 있기때문에 같이 사용하면 좋지 않다고 한다. 나같은 경우는 레이아웃을 다른곳에서 가져와서 사용하고 있기때문에 스타일을 맞춰서 사용해야 하기 때문에 a 태그를 유지해야한다. 그래서 legacyBahavior를 추가해서 사용했다.

 

잘됨. header와 hero, footer, index에서 link 컴포넌트가 필요하다고 생각되는 부분들 하나씩 다 바꿈.