NextJs에서 새로운 탭으로 Link 열기

해시태그를 클릭할 시 새로운 탭을 열어 구글 검색창에 자동으로 해시태그가 입력되어 사용자에게 정보를 제공하는 기능 구현을 위해 구글링 하였다.

<Link href="https://twitter.com/" passHref>
    <a target="_blank">
      <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
    </a>
</Link>

stackoverflow에 적혀있던 질문 글의 코드는 이런 식으로 되어있었고

<Link href="https://twitter.com/" passHref>
    <a target="_blank" rel="noopener noreferrer">
    	<div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
 	</a>
</Link>

답변 코드는 이렇게 rel="noopener noreferrer" 라는 코드가 a태그에 추가 되었다.
이게 무슨 기능을 해 주는지 찾아 보았더니

rel="noopener noreferrer"는 보안상의 이유로 사용됩니다.
이 속성은 링크를 클릭했을 때 새 창이 열리면서 새 창에서 원래 창을 제어하지 못하도록 합니다.
또한, 새 창에서 원래 창으로 referrer 정보가 전송되지 않도록 합니다

referrer 정보가 무엇인지 찾아보니
웹 페이지에서 다른 웹 페이지로 이동할 때 이전 페이지의 정보를 전달하는 것이라고 한다.
예를 들어, 사용자가 A 페이지에서 B 페이지로 이동하면 B 페이지는 referrer 정보를 통해 A 페이지의 URL을 알 수 있다고 한다.

이렇게 기능 구현과 뜻하지 않게 보안의 중요성에 대해 하나 알아가게 되었다.

참고 출처
https://stackoverflow.com/questions/65632698/how-to-open-a-link-in-a-new-tab-in-nextjs
https://stackoverflow.com/questions/57628890/why-people-use-rel-noopener-noreferrer-instead-of-just-rel-noreferrer