Whatever I am

구글 서치 콘솔에서 내가 만든 스킬 상세 페이지를 테스트했더니(/skills/detail/24),스킬 상세 내용은 보이지 않고 "불러오는 중..."만 보인다. 이렇게 되면 모든 상세 페이지 내용이 전부 "불러오는 중..."으로 보여서사이트맵에 상세페이지를 각각 등록해놓은 것이 소용 없어진다!!!!! 이렇게 HTML 하단에 로 감싸진 내용이 보이긴 하지만,이는 최초 로딩하는 HTML 안에 포함되지도 않을 뿐더러, 구글 엔진이 아닌 다른 엔진이라면 HTML만 로드하고 넘어가버릴지도 모른다.SEO에 매우 불리한 상태라고 할 수 있다. 스킬상세 페이지에서 await을 통해서 데이터를 불러오는데,await하는 동안 loading.tsx 컴포넌트가 불러와지면서 HTML을 이놈이 대신 채워버리는... 불상사가 발생..

누가 우리의 조그맣고 사용자도 없는 사이트를 검색해서 들어올까 싶지만경험을 위해 검색엔진 최적화를 해보려고 한다. !! 프로젝트에 기본 세팅하기구글 서치 콘솔에서 우리 사이트를 검색엔진에서 찾아달라고 등록하기 전에먼저 프로젝트 내에서 기본적인 세팅들을 해주어야 한다.그 예로는.. 검색엔진에 검색되었을때 페이지의 제목과 description 등을 나타내는 metadata 설정하기robots.txt에 검색엔진 크롤러가 우리 사이트의 어떤 페이지를 읽을 수 있는지 규칙 제공하기우리 사이트의 어떤 페이지들을 등록할건지 쭉 나열한 sitemap.xml 만들기 가 있다. 블로그 글 하나하나가 검색엔진에 노출되듯,모든 스킬 상세 페이지의 내용을 노출되도록 하기 위해 사이트맵을 동적으로 생성하는 로직을 추가하..

SSR, ISR, SSG가 SEO에 유리한 이유는 검색엔진이 페이지에 방문하여 HTML을 읽을 때 내용이 들어 있기 때문이다.검색엔진이 CSR 방식의 페이지를 읽으면 초기 HTML에 의미 있는 콘텐츠가 거의 보이지 않고, JS 실행 이후에야 DOM이 완성된다. 검색엔진의 JS 실행은 비용이 커서 우선순위가 낮거나, 항상 보장되지 않기 때문에 CSR이 SEO에 불리하다. Next.js 컴포넌트 상단에 'use client'를 선언하면 해당 컴포넌트와 그 하위 컴포넌트들이 전부 클라이언트 컴포넌트가 되어 JS 번들에 포함된다. SSR, ISR, SSG는 어떤 선언을 통해 정의되는 것이 아니라 페이지가 데이터를 fetch하는 방식에 따라서 자동으로 결정된다.서버 컴포넌트에서 ISR과 SSG 방식은 요청의 응답..

개발해야 하는 기능백엔드에서 유저의 차례가 바뀌면 해당 유저로 바뀐 시간부터 10초를 측정해야 했고, 이 남은 시간에 맞춰 타이머 시간이 줄어들도록 구현해야 했다. 이를 위해서 다음과 같은 방법을 사용하기로 하였다.> 문제 발생!로컬에 프론트엔드와 백엔드 서버를 띄워 두고 타이머 테스트를 진행하였다.처음에는 위와 같은 타이머 구현 방식이 순조롭게 진행되었다.백엔드에서 유저의 차례가 넘어가는 시간에 다음 차례 종료 시각을 계산해서 보내면프론트엔드가 이를 받아서 타이머에 남은 시간을 세팅하였고 정확한 시간에 0초가 되고차례가 바뀌면서 다시 10초에서 시작하는 것을 확인하였다. 그러나 문제는 배포한 이후였다. 백엔드와 프론트엔드를 EC2에 배포했는데,사이트에 접속하면 타이머가 10~0초가 아니라 12~2초 남..

