naver
-
메타 태그 중복 생성 방지하기Tip 2022. 10. 27. 16:10
웹 사이트를 제작할 때 기본적으로 전체 웹 페이지에 적용되는 메타 태그를 동적인 주소와 같은 페이지에 접속했을 때만 변경해야 되는 상황이 있습니다. Next.js의 경우 Head태그를 이용해 간단히 변경하고자 하는 페이지에서 다른 메타 태그를 추가해 줄 수 있지만, 이렇게 될 경우 메타 태그가 중복하여 들어가는 문제가 발생합니다. 이를 해결하는 방법은 무척 간단합니다. 바로 변경이 일어날 수 있는 메타 태그에 key 값을 추가해 주는 것으로 간단하게 해결할 수 있습니다. // app.tsx // posts/[id].tsx 이렇게 설정하면 아래와 같이 간단하게 변경할 수 있다.
-
window init 느리거나 useEffect 인식 안 되는 라이브러리 사용 팁Tip 2022. 9. 2. 15:14
외부 라이브러리(특히 window에 생성되는)를 이용할 때 useEffect로 가지고 올 수 없는 경우가 존재한다. 이 경우 많은 사람들이 setTimeout 등을 이용해 타이밍을 맞춰주고는 한다. 하지만 이렇게 할 경우 단점이 존재한다. 네트워크가 느린 환경들을 고려해 타임을 여유롭게 잡거나 느린 환경을 고려하지 않아 에러가 발생하는 문제다. 이 문제 해결을 위해 처음 생각한 방법은 반복문을 활용해 retry를 거는 방법이었는데, 이 경우 다른 호출 스택을 반복문이 잡고 있어 다른 호출들이 먹통이 되는 문제가 발생했다. 그래서 내가 선택한 방법은 setInterval을 이용하는 방법이다. setInterval은 setTimeout과 마찬가지로 작업 큐에 작업을 저장하는 방식이기 때문에 다른 호출 스택이..
-
NextJS 사이트맵(Site Map) 만들기Next.js 2022. 7. 14. 16:47
(해당 글은 next@12.2 next-sitemap@3.1을 바탕으로 작성되었습니다.) 1. Site Map은 왜? 모든 게 다 좋아 보이는 NextJS를 사용할 때 문제가 되는 부분이 있다. 바로 사이트맵을 생성하는 일이다. 물론 사이트맵을 생성하지 않는 방법도 있다. 실제로 구글에서는 아래와 같이 사이트 맵의 필요성을 정의하고 있다. 매우 큰 사이트. 크기로 인해 Google 웹 크롤러가 신규 또는 최근에 업데이트된 페이지를 지나칠 수 있습니다. 서로 잘 연결되지 않거나 전혀 연결되지 않는 콘텐츠 페이지를 보관 처리하는 대규모 자료실이 있는 사이트. 사이트 페이지가 서로 자연스럽게 참조되지 않는 경우 페이지를 사이트맵에 표시하면 Google이 일부 페이지를 누락하는 일이 생기지 않습니다. 연결되는 ..