본문 바로가기

TIL

 (37)
운송장 기반 배송조회 크롤링 자동화: 우리택배 연동 과정 정리 택배 배송 이력을 자동으로 확인하는 기능을 운영하던 중, 기존에 정상적으로 연동되던 우리택배(D001)의 배송 조회가 갑자기 동작하지 않는 이슈를 발견했습니다.확인해보니 기존에 사용하던 배송조회 URL이 더 이상 유효하지 않고, 다른 페이지로 리디렉션되는 구조로 변경되어 있었기 때문에 응답 데이터가 오지 않는 상황이었습니다. 해당 문제를 해결하기 위해 다음과 같은 과정을 거쳤습니다.F12 개발자 도구의 네트워크 탭을 활용해 실제 POST 요청이 발생하는 새로운 URL을 추적했고, 최종적으로 데이터를 주고받는 tracking_number.php라는 경로를 확인했습니다.기존 로직에서 우리택배에 대응되는 step URL을 이 새 경로로 수정하였고, 다시 배송 이력 데이터를 정상적으로 받아올 수 있도록 고쳤습니..
Exit Intent 배너 직접 구현기 – 유료 배너에서 자체 구현으로 전환한 이유와 방법 이탈 직전의 순간, 마지막 찬스를 제공하는 ‘Exit Intent 배너’를 직접 구현해봤습니다. 유료 솔루션을 걷어내고 우리 서비스에 맞게 최적화된 이탈 방지 배너 시스템을 만든 과정과 기술적 포인트를 정리해봅니다.1. 왜 유료 배너에서 직접 구현으로 바꿨을까?기존에는 ADN과 같은 외부 배너 광고 솔루션을 사용해 사용자 이탈을 막고 있었습니다. 하지만 시간이 갈수록 다음과 같은 고민이 커졌습니다.💰 광고 비용 증가: 유입이 많을수록 고정비 부담이 커짐🎨 디자인/기능 커스터마이징 한계🔗 페이지 연동이 복잡하고, 특정 조건에서만 띄우는 로직은 직접 짜야 하는 상황그래서 우리는 결심했습니다.Exit Intent 배너를 직접 만들자! 2. Exit Intent란?‘Exit Intent’는 사용자가 브라우..
블로그 플랫폼을 직접 만들기로 한 이유와 구조 설계 왜 블로그 플랫폼을 직접 만들기로 했을까?지금 이 글도 티스토리에 작성하고 있지만, 어느 순간부터 생각이 들었습니다."내가 직접 글을 쓰는 공간, 내가 원하는 기능을 자유롭게 붙이고 고칠 수 있는 플랫폼을 직접 만들어보면 어떨까?"기성 플랫폼이 제공하는 템플릿이나 기능이 충분하지 않거나, 특정한 콘텐츠 흐름(예: 개발자 글쓰기, 기술 문서, 나만의 북마크 등)에 맞게 구성하려면 결국 커스터마이징이 필요하다는 한계가 있었어요. 그래서 블로그 플랫폼을 직접 만드는 프로젝트를 시작했습니다. 기술 스택 구성 영역스택선택한 이유🖥 프론트엔드React (with context API), Webpack컴포넌트 기반 구조로 UI를 관리하기 쉽고, context API를 통해 전역 상태도 무겁지 않게 다룰 수 있습니다..
글또 회고록: 글쓰기에 대한 고민부터 성장까지 2024년 9월 ~ 2025년 3월까지 약 6개월 동안의 글또 활동을 하면서 있었던 회고를 하려고 합니다. 시작할 때의 마음가짐기술 블로그를 어떻게 운영해야 할지, 어떤 주제로 글을 써야 할지 고민하던 중 글또라는 커뮤니티를 알게 되었다. 글을 쓰는 습관을 들이고, 체계적으로 정리하는 방법을 배우고 싶어 참여하게 되었고, 처음에 작성한 삶의 지도를 통해 글쓰기 방향을 점차 잡아갈 수 있었다.또한, 성윤님을 비롯한 다른 글또 멤버들의 글을 읽으며 나만의 글쓰기 스타일을 찾아가는 과정이 무척 의미 있었다. 다양한 시각을 접하며 ‘어떤 방식으로 글을 써야 읽기 쉬울까?’를 고민하게 되었고, 점점 더 나만의 방식으로 정리하고 공유하는 법을 익혀 나갔다. 나에게 글쓰기란?처음에는 글쓰기가 숙제처럼 느껴졌다. 내가..
Git 브랜치 전략: Trunk-Based에서 GitHub Flow로의 여정 안녕하세요! 오늘은 개발 팀의 생산성과 코드 품질에 큰 영향을 미치는 Git 브랜치 전략에 대해 이야기해보려고 합니다. 특히 제가 경험한 Trunk-Based Development에서 GitHub Flow로의 전환 과정을 중심으로 실제 적용 사례와 배운 점들을 공유하겠습니다.주요 Git 브랜치 전략 비교저는 주로 세 가지 브랜치 전략을 경험해보았습니다: Git Flow, GitHub Flow, 그리고 Trunk-Based Development입니다. 각 전략의 특징을 간략히 살펴보겠습니다. Git FlowGit Flow는 가장 구조화된 브랜치 전략입니다:feature 브랜치: 모든 새로운 기능 개발은 여기서 시작develop 브랜치: 개발 중인 기능들이 모이는 통합 브랜치release 브랜치: 출시 준비..
[React-Query] Query Key 관리와 개선 경험 React Query를 도입하면서 또 하나의 중요한 고민은 queryKey 관리였습니다. 여러 파일에 걸쳐 queryKey를 관리하다 보니 재사용성과 유지보수 측면에서 어려움을 겪었는데요, 이를 해결하기 위한 전략을 공유하고자 합니다. Query Key 중앙 관리 시스템 도입여러 파일에 분산된 queryKey를 하나의 모듈로 통합 관리하는 방식을 도입했습니다.// queries/queryKeys.tsexport const QUERY_KEYS = { GENERAL: { PLANS: { INDEX: ['plans'], }, PLAN: { INDEX: (planId: number) => ['plan', planId], }, PLACES: { INDEX: ..
레거시 코드를 React Query로 개선한 리팩토링 이야기 이커머스 플랫폼의 결제 시스템을 유지보수하면서 React Query를 도입하여 코드 품질과 성능을 개선한 경험을 공유하려고 합니다. 기존 코드의 문제점 발견프로젝트에 투입되어 코드를 분석하던 중, 데이터 패칭 로직이 대부분 useEffect로 구현되어 있는 것을 발견했습니다.// 기존 코드const [memberAddress, setMemberAddress] = useState(null);const [isLoading, setIsLoading] = useState(true);useEffect(() => { if (!router.isReady) return; fetchMemberAddress(); createOrderProducts();}, [router, router.isReady]);const f..
[코드트리 한달후기] 코드트리로 코딩 테스트 준비하기 이번 글에서는 제가 한 달 동안 코드트리를 활용해 코딩 테스트를 준비한 경험을 공유하고자 합니다. 현재 많은 개발자들이 사용하는 백준이나 프로그래머스와는 어떤 차별점이 있는지, 어떤 장단점이 있는지 솔직하게 이야기해보려고 합니다.코드트리를 선택한 이유사실 알고리즘 공부를 시작할 때 가장 힘들었던 건 "도대체 어디서부터 시작해야 하지?" 라는 고민이었어요. 프로그래머스에서 문제를 몇 번 풀어봤는데, 개념도 제대로 모르는 상태에서 문제부터 풀려니 너무 막막하더라고요. 그러던 중 운이 좋게도 글또에서 코드트리와 함께하는 이벤트를 준비해주셔서 참여하게 됐습니다. 사실 코드트리라는 플랫폼은 전부터 알고 있었지만, 실제로 사용해본 건 이번이 처음이라 제 솔직한 후기를 남겨보려고 합니다! 코드트리 플랫폼 특징문제 구..

티스토리툴바