software engineering/frontend

해당 글 69건

Next.js 프로젝트의 SEO 최적화 전략

2025. 5. 17. 12:58

안녕하세요, 이번 포스트에서는 Next.js 프로젝트에서 활용할 수 있는 효과적인 SEO 최적화 전략에 대해 이야기해보려고 합니다. 검색 엔진 최적화(SEO)는웹사이트의 가시성을 높이고 유기적 트래픽을 증가시키는 중요한 요소입니다. 특히 네이버와 같은 국내 검색 엔진에서의 노출은 모든 웹 서비스에 매우 중요하죠.1. 이미지 alt 속성 최적화일반적인 문제점많은 프로젝트에서 배너 이미지의 alt 속성이 '배너01', '배너02'와 같이 의미 없게 설정되어 있어 SEO에 부정적 영향을 주고 있습니다. 이미지를 검색 결과에 노출하기 위해서는 더 효과적인 방법이 필요합니다.의미 있는 키워드(예: 제품 카테고리, 제품 특징)로 alt 텍스트를 구성하는 것이 검색엔진 노출에 유리합니다.SEO 우선순위: , , UR..
software engineering/frontend

Apollo Client Refetch 구조 개선하기: SSE 알림과 Error 핸들링까지

2025. 4. 28. 16:46

이번 포스트에서는 Apollo Client를 사용하면서 Refetch를 효율적으로 구성하고, 실시간 알림을 SSE(Server-Sent Events)로 처리하는 방법을 소개합니다. 그리고 그 과정에서 고민했던 ErrorLink, ErrorPolicy 설정, 그리고 Subscription을 사용하지 않은 이유까지 함께 정리합니다.기존 문제우리는 Hasura GraphQL을 메인 API 서버로 사용하고 있었습니다.그런데 서비스 도중 실시간 데이터 갱신이 필요한 순간이 생겼고, 이를 해결하기 위해 "알림 시스템"을 구축해야 했습니다.처음에는 Hasura의 Subscription 기능을 고려했지만,비용과 복잡성, 운영 안정성 문제로 Subscription이 아니라 SSE를 이용해 별도 알림 서버를 구축하기로 결..
software engineering/frontend

퍼포먼스 최적화(Next.js App Router)

2025. 4. 28. 16:09

배경: FSD(Feature-Sliced Design) + Barrel Files초기 설계는 Feature-Sliced Design (FSD)를 따랐습니다. Feature 단위로 독립성과 가독성을 확보하기 위해, 권장된 가이드에 따라 Barrel Files를 도입했습니다. 하지만 Feature 단위에서 내보내는 Public Index의 양이 많아지면서 필요 없는 코드까지 묶여서 파일이 무거워졌습니다.결국: 아래와 같이 퍼포먼스에 이슈가 생겼고 Barrel Files를 걷어내기로 했습니다.초기 로딩 부하 증가SEO Core Web Vitals 점수 하락문제 진단: 구조적 성능 병목과적축된 정적 Public APISSR이 필요하지 않은 컴포넌트에 Code Splitting이 되어 있지 않아 초기 렌더링 부하..
software engineering/frontend

Next.js App Router에서 prefetch 전략

2025. 4. 28. 12:37

최근 프로젝트에서는 Next.js의 App Router를 기반으로 웹사이트를 개발했습니다.이 사이트는 다음과 같은 특징을 가지고 있었습니다:모든 페이지가 로그인 필수모든 경로가 dynamic route (export const dynamic ='force-dynamic')초기에는 prefetch에 대해 깊게 고려하지 않고, 기본 만 사용했습니다.하지만 시간이 지날수록 성능 이슈를 체감하게 되었고, prefetch 전략을 개선하여 사이트를 훨씬 최적화할 수 있었습니다.오늘은 그 경험을 정리해보려고 합니다.프로젝트의 초기 상황Next.js App Router는 를 사용할 때 기본적으로 prefetch를 수행합니다.이 때 prefetch는 별도의 API 호출을 발생시키는 것이 아니라, Server Compon..
software engineering/frontend

Next.js에서 next/image를 사용하는 이유와 optimize 설정에 대한 고민

2025. 4. 28. 11:51

Next.js를 사용하면서 많은 사람들이 자연스럽게 선택하는 컴포넌트가 있습니다. 바로 next/image입니다.이미지 관리를 자동화해주고 성능 최적화까지 해주니, 정말 매력적인 기능이죠.하지만 실제 운영 환경에서는 이 next/image가 예상치 못한 문제를 일으킬 수도 있습니다.특히 optimize: true 설정을 사용할 때 주의해야 할 점들이 있었습니다.오늘은 제가 이 문제를 고민했던 경험을 바탕으로, 왜 next/image를 쓰는지, 그리고 optimize 설정을 현명하게 다루는 방법까지 정리해보려고 합니다.왜 next/image를 사용하는가?먼저, next/image가 제공하는 장점은 정말 강력합니다.자동 최적화 (Optimization)요청하는 디바이스에 맞게 이미지를 리사이즈하거나, Web..
software engineering/frontend

