Whatever I am

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

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

개발해야 하는 기능백엔드에서 유저의 차례가 바뀌면 해당 유저로 바뀐 시간부터 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는 여기서 아주 일부분 (사람들이 어떤 면을 어떤 방향으로 회전했는지를 볼 수 있는 내역)으로..

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

Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted import { useRouter } from 'next/router'가 문제이다. next/router는 page router에서만 사용된다.이 프로젝트는 app router 기반이므로 next/navigation을 사용해주면 에러가 해결된다.

공통 경로들을 하나로 묶어서 layout에 HomeRouter를 넣어서 공통으로 사용하려고settings, calendar, dday 폴더를 (home) 경로 하위로 옮겼는데.... The default export is not a React Component in "/settings/page" 이런 에러가 settings, calendar, dday 화면에 대해서 전부 발생했다. 이유는, layout.tsx에 default 키워드를 붙이지 않았기 때문이다. Next.js에서 layout.tsx와 page.tsx에 default를 잊지 말자!!

문제 인식팀원 중 한 분이 우리 사이트 PWA를 바탕화면에 설치했는데 뒤로가기 흐름이 부자연스럽다고 개선 요청을 했다.PWA를 구현할 때 히스토리가 남는것이 어색하게 느껴지는데 어떤 것들을 고려해야 할까? GPT의 답변은 이렇다:🤖 PWA는 "웹인데 앱처럼 보이는" UX를 제공해야 하기 때문에, 브라우저 히스토리의 사용 여부를 화면 전환의 의미에 따라 세심하게 조절해야 합니다. 🤖 앱같은 UX를 위해선 push/replace/상태 관리 방식의 전환을 구분하고, 브라우저의 뒤로가기 동작도 필요시 직접 제어해야 합니다. 우리 프로젝트에 적용우리 앱의 흐름을 적용시켜 보았다. 홈 화면(A) => 로그인화면 전환 시에 로그인화면에서 뒤로가기를 누르면 다시 홈으로 와야하기 때문에 push를 이용로그인 => 카..

구현 목표가이드 화면을 만들기로 했다.원래 기획은 로그인이 안 되어 있으면 바로 로그인 화면으로 리다이렉트하고,로그인이 되어 있으면 캘린더 화면으로 리다이렉트하는 것이었다. 이제 기획이 변경되어서, 로그아웃된 상태이더라도 캘린더 화면에 접근할 수 있고,예시로 생성된 가이드 데이터를 볼 수 있게 하고자 했다. 트러블 해결 후 또 트러블...우선 루트에 들어왔을 때 캘린더 화면으로 리다이렉트하도록 구현하였다. 루트는 존재하지 않고, 메인 화면은 캘린더였기 때문이다.그러나 현재 구현상 캘린더 화면에 들어서는 순간 react-query의 useQuery를 통해 스케줄 정보를 불러오는 요청이 보내져서,비로그인 상태일 때는 access token이 없는 상태여서axios 인스턴스의 request 인터셉터에서 로그..

구현 목표유저가 로그인이 안된 상태라면 로그인 화면(A)을 보여주고,로그인이 된 상태라면 이 유저가 커플인지 여부에 따라 커플 연결 화면(B), 커플 화면(C)을 보여주어야 한다. 현재 구현로컬 스토리지에 저장된 access token을 가지고 유저 정보에 대한 요청을 보내면 유저 정보를 가져온다.만약 실패한다면 로그인하지 않았다고 판단하고, A 화면으로 리다이렉트한다.유저 정보가 존재한다면 커플 정보 요청을 보내고,커플이 아니라면 B 화면으로 리다이렉트, 커플이라면 C 화면으로 리다이렉트한다. * 문제점화면 로딩이 한번 이루어지고 난 다음에 api 응답 결과에 따라 replace 처리를 했기 때문에 화면 깜빡임이 불가피하게 발생했다.이 깜빡임이 매우 거슬려서 화면이 렌더링되기 전 SSR 단계에서 로그인..