포괄 검색어로 홈페이지 노출시키기
·
Next.js/실험실
SEO ▶ 2024.05.05 - [Next.js/실험실] - 홈페이지 상단에 노출시키기▶ 2024.06.09 - [Next.js/실험실] - 포괄 검색어로 홈페이지 노출시키기지난 도전 지난 글에서 회사명을 검색 엔진에 검색했을 때 8페이지에 존재했었다. 원인을 파악하려고 네이버 서치 어드바이저에서 확인 해보니 Title와 Description 에 문제가 있어서 검색엔진측에서 홈페이지에 문제가 있다고 판단해서 상단에 노출시키지 않았던 것 같다.  그리고 하필이면 동명의 연예인과 유사한 이름의 업체가 있어서 경쟁에서 밀려버렸던 것 같다.  우선 네이버 서치 어드바이저에서 지적한 Title을 변경했더니 2페이지까지 올라갔다. 여기까지가 지난번 글을 올리고 2주가 지난 상황이다.  현재 상황여기서 추가로 [ ..
NextJS 근본적인 여정
·
Next.js/실험실
FBI WARRING  문제의 흐름에 따라 공부를 찾다보니 글쓴이가 지금 무슨 짓을 하는지 모를 수 있음이쁘게 봐주시고 잘못된 부분이 있다면 언제든 회초리 환영입니다.    NextJS를 사용하다보니 문뜩 layout.js에서 "use client"를 사용하면 그의 자식 요소들이 모두 클라이언트 컴포넌트가되는 것인지 궁금증이 발생했다.  일단 직접 테스트를 진행해봤다. 테스트 방식으론 Root Layout에게 "use client"를 주고 page에게는 따로 주지 않는 상태에서 콘솔을 각각 주는 방법으로 했을 때, 만약 page의 콘솔이 먼저 나온다면 전파가 안되는 것이고 layout이 먼저 나온다면전파가 되는 것이라고 생각했다. "use client";export default function Root..
NextJS Pages Router에서의 Styled Components
·
Next.js/실험실
NextJS에서 Styled Components를 사용할 때 문제가 발생했다. css 적용이 초기 렌더링때 바로 적용이 되지 않는 문제가 있었다. 위 이미지에서 보이듯 글자의 CSS가 잠깐 적용되지 않는 문제가 있었고 해결하기 위해서 이것저것 찾아봤다. App Router를 사용하는 경우라면 NextJS에서 제공하는 방법이 있어서 문제가 없지만 해당 문제가 발생한 것은 옛날 프로젝트 환경이라서 Pages Router를 사용하고 있었다.  또한 App Router로 마이그레이션할 시간이 따로 주어지지 않아서 어쩔 수 없이 현재 환경에서 해결을 해야했다. ( 해결 방법은 제일 하단에 ) babel 설정 ( 실패 )plugins: ["babel-plugin-styled-components"] 설정을 추가해주면..
홈페이지 상단에 노출시키기
·
Next.js/실험실
회사에서 만든 홈페이지가 홈페이지 명으로 검색을 했을 때 8페이지에서 노출되는 문제가 발생했다. 해당 프로젝트는 작년 3월 첫 입사를 하고 [ 모바일 ] 부분만 담당해서 개발하게 된 홈페이지인데, 실제 도메인에배포한지 1년이 넘도록 8페이지에 머물러 있던 것이다.   이런 문제를 인지하지 못하고 있다가 이번에 검색을 하다가 노출되지 않는 것을 확인하고 점검을 시작했다.우선 회사명과 유사한 이름의 서비스가 하나 있었고 동일한 이름의 가수가 무려 2명이나 존재했다.... 일단 홈페이지를 보면서 점검을 진행하면서 부족한 부분을 함께 작업을 진행하기로 했다.  OG 태그공유를 할 때 사용되는 태그가 바로 OG 태그이다. 현재 개발 환경이 Next.JS이므로 원한다면 SSR을 통해서 페이지에 맞는 제목과 썸네일을..
[Next.js] Infinity Scroll
·
Next.js/실험실
무한 스크롤은 프론트엔드 개발자가 만나게 되는 몇가지 귀찮은 작업일 것이다. 그리고 나는 이번에 만나게 되었다. 환경은 Next.js & React-Query이다. 그렇다 React-Query를 사용하고 있다. 이 전부터 React-Query는 무한 스크롤을 쉽게 구현할 수 있게 제공해주는 것이 있는 걸로 알고있다. 그래서 이번에 해당 기능을 사용하려고 한다. useInfiniteQuery 무한 스크롤을 구현할 수 있게 도와주는 아주 강력한 Hook이다. const { data, fetchNextPage, hasNextPage, status, } = useInfiniteQuery( "list" , getList , { getNextPageParam: ({pagination:{ paginationCount..