실시간 데이터 갱신을 위한 SSE(Server-Sent Events)와 WebWorker 활용기

2025. 4. 28. 11:45

프로젝트를 진행하면서, 전자결재 시스템과 같은 상태 기반 데이터를 실시간으로 갱신해야 하는 요구사항이 생겼습니다. 예를 들면, 사용자가 요청한 결재가 승인되거나 거절될 때 그 상태가 즉시 화면에 반영되어야 했습니다.이를 위해 저희는 여러 기술적 대안을 고민했고, 최종적으로 Server-Sent Events(SSE) 를 사용하기로 결정했습니다.왜 WebSocket이 아닌 SSE를 선택했을까?처음에는 자연스럽게 WebSocket을 떠올렸습니다. WebSocket은 양방향 통신이 가능하고, 대규모 실시간 애플리케이션(예: 채팅 서비스)에서는 훌륭한 선택이 될 수 있습니다. 하지만 우리의 경우는 조금 달랐습니다.서버 → 클라이언트 방향의 알림만 필요했습니다. (ex: 결재 상태 변경 알림)클라이언트가 서버에 실..
software engineering/frontend

JSON-Patch: 대규모 JSON 관리를 위한 효율적인 도구

2025. 1. 22. 17:27

현대의 소프트웨어 개발 환경에서는 대규모 JSON 데이터를 관리하고 동기화하는 일이 빈번합니다. 특히 OpenAPI와 같은 API 명세서를 다룰 때, 각 버전 간의 변경 사항을 추적하고 효율적으로 관리하는 것이 중요합니다. 이런 작업을 위해 JSON-Patch는 매우 유용한 도구로 자리 잡고 있습니다. 이번 글에서는 JSON-Patch란 무엇인지, 그리고 제가 경험한 사례를 통해 이를 어떻게 효과적으로 활용할 수 있는지 공유하고자 합니다.JSON-Patch란 무엇인가?JSON-Patch는 JSON 문서의 특정 부분을 추가, 삭제, 변경, 교체할 수 있도록 설계된 경량화된 표준입니다. RFC 6902로 정의된 이 표준은 다음과 같은 특징을 가지고 있습니다:작은 크기: 변경 사항만을 포함하기 때문에 네트워크..
software engineering/frontend

KeycloakJs를 이용한 다중 계정 전환 Web Component개발기

2025. 1. 22. 12:28

프로젝트 개요다수의 사내 서비스에 공통으로 사용할 수 있는 다중 계정 전환 컴포넌트를 10일 이내에 개발해야 했습니다.Keycloak에 대한 사전 지식이 없는 상태였으며, 관리자 권한도 없이 백엔드 인증 담당자와의 협업만으로 진행해야 했습니다.이 프로젝트의 주요 목표는 다음 두 가지였습니다.호스트 서비스로부터 완전히 독립된 형태로 제작 (스타일 및 스크립트 충돌 방지)SSO 또는 인증(Keycloak)에 대한 이해가 없는 개발자도 쉽게 사용할 수 있도록 구현 컴포넌트 요구사항개발 과정에서 기능은 점진적으로 확장되었으며, 최종 요구사항은 다음과 같습니다.프로필 이미지 표시hover 시 유저 정보 표시click 시 유저 정보 + 계정 리스트 + 계정 전환 모달전체 로그아웃 기능계정 전환/로그아웃 시 다른 탭..
software engineering/frontend

Feature-Sliced Design(FSD): 프론트엔드 아키텍처의 새로운 접근법

2025. 1. 20. 22:49

Frontend프론트엔드 구조를 설계할 때 2024년 가장 화두가 되었던 구조였다고 생각합니다. Clean Architecture, Port & Adapter(Hexagonal) Architecture 그리고 Modular Monolith Architecture까지 Backend 서비스를 구상할 때 어떤 아키텍처를 갖는게 좋을지 고민했지만 Microfrontend를 제외하고 기존 클래식한 아키텍처 이후 어플리케이션 모듈 사이에 components, hooks, api 등에 나눠서 분산되어 낮은 응집도를 해결하고 싶었고, 폴더 구조 간 의존성 방향이 존재하지 않아 순환 참조가 발생하는 높은 결합를 해결하고 싶었던 프론트엔드 개발자의 고민을 타겟하여 관심을 많이 갖는거 같습니다.Feature-Sliced D..
software engineering/frontend

Next.js Font Optimization / Antd nexjs registry

2025. 1. 2. 22:28

Next.js App에 /public/font/pretendard.woff 폰트를 설정하고 싶어 라고 GPT에 물어봤는데 다음과 같은 답변이 왔다.마지막 2달간은 간단한 내용은 PR을 올리지 않기로 했는데, 내 프로젝트에 이런 코드들이 있었고 화면이 꿈틀 layout shift가 발생했다. h1 과 같은 일부 태그에는 pretendard가 적용되어 있지 않았고, 누군가 해당 태그에 Pretendard를 추가하는 PR을 올렸다.next/font will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance. next/font..
software engineering/frontend