밝을희 클태

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

제목처럼 자바스크립트는 싱글 스레드이다. 기본적으로 한 번에 하나의 작업만 처리할 수 있다. 즉 모든 작업이 순차적으로 동기적으로 실행된다. 그런데 우리는 자바스크립트에서 비동기 작업을 하고 있다. 어떻게 가능한 걸까? 자바스크립트는 싱글 스레드가 맞다. 하지만 자바스크립트 런타임 환경인 브라우저, Node.js는 멀티 스레드를 지원한다. 예를 들어서 아래의 코드의 동작 순서를 보기 전에 실행 컨텍스트, 태스크 큐, 이벤트 루프, 콜 스택에 대해서 알아야 한다.콜 스택 (Call Stack)콜 스택은 자바스크립트 엔진이 함수 호출을 관리하는 스택 구조의 데이터 구조입니다.실행 컨텍스트가 생성될 때마다 콜 스택에 푸시(push)되고, 실행이 끝나면 팝(pop)되어 콜 스택에서 제거됩니다.실행 컨텍스트 (E..

프로젝트에서 기본 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버전이고 한 달 전쯤 나왔으니까 이게 될 리가 없을 거..

드디어 프로젝트가 끝이 났다. 최근에 커스텀 키보드에 빠져서 커스텀 키보드를 중심으로 중고거래 사이트를 만들고 싶었다. 번개장터, 중고나라 등이 있었지만 키보드에 대한 세세한 카테고리가 없어서 프론트엔드 친구 한 명을 붙잡고 같이 프로젝트를 하자고 했고, 그로부터 두 달 반 정도가 지난 뒤 프로젝트가 마무리 됐다.  사이트의 이름은 keynut으로 정했다. 'keyboard' + 'nut' 의 합성어로 키보드에 미친 사람... 이런 느낌이다.  제대로 배포를 하려고 만든 사이드 프로젝트는 처음이어서 처음에 뭘 어떻게 해야 할지 고민이 정말 많았다. DB는 뭘 써야 하지, 어떤 프레임워크와 라이브러리를 사용할까, 백엔드는 어떻게 구하지 등등 시작이 너무 막막했다.   가장 큰 문제가 프론트엔드 두 명이서 ..

두 명이서 개발을 진행하던 중, 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를 사용해서 재검증을 요청하는 방식으로 구현했다. 다른 페이지들은 전부 문제가 없었는데, 메인 페이지(’/’)에서 재검증 요청이 제대로 이루어지지 않는 문제가 발생했다. 검색해보니까 작년부터 나와..