메로그

Next.js로 개발한 서비스를 운영하던 중, OOM 이 발생했습니다.초기에는 트래픽 급증으로 인한 문제라고 판단했습니다. 검증 서버에서는 동일한 현상이 발생하지 않았고, 운영 환경에서만 증상이 나타났기 때문입니다. 그러나 실제로는 평소와 유사한 수준의 트래픽이었으며, 오토 스케일링도 정상적으로 동작하고 있었습니다.문제 확인Q. 로그 확인A. FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 다음과 같은 에러가 발생하고 있었다. Q. 메모리 모니터링A. 아래 그래프로 서버가 내려가면서 다시 실행될 때 메모리가 증가되는 '산' 모양의 그래프가 나오는 것을 확인 노드 버전..

프론트엔드 템플릿 저장소를 관리하면서 이런 문제를 경험하셨나요? 💥 템플릿 업데이트 후 빌드가 깨진 채로 배포🔍 일관되지 않은 코드 스타일로 인한 리뷰 어려움📝 매번 수동으로 작성해야 하는 릴리즈 노트📚 팀 문서에 릴리즈 정보를 일일이 업데이트이번 글에서는 GitHub Actions를 활용해 품질 검증 → 빌드 테스트 → 릴리즈 노트 자동화까지 전체 CI/CD 파이프라인을 구축하는 방법을 알아보겠습니다.파이프라인 구조GitHub Push/PR/Tag ↓[품질 검증] ESLint + Prettier + Build Test ↓ (Tag Push 시에만)[릴리즈 자동화] GitHub Release + Confluence 문서화1단계: 품질 검증 자동화왜 필요한가?PR 머지 전에 코..

SAIO 는 Search(검색) + AI Optimization(인공지능 최적화)가 합쳐진 용어로 검색 인공지능 최적화라고 합니다. 개념적으로는 AI 기반의 검색 환경에 맞춰 콘텐츠를 최적화 하는 전략인데, SEO 와는 조금 다른 전략으로 SEO 의 기본 원칙을 계승하면서 AI 에 맞춰 전략을 확장시키는 것이라고 보면 됩니다. (더 이상 키워드 최적화는 과거입니다.)SEO 를 공부하다보면, SEO, GEO, SAO 등 다양한 키워드가 있는데, 더 이상 생각할 필요가 없습니다.가장 중요한 핵심은 AI 가 사용자 질문에 답을 줄 때, 우리의 브랜드가 언급되게 하는 것입니다.SAIO 를 사용해야 하는 이유는?AI 시장이 점점 커지면서, 다양한 검색 환경으로 노출되기 시작합니다. 이에 대한 대비를 하면서 동시에..

Nextjs 를 만든 Vercel 에서 Workflow 라는 패키지를 이번에 출시했습니다.AI 에이전트, 데이터 패칭 파이프라인을 구축하는 개발자의 경우, 비동기 함수를 안정적으로 구현하려면 일반적으로 메시지 큐, 재시도 로직 들이 필요로 합니다.이러한 인프라를 추가하는 데는 실제 비즈니스 로직을 작성하는 것보다 더 오랜 시간이 걸리는 경우가 많은데, Vercel 은 이를 쉽고 빠르게 해결하기 위한 패키지를 제작하고 출시했습니다. 현재 Nextjs, Nitro 에서만 사용하고 있지만, 추후 다른 프레임워크 지원 예정 (2025년 10월 27일자 기준) 참조 싸이트https://vercel.com/blog/introducing-workflow Built-in durability: Introducing Wo..

최근 기존 개발 조직에서 분리되어 신생 프론트엔드 팀을 맡게 되었다.기존에는 프론트엔드, 백엔드, 데브옵스가 함께 일하는 형태였지만, 이번에는 오롯이 프론트엔드 개발만을 전담하는 팀으로 새롭게 구성되었다.인원은 기존 4명에서 8명으로 늘었고, 구성원은 고연차부터 신입까지 다양하며 서비스 개발부터 제품 개발까지 각기 다른 경험을 지니고 있다. 이런 배경 덕분에 기술 스펙트럼은 넓어졌지만, 그만큼 팀 방향성 정립과 일하는 방식의 통일이 필요했다. 1. 팀 파악부터 시작먼저, 팀원 개개인과의 1:1 면담을 진행했다.각자가 어떤 일을 하고 있는지, 어떤 어려움을 겪고 있는지, 그리고 무엇이 필요한지를 듣는 시간이었다.이 과정을 통해 현재의 업무 구조와 협업 방식의 문제점을 구체적으로 파악할 수 있었고, 이를 바..

요즘 웹 개발에서 가장 중요한 것은 데이터 패칭에 대한 전략을 어떻게 가져갈 것인가 입니다.이제 그 중에서 React 를 쓴다고 하면, React Query, SWR 과 같은 도구를 사용할 것 입니다.또한, 코드 스플리팅을 위해서 Suspense 를 사용하게 될텐데, 이제 그러면 lazy + Suspense + fetch (react query, swr) 이렇게 사용하면서 언제 로딩을 어떻게 넣고 어떻게 최적화하고 그러는 고민이 발생하게 됩니다. 그래서 적절한 사용 시나리오를 정리하고 얘기해보겠습니다.React Query 로딩 전략 비교가장 기본적인 방법으로 로딩, 에러 상태를 컴포넌트 레벨에서 제어하며, 각 컴포넌트 별 로딩 UI 적용이 가능함.const UserProfile = ({ userId }:..