공부 (115) 썸네일형 리스트형 GA4와 GTM을 활용한 웹사이트 이벤트 추적 기존엔 어떤 페이지에서 이탈하는지, 어떤 버튼이 눌리는지 전혀 알 수 없는 상태였기 때문에, GA4와 GTM을 도입하게 되었습니다.공식 문서는 난해하고 정보도 흩어져 있어, 처음 접하는 분들도 이해할 수 있도록 설정부터 이벤트 추적까지 내용을 정리해 봤습니다. GA4와 GTM 도입 이유 ✨기존 서비스는 사용자 행동에 대한 데이터 수집 체계가 전혀 없었습니다.버튼 클릭, 페이지 이탈 경로 등 사용자 흐름을 파악할 수 없는 상태였습니다.GA4와 GTM을 연동해 행동 기반 이벤트를 수집하고, 이를 통해 사용자 데이터를 분석할 수 있도록 개선하기 위해 도입했습니다. GA4와 GTM이란❓GA4 (Google Analytics 4)💡 GA4는 구글에서 제공하는 최신 웹 분석 도구로, 사용자의 행동 데이터를 수집.. [트러블 슈팅] 로컬은 되는데 CI는 왜 안 되죠?(react-hook-form 빌드 오류 디버깅) 평소처럼 PR을 보냈는데 갑자기 Github Actons에서 타입 에러로 빌드가 실패하는 일이 발생했습니다.그래서 해당 포스트에서는 빌드 오류를 해결한 내용에 대해 정리해보려고 합니다. 발생한 오류 🔥기존에 정상적으로 빌드되먼 PR이 갑자기 GitHub Actions에서 빌드 실패 문제가 발생했습니다.로컬에서는 동일한 코드가 정상 빌드가 됐고 오류 위치는 `react-hook-form`의 `watch()` 함수 사용 부분에서 오류가 발생했습니다. 해결 과정 🔎1. 로컬 vs CI 환경 비교항목로컬Github Actions (CI)yarn.lock✅ 존재❌ 존재하지 않음 (.gitignore에 포함 됨)react-hook-form 버전7.43.5 또는 7.58.17.61.0 (최신 패치 자동 설치됨).. 프론트엔드 개발환경 자동화 스크립트 만들기 (setup.sh) 한 줄로 개발 환경을 셋업 할 수 있는 자동화 스크립트 setup.sh를 이번 포스트를 통해 공유해보려 합니다. 자동화 스크립트 추가 이유 ✨특히 아래 작업들이 반복적으로 문제를 일으켰습니다:Node.js, Yarn, Git 설치 누락.nvmrc, .env.local 등 필수 파일 누락Node.js 버전 미스매치로 인한 런타임 오류Husky hook 미적용으로 인한 커밋 실패 프로젝트를 처음 클론하고 개발 환경을 세팅하는 과정에서 버전 불일치 등으로 인해 시작부터 시간을 허비한 경험이 있습니다.이런 경험을 다른 사람들은 겪지 않았으면 하는 마음에, 환경설정 자동화의 필요성을 절실히 느꼈습니다. 사용 방법 📖❗스크립트 실행 후 IDE 재시작은 필수입니다.chmod +x setup.sh./setup.sh .. [트러블 슈팅] Windows 호환성 오류 + WSL2 개발환경 설치 yarn 설치 오류 발생발생한 오류 🔥GitHub에서 프로젝트를 클론 한 뒤, yarn 명령어를 입력했지만 다음과 같은 오류 메시지를 마주했습니다. 왜 이런 일이 발생할까? 🔎해당 오류는 Windows 환경에서 패키지 이름에 포함된 특수 문자열이나 버전 표기 방식 때문에 발생할 수 있습니다. 📌 구체적인 원인-2.0-2@1.1.0처럼 버전 숫자와 하이픈이 반복되는 패턴은 Windows 파일 시스템에서 인식 오류를 유발할 수 있습니다.일부 패키지 매니저 또는 경로 해석기에서 이 이름을 정상적으로 처리하지 못합니다. 해결 방법 ✨✅ 가장 권장되는 방법: WSL2 환경에서 개발하기 Windows 환경의 한계를 극복하려면 리눅스 환경에서 작업하는 것이 가장 확실한 해결책입니다.그래서 WSL2(Wind.. TanStack Query로 낙관적 업데이트 구현 (구인/구직 찜) 사용자가 버튼을 클릭했을 때, 서버 응답을 기다리느라 반응이 느리면 사용자는 해당 기능이 오류가 발생했다고 생각을 할 수도 있습니다. 그래서 이번 게시글에서는 `TanStack Query`의 낙관적 업데이트(Optimistic Update)를 활용해 서버 응답을 기다리지 않고도 즉각적으로 UI가 반응할 수 있도록 구현한 내용을 공유해보려고 합니다. 구현 시나리오: 구인/구직 게시물 찜하기 ✨- 사용자가 찜 버튼을 누르면 즉시 UI 변경.- 서버 요청 실패 시 이전 상태로 롤백.- 찜 상태는 게시물 상세 쿼리에 반영되어야 하며, 관련 쿼리 무효화. UI 컴포넌트 📖const RecruitDetailPage = () => { const { favoriteMutate } = useFavoriteMutati.. next-intl을 이용한 다국어 처리 국내 서비스라고 하더라도 글로벌 사용자를 고려해 다국어 지원을 지원하고 있습니다. 이번 프로젝트에서는 `next-intl`을 사용해 간단하고 일관성 있는 다국어 처리 구조를 만들었고, 그 구조와 사용 패턴에 대해 소개해보려고 합니다.next-intl 사용 이유 ✨서버와 클라이언트에서 일관된 처리`next-intl` 은 Next.js의 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 모두에서 일관된 방식으로 데이터를 처리할 수 있습니다. 자동 로딩 및 타입 지원 다국어 메시지 파일을 자동으로 로드하고, Typescript와의 호환성을 제공하여 타입 안정성을 보장해 주기 때문에 실수를 줄이고 편리하게 작업할 수 있습니다. locale 기반 포맷팅 지원숫자, 날짜, 시간 등 다양한 포맷을 lo.. ESLint import, export, object 정렬 자동화 하기 - eslint-plugin-perfectionist 활용 프로젝트에서 코드 스타일을 유지하는 것은 협업과 유지보수에 있어서 매우 중요하다고 생각합니다.특히 import 순서, 객체 속성 정렬 등은 개발자가 직접 정렬하는 경우가 많아 실수하기 쉽습니다.이런 반복적인 정렬 작업을 ESlint로 자동화하는 방법에 대해 소개해보려고 합니다.eslint-plugin-perfectionist 사용 이유 ✨기존 eslint 플러그인 중에서도 import 정렬을 도와주는 것들이 있습니다.근데 `eslint-plugin-perfectionist`는 import, export, 객체, 인터페이스 정렬까지 지원해주고 Custom Grouping과 다양한 정렬 기준을 지원합니다.그중에서도 제가 제일 필요했던 줄 길이에 따른 정렬을 지원한다는 점에서 `eslint-plugin-per.. PerformanceObserver를 활용해 간단한 LCP 측정기 구현 오늘은 웹 페이지의 로딩 성능을 평가하는 중요한 지표 중 하나인 LCP를 `PerformanceObserver`를 사용해 간단한 LCP 측정기를 만들어 보겠습니다.PerformanceObserver란 📖`PerformanceObserver`는 웹 페이지의 성능 데이터를 감지하고 분석하는 API입니다.브라우저가 기록하는 다양한 성능 데이터를 실시간으로 수집할 수 있습니다.구문new PerformanceObserver(callback) 관찰된 성능 이벤트가 기록될 때 호출되는 콜백입니다. entryTypesPerformanceObserver를 사용할 때, `observe()` 메서드를 통해 감지할 항목을 설정할 수 있습니다.Entry Type설명paintfirst-paint, first-contentful.. 이전 1 2 3 4 ··· 15 다음
