밝을희 클태

메인페이지에 three.js를 사용해서 3D-Model을 렌더링하는데, three.js의 번들 사이즈가 지나치게 큰 걸 확인했다.3D-Model의 경우 사용자가 즉시 봐야 하는 필수 UI가 아니라는 판단이 들어, dynamic-import로 별도의 chunk로 분리해 메인 번들 사이즈를 줄였다.번들 사이즈의 경우 98.74% 감소했다.성능의 경우 Blocking Time이 아예 사라졌고, Speed Index는 조금 늘었지만, LCP는 45.45% 감소했다.여러 번 반복해 봐도 비슷한 수치를 보여줬다.

기존의 어드민 페이지가 한 도메인으로 통합되어 uri로 구분을 하고 있었는데 아예 도메인을 분리하려고 한다. 그러면서 Monorepo를 함께 적용해보려고 한다.Monorepo란?한 레포지토리에서 독립된 여러 프로젝트를 관리할 수 있음Multirepo를 사용한다면 의존성이 낮아지는 장점은 있지만, 코드를 재사용할 수 없고, 의존하는 코드의 변경이 일어나면 일일이 해당 코드를 사용하는 프로젝트로 가서 적용을 시켜줘야 한다. Monorepo를 사용하면 패키지를 여러 프로젝트에서 공유해 한 번의 설치로 공유해서 사용할 수 있다.패키지 매니저 yarn vs pnpmyarn을 사용하는 기업토스우아한형제들화해원티드랩리멤버Yarn다양한 기업에서 yarn workspaces을 사용해 모노레포를 구성하고 있다. yarn ..

Blender로 만든 3D 모델을 GLB 파일로 export하여 프로젝트의 메인 페이지에 넣으려고 했다. 그러나 GLB 파일의 크기가 큰 편이라, 네트워크가 조금이라도 느린 상황에서는 빈 화면이 오래 노출될 수 있었다. 이를 방지하기 위해, GLB 파일 다운로드 상태를 실시간으로 표시하는 기능을 구현했다. 진행 상황을 1%부터 100%까지 표현하려고 했다.전체 코드'use client';import React, { useState, useEffect } from 'react';import { Canvas } from '@react-three/fiber';import { Environment, OrbitControls, useGLTF } from '@react-three/drei';function Mode..

상품 페이지에서 사용자가 상품 이미지를 클릭하면, PhotoSwipe 라이브러리를 통해 큰 사이즈의 이미지가 원본 크기로 표시된다. 네트워크 속도가 빠를 때는 문제가 없지만, 개발자 도구에서 네트워크를 느린 4G로 제한한 경우, PhotoSwipe가 초기화되고 이미지를 표시하기까지 지나치게 오랜 시간이 걸린다. 일반적인 상황에서는 PhotoSwipe이 빠르게 뜨지만, 느린 네트워크에서는 사용자가 이미지를 클릭한 후 아무 반응 없이 기다리는 시간이 길어지면서 사이트가 제대로 작동하지 않는 것처럼 보일 수 있다. PhotoSwipe가 뜨고 나서 이미지를 로딩하는 화면을 보여주면 사용자는 이미지가 로딩 중이라는 것을 인지할 수 있다. 그러나 현재는 이미지 클릭 후 PhotoSwipe 자체가 뜨기까지 긴 시간이..