🐾목차 [#1] three.js로 큐브 1개 렌더링하기 GitHub 저장소">🐾목차[#1] three.js로 큐브 1개 렌더링하기GitHub 저장소 mole cube 소개 ~ !먼저 mole cube에 대해서 간략히 소개하도록 하겠다.mole cube는 내가 웹상에서 게임을 구현해보고 싶어서 기획한 프로젝트이다. 처음에는 CLI 스타일의 형식으로 게임을 만들어보고 싶었다.그러나 구체화 과정을 거치면서 온라인 큐브 게임으로 아이디어가 발전하였고사람들이 혼자서 큐브를 맞추는 것이 아닌, 다같이 힘을 합쳐서 큐브를 완성해보면 어떨까? 해서 기획되었다.CLI 스타일 UI는 여기서 아주 일부분 (사람들이 어떤 면을 어떤 방향으로 회전했는지를 볼 수 있는 내역)으로..

의존성 필드 차이package.json에는 프로젝트에서 사용하는 라이브러리와 관련된 여러 필드들이 있다.dependencies, devDependencies이다.이 두 필드는 웹 개발을 해본 사람이라면 한번쯤은 접해봤을 것이다. 처음보면 간첩임!! 최근 내가 직접 라이브러리를 만들어보면서, 라이브러리 배포기 참고peerDependencies라는 것을 추가적으로 알게 되었다.이 필드들의 차이는 뭘까? dependenciesdevDependenciespeerDependencies프로젝트가 실제로 동작할 때 필요한 라이브러리개발할 때만 필요한 라이브러리를 나열보통 빌드, 테스트, 코드 검사 시 사용되고, 배포 시에는 포함되지 않는다 내 패키지가 다른 패키지와 함께 설치될 때 호환되어야 하는 라이브러리 주로 라..

🐾목차 [#1] 아주 작은 토스트 라이브러리 배포기 [#2] 필요한 파일들 모아서 빌드하기 [#3] 대망의 배포 두근두근 GitHub 저장소 ">🐾목차[#1] 아주 작은 토스트 라이브러리 배포기[#2] 필요한 파일들 모아서 빌드하기[#3] 대망의 배포 두근두근 GitHub 저장소 배포 전 실전 테스트!배포하기 앞서, 내 라이브러리가 리액트 앱 내에서 잘 동작하는지 확인해보아야 되지 않겠는가?! yalc라는 도구를 사용하면npm에 라이브러리를 배포하지 않고도마치 배포된 것처럼 다른 프로젝트에서 테스트가 가능하다.(나는 기존 mole-toast가 탄생한 bit-O 프로젝트에서 테스트해보..

🐾목차 [#1] 아주 작은 토스트 라이브러리 배포기 [#2] 필요한 파일들 모아서 빌드하기 [#3] 대망의 배포 두근두근 GitHub 저장소 ">🐾목차[#1] 아주 작은 토스트 라이브러리 배포기[#2] 필요한 파일들 모아서 빌드하기[#3] 대망의 배포 두근두근 GitHub 저장소 1️⃣ 코드뭉치 떼오기먼저, 라이브러리에서 사용할 toast message 관련 코드들을 기존 프로젝트에서 전부 떼왔다. 이 라이브러리를 React 기반 프로젝트에서 사용할 수 있도록 하기 위해 기존 코드에서 Next.js 전용 기능에 의존하지 않도록 코드를 수정하였다. 토스트 메세지에 사용되는 아이콘들을 ..

🐾목차 [#1] 아주 작은 토스트 라이브러리 배포기 [#2] 필요한 파일들 모아서 빌드하기 [#3] 대망의 배포 두근두근 GitHub 저장소 ">🐾목차[#1] 아주 작은 토스트 라이브러리 배포기[#2] 필요한 파일들 모아서 빌드하기[#3] 대망의 배포 두근두근 GitHub 저장소 라이브러리를 만드는 것나는 오픈소스와는 거리가 먼 사람이라고 생각했다.내가 프로젝트에 임포트하여 사용하는,많은 사람들에게 편리한 기능을 제공하는 수많은 라이브러리들,이런 걸 만드는 사람들은 보나마나 진또배기 천재들이겠지.. 하는 막연한 생각뿐이었다. 지인이 어떤 라이브러리를 만들어서 npm에 배포했다고 했을..

리팩토링 시작팀원분께서 FSD 구조가 일관적이지 않다고 한번 전체적으로 리팩토링을 해보자고,감사하게도 FSD 아키텍처 관련된 팁들이 가득 적힌 문서들을 공유해주셨다.이에 FSD 리팩토링을 하면서 적용해본 내용들을 기록해보고자 한다. 인상적이었던 부분은? react query의 Mutation이나 Query 호출을 api 경로에 따라 이름짓는 컨벤션에 대해서 나와있었다.내가 만약 useMutation으로 POST '/product'를 호출할 때,useMutationProductAdd 이렇게 사용한 훅, 엔티티, 기능 순으로 이름을 작성하면 다른 커스텀 훅과 한번에 검색하기가 수월해진다!이런 검색을 수월하게 하기 위한 네이밍 컨벤션까지 생각한다면 개발을 훨씬 쾌적하게 할 수 있을 것이다. 또한 FSD 아키..