메로그

클라이언트에서 엑셀 다운로드? 이 모듈 하나면 충분합니다 – client-excel-module 소개프론트엔드를 하다 보면 엑셀 다운로드 기능은 정말 자주 등장하는 요구사항 중 하나입니다.특히 관리자 페이지나 통계 페이지를 만들다 보면 엑셀로 내보내기는 거의 필수죠.보통은 Java + POI 조합?백엔드가 Java라면 대부분 Apache POI를 사용해서 엑셀을 생성합니다. 강력하긴 하지만…설정 복잡하고,러닝 커브도 제법 있고,결국 서버 API를 만들어야 하니 관리 포인트가 늘어나고…이런 경험, 다들 한 번쯤 해봤을 거예요. 특히 작은 기능을 위해 백엔드까지 건드리는 건 꽤 비효율적이죠.클라이언트에서 바로 엑셀을?그래서 프론트에서 직접 엑셀을 만들 수 있으면 좋겠다고 생각하게 됩니다.그때 보통 가장 먼저..

패키지를 관리하다 보면 package.json의 버전과 Git 태그가 서로 달라지는 경우가 자주 발생한다. 특히 Git 태그를 기준으로 배포하거나, npm publish 같은 작업을 자동화하려는 경우에는 버전 일치가 굉장히 중요하다. 필자의 경우 Git Flow 기반으로 개발하고 있으며, 릴리즈 시 Git 태그를 이용해 버전을 관리하고 있다. 이러한 구조에서는 Git 태그만 생성하면 자동으로 package.json의 버전까지 맞춰주는 방식이 매우 유용하다.이를 위해 간단한 스크립트를 작성해, Git 태그에서 버전을 추출하고 package.json의 버전을 자동으로 동기화하는 과정을 구현했다. 덕분에 GitHub Actions + npm 자동 배포 + 버전 자동 동기화까지 전부 매끄럽게 연결할 수 있었다...

프로젝트에 Git Flow를 도입해 브랜치 전략을 체계적으로 운영하고 있었지만, prod 배포 시마다 수동으로 태그를 만들고 릴리즈 노트를 작성하는 작업은 여전히 개발자의 몫이었음. 이런 반복적인 업무는 개발에만 집중할 수 없는 환경을 만들게 되었고, 이를 해결하기 위해 배포 시점에 자동으로 버전 태그를 생성하고, 커밋 로그 기반으로 릴리즈 노트를 자동 생성하는 GitHub Actions 워크플로우를 구축.시나리오우선 도입한 깃플로우 전략에 따라서 release/, feature/, hofix/ 이렇게 별도 브랜치를 구분해서 완료시켜 dev, prod 로 브랜치 병합 작업을 진행했음.예를 들어, release/v1.0.0 브랜치를 prod로 머지한다고 가정하면, 이 브랜치명에서 v1.0.0이라는 버전 정..

예시 코드리렌더링 발생사용 시점특징1. 전체 접근 (useStore())const { count, text } = useStore();✅ 상태 변화가 하나라도 있으면 전체 리렌더컴포넌트 내부간편하지만 성능에 불리함 (❌ 안티패턴)2. Selector 사용 (useStore(selector))const count = useStore((s) => s.count);const { count, inc } = useStore((s) => ({ count: s.count, inc: s.inc }));✅ 선택한 상태만 변경될 때 리렌더컴포넌트 내부✅ 성능 최적화에 가장 좋고, 공식 권장 방식3. getState() 접근const count = store.getState().count;❌ 리렌더 발생 안 함컴포넌트 외부..

15.2.3 이하 버전은 사용 금지.미국 샌프란시스코 기반 Vercel은 지난 18일 Next.js 15.2.3에서 해당 취약점을 패치한 뒤, 21일 보안 권고문을 발표했다. 해당 취약점은 보안 연구원 알람 라시드(Allam Rachid)와 알람 야서(Allam Yasser)가 발견해 지난달 27일 Vercel에 보고했으며, CVSS(공통 취약점 평가 시스템) 기준으로 심각도 9.1점을 기록.next start와 output: 'standalone'을 사용하는 모든 자체 호스팅 Next.js 배포는 즉시 업데이트할 것을 권장함.

이번 글은 Nextjs15 에서 폰트를 적용하는 방법에 대한 가이드를 하도록 하겠습니다.Pretendard 란현업에서 가장 많이 쓰이는 한글 폰트로 SIL 오픈 폰트 라이선스로 글꼴 단독 판매를 제외한 모든 상업적 행위 및 수정, 재배포가 가능합니다.  그래서 사용자들은 파일을 가져와서 커스텀하여 사용하기도 합니다.공공기관에서도 어느정도 표준으로 사용하고 있는 폰트로 신뢰가 있는 폰트입니다.다운로드해당 링크에서 github pretendard 파일을 다운받으시면 됩니다.web/variable 아래에 있는 woff2 를 가져와서 사용하시면 됩니다.폴더 구조fonts/pretendard 폴더를 만들어서 아래에 라이센스 파일과 woff2 파일을 넣어주시면 됩니다.셋팅app/layout.tsx 에 아래와 같이 ..