포괄 검색어로 홈페이지 노출시키기
·
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
개요. 개발자로써 [ GitHub만 있으면 그만 아니야? ] 라는 생각으로 살다가 어느날 문뜩 프론트엔드 개발자인데 정작 나를 위한 웹사이트는 하나도 없네? 생각을 하게 되었다. 비교적 옛날 유형어 자기 PR의 시대라는 말이 있는데 나를 알리기 위해서 어떤 것을 보여줄 수 있을까? 하다 못해 관심이 있는 SEO를 마음껏 고려하면서 홈페이지를 만든다면 괜찮지 않을까? 또 내가 배우며 공부한 기능, 기술을 회사에 100% 반영할 수 없는 것은 당연한 현실이다. 공부에서 끝나지 않고 자연스럽게 홈페이지에 적용한다면 그것도 재밋지 않을까? 라는 생각을 했다. 그 첫번째 시작이 개발 환경 구성이다. 히스토리. 현재 회사의 개발 환경은 내가 프로젝트를 진행하면서 경험한 불편함을 보안하면서 만들고 있다. ( 이것을 ..
Lighthouse 실행에 영향을 미치는 문제가 발생했습니다.
·
Next.js/버그
NEXT.JS를 사용해서 개발을 진행하고 성능 확인을 위해서 Lighthouse 검사를 돌렸는데 별거 안했는데 성능이 좋아서 개발 실력이 좋아졌다고 생각했는데 어림도 없었다. 자세히 보이 오류로 인해 결과가 불완전한 것이었다. Lighthouse 실행에 영향을 미치는 문제가 발생했습니다. 라는 오류가 나왔다. 특정 컴포넌트가 너무 커서 그런가 싶어서 컴포넌트를 지워도 보고 Dynamic Import 으로 인해서 검사 중 컴포넌트가 렌더링되서 발생한 문제인지 Static Import로 변경도 해봤는데 여전히 오류가 발생했다. 원인을 찾기 위해서 현재 페이지를 다시 한번 검토를 해보는데 특이한 부분이 있었다. 상세 페이지 흔하게 사용하는 Link 컴포넌트이다. 하지만 다른 점이 바로 현재 라우팅에서 deta..
[Next.js] Next.js 배포 시 발생한 문제 ( 'Build optimization failed: found page without a React Component as default export in pages/...' error )
·
Next.js/버그
Next.js 프로젝트를 배포하기 위해서 build 중 오류가 발생했다. 'Build optimization failed: found page without a React Component as default export in pages/...' error 해석해보면 React 컴포넌트가 아닌 것을 export 하는 페이지는 렌더링 될 때 오류를 일으키거나 빌드 성능을 저하시킬 수 있다고 한다. 한마디로 pages 폴더 안에 React 컴포넌트 외 다른 파일이 존재하기 때문에 발생한 문제였다. 나같은 경우 styled-components를 사용한 코드를 모아두는 Style.js 파일이 있어서 발생한 문제였다. 해결 방법 간단하게 Style.js 파일을 외부로 이전시켜주는 것으로 해결했다. 앞으로는 pag..
[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..