본문 바로가기

분류 전체보기

 (76)
Exit Intent 배너 직접 구현기 – 유료 배너에서 자체 구현으로 전환한 이유와 방법 이탈 직전의 순간, 마지막 찬스를 제공하는 ‘Exit Intent 배너’를 직접 구현해봤습니다. 유료 솔루션을 걷어내고 우리 서비스에 맞게 최적화된 이탈 방지 배너 시스템을 만든 과정과 기술적 포인트를 정리해봅니다.1. 왜 유료 배너에서 직접 구현으로 바꿨을까?기존에는 ADN과 같은 외부 배너 광고 솔루션을 사용해 사용자 이탈을 막고 있었습니다. 하지만 시간이 갈수록 다음과 같은 고민이 커졌습니다.💰 광고 비용 증가: 유입이 많을수록 고정비 부담이 커짐🎨 디자인/기능 커스터마이징 한계🔗 페이지 연동이 복잡하고, 특정 조건에서만 띄우는 로직은 직접 짜야 하는 상황그래서 우리는 결심했습니다.Exit Intent 배너를 직접 만들자! 2. Exit Intent란?‘Exit Intent’는 사용자가 브라우..
블로그 플랫폼을 직접 만들기로 한 이유와 구조 설계 왜 블로그 플랫폼을 직접 만들기로 했을까?지금 이 글도 티스토리에 작성하고 있지만, 어느 순간부터 생각이 들었습니다."내가 직접 글을 쓰는 공간, 내가 원하는 기능을 자유롭게 붙이고 고칠 수 있는 플랫폼을 직접 만들어보면 어떨까?"기성 플랫폼이 제공하는 템플릿이나 기능이 충분하지 않거나, 특정한 콘텐츠 흐름(예: 개발자 글쓰기, 기술 문서, 나만의 북마크 등)에 맞게 구성하려면 결국 커스터마이징이 필요하다는 한계가 있었어요. 그래서 블로그 플랫폼을 직접 만드는 프로젝트를 시작했습니다. 기술 스택 구성 영역스택선택한 이유🖥 프론트엔드React (with context API), Webpack컴포넌트 기반 구조로 UI를 관리하기 쉽고, context API를 통해 전역 상태도 무겁지 않게 다룰 수 있습니다..
[React] React에서 ref란? 정말 꼭 써야 할까? React를 공부하다 보면 한 번쯤 만나게 되는 ref. 많은 사람들이 이렇게 말하죠.“ref는 DOM에 접근할 수 있게 해주는 훅이다.”정확한 설명입니다. 하지만 여기서 끝내기엔 너무 아쉽습니다.그럼 도대체 왜 DOM에 접근해야 할까요? 상태(state)나 props로는 부족한 걸까요?이 글에서는 그런 궁금증들을 차근차근 풀어보려 합니다.1️⃣ ref란 무엇인가?React에서 ref는 특정 DOM 요소나 컴포넌트 인스턴스에 직접 접근할 수 있게 해주는 방법입니다.useRef() 훅을 사용하거나, 클래스형 컴포넌트에서는 createRef()로 생성합니다.import { useRef, useEffect } from 'react';function Example() { const inputRef = useR..
SEO 최적화를 위한 브레드크럼 & 사이트맵 자동 생성 시스템 구축기 최근 프로젝트에서 SEO 도입을 본격적으로 시작했습니다단순히 메타태그 몇 줄 추가하는 수준이 아니라,사이트 구조 자체를 SEO에 최적화된 형태로 재설계하는 작업을 진행했습니다.이번 개선의 핵심은 다음과 같았습니다.의미 있는 URL 구조로 변경query string 기반 URL을 301 리다이렉트브레드크럼 및 Canonical 태그 자동 생성sitemap.xml 자동화 API 도입기존 문제: query string 기반 URL 구조기존 페이지 URL은 다음과 같은 형태였습니다:/products?page=2&category=outer&sort=popular 검색·필터·페이지네이션 등을 모두 query string으로 처리해 개발자 입장에선 편했지만,검색엔진과 사용자 입장에서는 다음과 같은 문제가 있었습니다...
[React] React에서 URL 쿼리 vs API 쿼리 호출: 언제 어떤 걸 써야 할까? 최근 회사 프로젝트에서는 URL 대부분이 query string 기반으로 상태를 관리하고 있었습니다.페이지 번호, 필터 조건, 정렬 방식, 검색어 등 다양한 값들이 URL에 그대로 드러나 있었고, 그 구조를 파악하고 유지하는 것이 꽤 중요한 과제가 되었습니다. 초기에는 API 호출 없이 프론트엔드에서만 필터링을 처리하고 있었기 때문에, 상태 유지를 위해 query string을 자연스럽게 사용했습니다.하지만 SEO 작업을 진행하면서 query string을 제거해야 하는 상황이 되었고, 그에 따라 서버 API를 통해 데이터를 다시 가져오는 방식으로 변경하게 되었습니다. 이 경험을 계기로“어떤 경우에 query string을 사용해야 하고, 어떤 경우에는 숨기는 것이 좋을까?” 라는 질문을 스스로에게 던지..
React Query와 Next.js에서 헤더 데이터 캐싱 문제 트러블슈팅 이번 글에서는 실제 프로젝트에서 겪었던 헤더 데이터 로딩 이슈와 이를 React Query의 다양한 옵션을 활용해 해결한 경험을 공유합니다.문제 상황저희 웹사이트에서는 헤더가 공통 컴포넌트로 모든 페이지에 표시되고 있는 구조였습니다. 헤더에 표시될 배너 데이터를 효율적으로 관리하기 위해 처음에는 다음과 같은 접근 방식을 시도했습니다.Zustand를 사용하여 배너 데이터를 전역 상태로 관리React Query로 API 데이터를 가져와 Zustand 스토어에 저장컴포넌트에서는 Zustand 스토어의 데이터를 사용하여 렌더링그러나 이 방식에는 문제가 있었습니다. 콘솔에는 데이터가 정상적으로 로그되었지만, 이미지가 로드되지 않았고 페이지 이동 시 데이터가 유지되지 않았습니다.원인 분석불안정한 쿼리 키 구조: 함..
글또 회고록: 글쓰기에 대한 고민부터 성장까지 2024년 9월 ~ 2025년 3월까지 약 6개월 동안의 글또 활동을 하면서 있었던 회고를 하려고 합니다. 시작할 때의 마음가짐기술 블로그를 어떻게 운영해야 할지, 어떤 주제로 글을 써야 할지 고민하던 중 글또라는 커뮤니티를 알게 되었다. 글을 쓰는 습관을 들이고, 체계적으로 정리하는 방법을 배우고 싶어 참여하게 되었고, 처음에 작성한 삶의 지도를 통해 글쓰기 방향을 점차 잡아갈 수 있었다.또한, 성윤님을 비롯한 다른 글또 멤버들의 글을 읽으며 나만의 글쓰기 스타일을 찾아가는 과정이 무척 의미 있었다. 다양한 시각을 접하며 ‘어떤 방식으로 글을 써야 읽기 쉬울까?’를 고민하게 되었고, 점점 더 나만의 방식으로 정리하고 공유하는 법을 익혀 나갔다. 나에게 글쓰기란?처음에는 글쓰기가 숙제처럼 느껴졌다. 내가..
웹사이트 사이트맵 자동 생성기 구현 트러블슈팅 최근 Next.js 환경에서 PHP 클라이언트로부터 데이터를 받아 사이트맵을 자동 생성하는 시스템을 구현하면서 겪었던 문제와 그 해결 과정을 공유하고자 합니다. 이 글이 비슷한 문제를 겪고 있는 개발자들에게 도움이 되길 바랍니다.도전 과제PHP 클라이언트에서 URL 데이터를 Next.js API로 전송합니다.구글 권장사항에 따라 이 데이터를 200개씩 묶어 XML 사이트맵 파일로 생성합니다.생성된 모든 사이트맵 파일을 가리키는 인덱스 파일을 생성합니다.대규모 사이트에서는 URL이 수천 개에 달할 수 있어, 하나의 사이트맵 파일에 모든 URL을 포함시키는 것보다 200개씩 분할하여 여러 개의 사이트맵 파일을 생성하는 방식이 권장됩니다. 하지만 구현 과정에서 예상치 못한 여러 문제가 발생했습니다. 문제 상황..

티스토리툴바