메로그

구글 서치 콘솔에 등록시에 하위 도메인까지 모두 설정하고 싶은 경우가 있다.그런 경우에는, 도메인 기반으로 등록하면 된다.등록 방법아래의 이미지에서 도메인을 등록하면 모든 서브도메인과 프로토콜(http, https)에 걸친 모든 페이지가 포함되어 검색하게 됩니다.그래서 상위 도메인의 경우, 설정해서 최종 결과물을 보는 방법이 있습니다.그렇다면, 하위 서브도메인의 경우, 독자적인 결과물을 알아야할 필요가 있기 때문에 도메인에 서브 도메인을 입력해서 해도 되지만, URL 접두어를 이용해 등록해도 됩니다. 애는 URL 전체를 입력하여 한정된 데이터를 추적하여 독립적으로 관리하고 분석할 수 있습니다.sitemap.xml, robots.txt 의 경우, URL 접두어를 사용하면 일반적으로 거의 바로 등록이 되는 ..

pnpmnpm 의 설치속도를 개선하기 위해 yarn 을 도입했지만, yarn 또한, 마찬가지로 의존성 설치하는데 비슷한 현상이 발생하기 시작했습니다.패키지 매니저 변경이 필요했는데, pnpm 이 눈에 띄웠고 캐싱된 의존성을 보기 때문에 로컬에 설치한 의존성이 있다면, 로컬 환경에 더 빠르게 설치가 가능해집니다. 그래서 pnpm 을 도입해보았습니다.설치우선 pnpm 을 사용하기 위해서는 pnpm 을 설치해줍시다.별다른 노드 관리자를 쓰지 않으면 아래와 같이 pnpm 을 설치하면 됩니다.npm install -g pnpmgtihub action 에 deploy.yml 만들기상용에 배포시에는 devDependencies 가 포함되지 않도록 pnpm install --frozen-lockfile --prod 명..

Nextjs14 를 사용하면서 권장하는 폴더 및 라우팅 구조는 기본적으로 App Router 를 기반으로 움직이도록 변경되었습니다.따라서 많은 폴더 아키텍쳐들이 나오고 있는데, 여러 프로젝트를 시도하고 나서 어느정도 정리된 개인적인 Nextjs14 폴더 구조를 소개할려고 합니다.해당 구조는 협업을 위한 구조이며, 실제로 실무에서 도입하여 현재 사용하고 있는 폴더 아키텍쳐 입니다.구조기본적으로 app 폴더 아래 각 도메인 별로 page.ts, layout.ts, components/, types/, hooks/* 등 각 도메인별 기능들이 한 곳에 묶여서 지원되도록 합니다. 또한, app 폴더와 같은 레벨로 사용될 공통 기능들이 모여있는 common, 다양하게 사용할 수 있는 라이브러리 레벨에 lib 폴더,..

레거시라고 하기에는 민망하지만, nuxt2 가 EOL 이 되었기 때문에 레거시 프로젝트라고 지칭하겠습니다.기존 사용했던 nuxt2 프로젝트는 node@16 기반으로 프로젝트가 진행되었고 그 이후로 특별한 버전 업데이트틀 진행하지 않았습니다.하지만, 계속해서 프로젝트는 진행되며 보안, 성능, 최신 기술, 호환성 등의 문제가 발생할 수 있다 판단하여 node 버전을 최신 LTS (20.17.0) 으로 올리는 판단을 진행하였습니다.노드 버전 업데이트 후... 문제 발생우선 node 버전을 최신 LTS 에 상향 시킨 후, 호환성 문제와 OpenSSL 에러 문제(Node 17 부터 OpenSSL 3 을 기본적으로 사용하는데 구버전의 API 에서는 사용하지 않아)가 발생하기 시작하였습니다.OpenSSL 해결방법일단..

FullCalendarFullCalenar 는 자바스크립트로 작성된 오픈 소스 캘린더 라이브러리 입니다.해당 라이브러리는 다양한 기능과 여러 프레임워크를 지원하기 때문에 가장 인기가 많은 캘린더 오픈소스 라이브러리 입니다.설치yarn add @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid컴포넌트 만들기import { useState } from 'react'import FullCalendar from '@fullcalendar/react'import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!const CalendarTemplate = () => { const [events] = useS..

해당 글에서는 vitest 와 React Testing Library 를 이용하여 테스트 케이스를 만드는 방법을 소개합니다.vitest 는 실행속도와 vite 와 통합이 간편하며, RTL 은 리액트 컴포넌트를 테스트 하기 위한 도구 입니다.리액트 프로젝트 설치npm create vite@latest패키지 설치npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event vitest jsdomvite.config.ts 셋팅globals: true이 설정은 테스트 파일에서 전역 함수(예: describe, it, test 등)를 import 없이 사용할 수 있게 합니다.true로 설정하면 이러..