프론트엔드

Next.js의 useEffect hook에서 router.query 값을 받는 방법

Next.js의 useEffect hook에서 router.query 값을 받는 방법 안녕하세요, 개발하며 달리는 쿼카입니다. 이번 글에서는 Next.js의 useEffect hook에서 router.query 값을 받는 방법에 대해 알아보려하는데요, 저도 router.query에 따라 필요한 데이터를 가져오는 코드를 짜다가 해당 문제를 겪어서 해결책을 적어보고자합니다. 일반적으로 생각하는 router.query의 값이 useEffect에서 바로 보장될 거라 생각하지만, 보장이 되지 않습니다. 그럼 어떻게 해결할까요? 바로 router 객체의 isReady 값을 이용합니다. 해결책 const router = useRouter(); useEffect(()=>{ if(!router.isReady) retur..

Next.js의 redirect 설정을 없애도 계속 적용될때 해결법

Next.js의 redirect 설정을 없애도 계속 적용될때 해결법 안녕하세요, 개발하며 달리는 쿼카입니다. 이번 글에서는 Next.js의 redirect 설정을 없애도 계속 적용될때 해결법에 대해 알아보려합니다. module.exports = { async redirects() { return [ { source: '/foo', destination: '/bar', permanent: true, }, ] }, } Next.js에서 위와 같이 next.config.js에 rediect 설정을 해놓고 제거하는 경우에 혹은 다른 프로젝트를 사용하는데 localhost:3000을 똑같이 이용하는 경우에 redirect가 되어서 막막했던 적이 있었는데요 그 해결방법에 대해서 알아보려합니다. 방법 방법은 간단합니..

HTML a 태그의 링크에 noopener noreferrer를 사용하는 이유

HTML a 태그의 링크에 noopener noreferrer를 사용하는 이유 안녕하세요 개발하며 달리는 쿼카입니다. 프론트엔드 개발을 하게되면 a 태그를 이용한 링크에 rel="noopener noreferrer" 같은 값을 주도록 가이드하는데요 각각의 역할은 무엇이고 왜 작성을 해야하는건지 알아봅시다. 우리는 HTML 코드에서 링크를 생성하고자 할 때 a 요소를 사용합니다. 그리고 a 요소의 href 속성에 명시된 웹 페이지(URL)을 새탭에서 열게 할 경우에는 target="_blank"라는 속성을 추가합니다. 그런데 여기에서 target="_blank"만 사용하면 보안상 취약점이 생기고 퍼포먼스가 떨어질 수 있다고 합니다! target 속성의 값 그 전에 target 속성에 어떤 값들을 지정할 수..