본문 바로가기

전체 글

[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개씩 분할하여 여러 개의 사이트맵 파일을 생성하는 방식이 권장됩니다. 하지만 구현 과정에서 예상치 못한 여러 문제가 발생했습니다. 문제 상황.. 더보기
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.. 더보기
[코드트리 한달후기] 코드트리로 코딩 테스트 준비하기 이번 글에서는 제가 한 달 동안 코드트리를 활용해 코딩 테스트를 준비한 경험을 공유하고자 합니다. 현재 많은 개발자들이 사용하는 백준이나 프로그래머스와는 어떤 차별점이 있는지, 어떤 장단점이 있는지 솔직하게 이야기해보려고 합니다.코드트리를 선택한 이유사실 알고리즘 공부를 시작할 때 가장 힘들었던 건 "도대체 어디서부터 시작해야 하지?" 라는 고민이었어요. 프로그래머스에서 문제를 몇 번 풀어봤는데, 개념도 제대로 모르는 상태에서 문제부터 풀려니 너무 막막하더라고요. 그러던 중 운이 좋게도 글또에서 코드트리와 함께하는 이벤트를 준비해주셔서 참여하게 됐습니다. 사실 코드트리라는 플랫폼은 전부터 알고 있었지만, 실제로 사용해본 건 이번이 처음이라 제 솔직한 후기를 남겨보려고 합니다! 코드트리 플랫폼 특징문제 구.. 더보기

티스토리툴바