프로젝트의 대부분의 media query를 사용해서 반응형을 구현했다. 하지만 상품 상세 페이지의 경우 모바일일 때는 이미지 슬라이더를 터치 슬라이더로 구현을 하고 싶었고 PC의 경우 버튼을 클릭해서 이미지를 넘기게 하고 싶었다. 그래서 클라이언트의 userAgent를 확인해 모바일인지 아닌지 체크를 했고 결과는 내가 원하는 데로 잘 동작을 했다.export function isMobile() { if (typeof window !== 'undefined') { if (navigator.maxTouchPoints >= 1) { const isMobile = /Macintosh|iPad|Mobi|Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini..

분명히 metadata의 description을 "전자기기 중고거래는 키넛에서"로 설정을 해주었다. 그리고 google search console에 색인 생성을 요청하고 며칠 뒤 확인을 해보니 내가 적성한 적이 없는 description이 나오고 있었다. 원인 예측구글의 메타데이터 처리 방식:구글은 메타 설명이 페이지의 실제 콘텐츠와 충분히 일치하지 않거나, 검색자의 의도와 맞지 않는다고 판단될 경우, 페이지의 내용에서 적절한 텍스트를 추출하여 새로운 description을 생성할 수 있다. 따라서, 메타 설명이 페이지 내용과 잘 일치하고, 충분히 구체적이어야 구글이 이를 그대로 사용할 가능성이 높다. 내가 작성한 metadata의 정보가 충분하지 않다고 판단하면 페이지의 정보를 긁어모아 새로운 desc..

프로젝트에서 기본 Confirm Modal을 사용하고 있었는데 일단 못생기기도 했고 모바일에서 대화창 숨기기랑 항목이 데스크톱과 다르게 있는데 이 항목을 한번 클릭하면 더 이상 Confirm Modal이 뜨지 않는다. 우리 프로젝트에서 Confirm Modal의 입력을 꼭 "예" 를 받아다 다음 상황으로 진행이 되기 때문에 실수로 대화창 숨기기를 클릭해 버리면 사용자는 왜 다음 상황으로 안 넘어가는지 알 수 없는 문제가 발생했다. 그래서 useContext API를 사용해 전역에서 사용가능한 Confirm Modal을 만들어 볼거다. ModalProvider.jsx 형태용도modalMessageString모달의 메인 메세지modalSubMessageString모달의 서브 메세지isSelectableMod..

PWA를 도입할 생각은 없었는데 모바일 환경에서 잘 작동하기도 해서 PWA를 프로젝트에 도입하기로 했다.역시나 쉽게 되는 건 없다. 에러가 난다.Please check your GenerateSW plugin configuration: [WebpackGenerateSW] 'images' property is not expected to be here. Did you mean property 'mode'? 구글링을 해도 비슷한 에러는 많이 나왔는데 내가 난 에러는 없는 것 같았다. 계속 next.config를 만져보고 이것저것 건드려도 안 됐다. 그러다가 npm 사이트에서 pwa 패키지의 최근 업데이트 날짜를 보는데 지금 내 Next.js가 14.2.5버전이고 한 달 전쯤 나왔으니까 이게 될 리가 없을 거..

두 명이서 개발을 진행하던 중, S3 GET요청 횟수를 봤는데 2만 회의 GET요청을 보내고 있는 걸 확인했다. 두 명이서 개발을 하고 있고 사이트에 s3 버킷의 이미지가 그렇게 많지 않아 큰 문제가 없을 거라 예상을 했는데 실제 사용자가 생기면 이것보다 훨씬 많은 GET 요청이 생길 거라 예상을 하고 요청을 최소화해야겠다고 생각을 했다.그래서 알아본 게 AWS CloudFront이다.CloudFront란?CDN(Content Delivery Network) 서비스다.CDN은 클라이언트가 요청한 콘텐츠를 제공할 때, 이전에 요청된 콘텐츠라면 엣지 로케이션(Edge Location)에 캐시 된 콘텐츠를 빠르게 제공하는 역할을 한다. 만약 처음 제공되는 콘텐츠라면 해당 콘텐츠를 엣지 로케이션에 캐시로 저장해..

기존에 이미지 슬라이더가 이미지 드래그 도중에 아래 또는 위로 스크롤을 하면 스크롤이 됐다. 그래서 터치 이벤트가 시작될 때 기본 동작을 막아버렸는데 이렇게 되면 문제가 이미지 슬라이더 영역에서는 스크롤이 되지 않아 그 외의 영역을 스크롤해야 했다. 더 좋은 방법이 없을까 고민을 하다가 다른 대기업들의 이미지 슬라이더를 한참을 만져보다가 아이디어가 떠올랐다.  터치 이벤트가 시작이 되고 드래그가 일어날때 y, x의 이동거리를 계산해서 y가 더 크다면 페이지를 스크롤하고,  x의 이동거리가 더 크다면 이미지 슬라이더가 드래그되게 하면서 동시에 'touchmove' 이벤트의 기본동작을 막아준다. 정말 별거 아니지만 여기 까지 오는데 시간이 엄청 오래 걸렸다... touchstart event const s..

애플에서 iPad의 userAgent를 Mac이랑 통합을 해버려 아래의 코드만으로 ipad 인지 체크를 할 수 없다./iPad/.test(navigator.userAgent); 실제로 userAgent를 확인해 보면 useAgent에 iPad가 사라져 있다.iPad - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15MacBook - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15 ch..

Binaries:  Node: 22.3.0  npm: 10.8.1  Yarn: 1.22.19  pnpm: 8.14.0Relevant Packages:  next: 14.2.5 // Latest available version is detected (14.2.5).  eslint-config-next: 14.2.3  react: 18.3.1  react-dom: 18.3.1  typescript: 5.4.5 현재 개발 환경에서 테스트를 마치고, 배포 환경에서 프로젝트를 테스트 중인데, 주로 revalidateTag를 사용해서 재검증을 요청하는 방식으로 구현했다. 다른 페이지들은 전부 문제가 없었는데, 메인 페이지(’/’)에서 재검증 요청이 제대로 이루어지지 않는 문제가 발생했다. 검색해보니까 작년부터 나와..

기본 슬라이더 말고 모바일에서 상품을 크게 보기 위해서 큰 사이즈의 이미지 슬라이더를 구현했다. 그런데 핀치 줌으로 이미지를 확대, 축소를 하면 기존에 이미지를 넘기기 위해 구현한 Drag기능이 동작을 한다그래서 터치를 했을 때 지금 몇 개의 손가락이 터치됐는지 확인하는 로직을 추가해 줬더니 내가 원하는 방식으로 잘 작동했다const move = e => {  if (isPinching.current) return;};const startTouch = e => {  if (e.touches.length > 1) {    isPinching.current = true;    return;  }};imageShow?.addEventListener('touchstart', startTouch);

Next.JS 14 App Router프론트엔드SSR// URN = /shop// 모든 상품 조회const res = await fetch(${process.env.NEXT_PUBLIC_BASE_URL}, { next: { tags: ['products'] },});// URN = /// 최근 등록된 상품 일부 조회const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/products/recent`, { next: { tags: ['products'] },});// URN = /product/[id]// 등록된 상품 조회const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}..

Next.JS 14 App Router  그래서 Next.JS에서는 기본적으로 서버 사이드에서 GET 요청을 하면 서버 메모리에 데이터 캐시를 확인해 일치하는 캐시가 있으면 캐시 된 데이터를 제공한다. 이 캐시 데이터의 재검증하는 로직을 따로 두지 않으면 서버가 재시작되기 전까지는 항상 같은 캐시 데이터를 제공한다.DurationThe Data Cache is persistent across incoming requests and deployments unless you revalidate or opt-out.By default, data requests that use fetch are cached. You can use the cache and next.revalidate options of fetc..

Next.JS 14 App Router 회원 관리나 상품 관리를 편하게 하기 위해 어드민 페이지를 만들려고 한다.어드민 페이지의 기능은 아래와 같이 4가지 기능이 있다.전체 유저 조회정지된 유저 조회전체 상품 조회신고가 들어온 상품 조회로직 :URL의 queryString을 읽어서 page, 검색어를 받아옴queryString의 값으로 DB를 조회page나 검색어가 변경이 되면 URL에 반영hook으로 안 하고 queryString으로 하는 이유는 hook으로 구현을 하면 새로고침시 현재 보던 페이지, 검색 키워드, 카테고리 등이 다 초기화가 된다. 그리고 내가 지금 보는 화면을 다른 사람과 공유를 할 수 없어서 queryString을 읽어서 구현을 했다.  어드민 페이지를 만들다가 기존의 레이아웃들 때..

failed to load resource the server responded with a status of 431 ()프로젝트 진행 도중 갑자기 한 유저로 로그인을 하면 위와 같은 에러가 나고 아예 사이트로 접근이 불가능해졌다.이 에러가 발생하기 바로 직전 더미 데이터로 테스트를 하려고 MongoDB에 상품 1000개를 넣었다. 그러고 나서 에러가 발생!!원인 - NextAuth를 사용 중인데 로그인을 할 때 users collection에서 해당 user의 정보를 다 가져와 jwt token에 저장을 한다. 방금 1000개의 더미 데이터를 넣으면서 해당 user의 document에 상품의 ID를 넣는다. 그러면 로그인을 할 때 user document의 data를 다 가져오려하고 데이터가 너무 커서..

프로젝트를 진행하다가 상품 업로드를 하고 상품을 조회할 때 옛날의 데이터가 미리 렌더링 되고 그 이후에 최신 데이터로 바뀌는 게 너무 별로라서 왜 그런지 궁금했다. 일단 상품을 렌더링 하는 로직이const getProducts = async queryString => {... const res = await fetch(url);...};export default getProducts;서버 사이드에서 react query를 사용해서 data prefetching(getProduct)클라이언트 사이드에서 useQuery를 사용해 서버에서 미리 받아온 데이터를 렌더링react query 내부적으로 백그라운드에서 데이터 재검증이 일어나 최신 데이터를 다시 렌더링  원인은 위에 로직을 봐서 알겠지만 서버 사..