전체 글42 DatePicker + 공휴일 연동 활용 라이브러리1. 전 세계 공휴일 라이브러리라이브러리: https://www.npmjs.com/package/date-holidays?activeTab=readme특징: 전 세계 공휴일 데이터를 제공한계:한국 기준으로 추석(10월 6일8일), 설날(1월 28일30일)과 같이 연속된 연휴의 첫날만 공휴일로 표시됨나머지 날짜는 선택 가능하게 표시되어 연휴 처리를 별도로 필터링 해야 함2. 한국 공휴일 전용 라이브러리 **채택라이브러리: https://www.npmjs.com/package/@hyunbinseo/holidays-kr특징: 한국 공휴일 데이터를 정확하게 제공한계: 한국 이외 국가의 공휴일은 지원하지 않음 결론전 세계 공휴일이 필요하면 date-holidays, 한국만 필요하면 holidays-.. 2025. 10. 16. Google Analytics 설정 및 정보 수집 gTag 삽입 코드실제 배포 환경 에서만 데이터 수집개발 환경에서는 데이터 수집이 일어나지 않음 → 불필요한 트래픽 제거데이터는 보통 24~48시간 후부터 표시됨Google Analytics에서 기본적으로 제공되는 정보성별: 남성 / 여성 / 알 수 없음연령대: 18-24, 25-34, 35-44, 45-54, 55-64, 65+관심분야: 사용자의 관심사 카테고리인구통계 정보 수집 조건사용자 동의광고 개인화에 동의한 사용자만 포함Google 계정 연동Google 계정에 로그인한 사용자만 인구통계 정보 제공개인정보 보호개별 사용자를 식별할 수 없고, 집계된 데이터만 제공. 일정 수준 이상의 데이터가 쌓여야 정보 제공 가능GA4 이벤트 트래킹 예시(1) 버튼 클릭 이벤트 { window.gtag('ev.. 2025. 10. 16. Edge 브라우저에서 MP4 영상이 재생되지 않을 때 (H.265 → H.264 변환 가이드) 🎬 문제 상황엣지(Microsoft Edge) 브라우저에서 동영상이 재생되지 않음다른 브라우저(Chrome, Firefox 등)에서는 정상 재생됨🔍 원인 확인 방법비디오 파일 확장자 확인→ .mp4, .webm, .mov 등인지 확인MP4 내부 코덱 확인ffmpeg -i [파일명] 명령으로 확인 (*주의* ffmpeg가 설치된 폴더 내에 동영상이 위치해있어야 함)Video: h264, Audio: aac 조합인지 체크엣지 브라우저는 H.264 + AAC 조합만 완벽 호환됨hevc (H.265) 형식은 대부분 재생 불가⚙️ 해결 방법hevc (H.265)로 인코딩된 영상을엣지 및 모든 브라우저에서 호환되는 H.264 + AAC 형식으로 변환💻 변환 명령어ffmpeg -i landing_banner.m.. 2025. 10. 16. Figma에서 MCP와 커서 활용하기 Cursor + Figma MCP 도입 이유퍼블리싱 속도 향상초기 레이아웃 등 반복적인 마크업/스타일링 작업을 AI가 처리개발자는 로직/상태 관리/반응형 조정 등 핵심 구현에 집중 가능전체 개발 사이클 단축사용 방법https://www.reese-log.com/cursor-figma-model-context-protocol Cursor와 Figma로 경험하는 Model Context Protocol(MCP) www.reese-log.com환경 세팅Cursor 설치 및 MCP 플러그인 활성화{ "mcpServers": { "sse-server": { "url": "http://localhost:3333/sse" } }}Cursor Settings > mcp.json디자인 → 코드 변.. 2025. 9. 18. 프론트엔드 디버깅 테스트 가이드 1. launch.json 파일이란?위치: 프로젝트 루트의 .vscode 폴더 안역할: 디버깅을 위한 설정을 저장하는 파일장점:파일이 없으면 디버깅 할 때마다 수동으로 브라우저/서버를 설정해줘야 함launch.json을 사용하면 F5 한 번으로 바로 디버깅 시작 가능 2. launch.json 예시 { "version": "0.2.0", // 0.2.0 이 현재 표준 "configurations": [ { "name": "Debug", // Node.js 서버 디버깅용 "type": "node", "request": "launch", "program": "${workspaceFolder}/node_modules/next/dist/bin/next", ".. 2025. 9. 18. Next.js로 내 소개 웹사이트 만들기 프론트엔드 개발을 해오면서 실무에서는 아직 Next.js를 사용해볼 기회가 없었지만, 최근 들어 점점 더 많은 프로젝트에서 Next.js를 도입하는 것을 보며 직접 공부해보기로 마음먹었습니다.이번 글에서는 Next.js를 처음 시작하면서 학습한 내용과 셋업 과정, 그리고 실제로 정리한 깃허브 레포지토리를 공유합니다.📌 Next.js란?Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 파일 기반 라우팅, API 라우트 등 다양한 기능을 제공하여 React 개발을 더욱 구조적이고 효율적으로 할 수 있도록 도와줍니다.📁 프로젝트 구조 및 환경 설정아래는 제가 설정한 파일/폴더 구조 형태입니다. 프로젝트는 아래 깃허브에 정리되어 있습니다.🔗 깃허브 .. 2025. 6. 3. 이전 1 2 3 4 ··· 7 다음
