전체 글
-
로컬 스토리지 캐싱 시스템 구현하기JS & TS 2025. 8. 19. 23:37
목차목적주요 해결 과제핵심 아키텍처주요 기능실제 사용 시나리오핵심 메커니즘성능 이점데이터 흐름 다이어그램전체 코드 보기깃허브 바로가기예제 사이트 바로가기목적브라우저의 localStorage를 활용하여 API 응답 데이터를 효율적으로 캐싱하는 엔터프라이즈급 캐시 관리 시스템을 구현한다.성능 최적화: 네트워크 대기시간 0ms로 단축비용 절감: API 호출 횟수 최대 90% 감소확장성: 멀티 인스턴스 환경에서 안전한 운영자동화: 수동 관리 없는 지능형 캐시 운영주요 해결 과제1. 네트워크 비용 절감반복적인 API 호출 최소화대역폭 사용량 감소서버 부하 분산2. 성능 향상캐시 히트 시 즉시 응답 (0ms)사용자 경험 개선페이지 로딩 속도 향상3. 용량 관리localStorage 5MB 제한 내에서 효율적 운영자..
-
tanstack-query, stale time이 gcTime보다 클 때 생길 수 있는 문제React.js & Next.js 2025. 8. 18. 20:51
React Query: staleTime vs gcTime 제대로 이해하기React Query를 사용하다 보면 staleTime과 gcTime설정에 대해 혼란을 겪는 경우가 많습니다. 특히 이 두 옵션의 관계를 잘못 이해하여 설정하면 예상치 못한 성능 문제가 발생할 수 있습니다. 제가 겪은 사례를 공유하면서 실수하기 쉬운 설정 패턴과 올바른 사용법을 알아보겠습니다.겪은 내용신규 페이지를 오픈했는데, 기존 서비스(academy) 리팩터링 내용과 달리 tanstack-query와 fetch(SSG, ISR)의 조합으로 사용되었습니다. 릴리즈 이후 그라파나를 통해 메모리 및 CPU 사용량을 관측하고 있었는데, 메모리 누수로 인해 heap out of memory 메시지와 함께 죽은 뒤 다시 살아나는 흐름이 지..
-
구글 애널리틱스 보고서 자동화 하기 (Google Apps Script)끄적끄적 2025. 8. 13. 20:49
목차목적흐름레퍼런스작업 순서결과목적발생하는 Google Analytics 4의 이벤트를 정기적으로 관측하고, 지표화한다.흐름Google Anayltics(이하 GA)에서 관측하고 싶은 데이터를 추출한다Claude, Chat GPT등을 활용하여 구글의 Apps Script에 보고서를 생성할 수 있는 스크립트를 만든다트리거를 통해 어떠한 주기로 보고서를 생성할지 정한다레퍼런스https://developers.google.com/apps-script/advanced/analyticsdata?authuser=0&hl=ko작업 순서https://script.google.com/home 접속새 프로젝트 생성서비스 추가스크립트에 들어갈 propertyId 확인접근 승인로그 확인스크립트를 자유롭게 수정트리거 설정트리거..
-
육각형 개발자Book Study 2025. 8. 12. 20:45
1장 - 들어가며실패마무리했다는 믿음은 착각이었다. 실제로 서비스를 출시하지 못했기 때문이다. 서비스를 출시하지 못했으니 사용자도 만나지 못했다. 그때 왜 서비스를 출시하지 못했는지 알 수 없었다. (p.17)개발이란경험이 쌓이면서 개발에 포함되는 영역이 코딩 이상이라는 사실을 알게 되었다. 코딩뿐만 아니라 많은 활동이 개발 범주에 속한다는 것을 깨달은 것이다. (p.20) 이곳에서는 제대로 된 결과물을 만드는 데 실패할 때가 많았고, 결국 이런 잦은 실패는 회사의 지속 가능성을 떨어뜨렸다. (p.21) 회사 업무를 하면서 성장한다는 느낌을 받지 못한 이유 중 하나는 개발과 성장을 동일시했기 때문이다. 프로젝트 일정, 요구 사항, 위험 관리 등 여러 내용을 접하면서 내가 생각한 개발은 전체에서 아주 일부..
-
알고리즘, Dynamic ProgrammingData Structure & Algorithm 2024. 7. 8. 15:30
동적 프로그래밍(Dynamic Programming, DP)은 복잡한 문제를 더 작은 하위 문제로 나누어 해결하는 알고리즘 설계 기법입니다. 이 기법은 하위 문제의 해를 재사용하여 전체 문제의 해를 구하는 데 사용됩니다. 동적 프로그래밍은 주로 최적화 문제를 해결하는 데 사용되며, 두 가지 중요한 속성을 가집니다: 최적 부분 구조(Optimal Substructure)와 중복 부분 문제(Overlapping Subproblems).동적 프로그래밍의 개념최적 부분 구조(Optimal Substructure):큰 문제의 최적 해가 그 부분 문제의 최적 해로부터 유도될 수 있는 속성을 의미합니다.예를 들어, 최단 경로 문제에서 전체 경로의 최적 해는 그 경로를 구성하는 부분 경로들의 최적 해로 구성될 수 있습..
-
알고리즘, graph, DijkstraData Structure & Algorithm 2024. 7. 3. 18:18
다익스트라 알고리즘(Dijkstra's Algorithm)은 그래프에서 한 정점에서 다른 모든 정점으로의 최단 경로를 찾는 데 사용되는 알고리즘입니다. 이 알고리즘은 가중치가 있는 그래프에서 사용되며, 가중치가 음수가 아닌 경우에만 적용할 수 있습니다.다익스트라 알고리즘의 개념시작 정점 선택: 알고리즘은 시작 정점에서 시작합니다.최단 경로 집합: 최단 경로를 확정한 정점들의 집합을 유지합니다.미확정 집합: 아직 최단 경로가 확정되지 않은 정점들의 집합을 유지합니다.거리 배열: 시작 정점에서 각 정점까지의 현재까지 발견된 최단 거리를 저장합니다. 초기에는 시작 정점의 거리를 0으로 설정하고 나머지 정점의 거리를 무한대로 설정합니다.이웃 정점 업데이트: 현재 정점에서 인접한 정점들로의 거리를 계산하고, 더 ..
-
자료구조와 알고리즘, graph, dfs, bfsData Structure & Algorithm 2024. 7. 1. 17:07
그래프(Graph)는 정점(Vertex)과 간선(Edge)으로 이루어진 자료 구조로, 정점 간의 관계를 나타내는 데 사용됩니다. 그래프는 다양한 형태로 존재하며, 여러 가지 문제를 해결하는 데 유용합니다.그래프의 기본 용어정점(Vertex): 그래프의 노드를 의미합니다. 정점은 데이터를 저장할 수 있습니다.간선(Edge): 정점 간의 연결을 나타냅니다. 간선은 방향이 있을 수도(유향 그래프) 없을 수도(무향 그래프) 있습니다.인접 정점(Adjacent Vertex): 간선으로 직접 연결된 정점들입니다.경로(Path): 한 정점에서 시작하여 다른 정점으로 가는 일련의 간선들입니다.가중치(Weight): 간선에 부여된 값으로, 두 정점 간의 비용이나 거리를 나타냅니다. 가중치가 있는 그래프를 가중치 그래프(..
-
자료구조와 알고리즘, Hash TableData Structure & Algorithm 2024. 6. 30. 16:20
해시 테이블(Hash Table)은 키(Key)와 값(Value)의 쌍을 저장하고, 빠르게 데이터를 검색, 삽입, 삭제할 수 있는 자료 구조입니다. 해시 테이블은 해시 함수를 사용하여 키를 해시 값으로 변환하고, 이를 인덱스로 사용해 배열에 값을 저장합니다.해시 테이블의 특징빠른 검색, 삽입, 삭제: 평균적으로 O(1)의 시간 복잡도로 검색, 삽입, 삭제 작업을 수행할 수 있습니다.해시 함수(Hash Function): 키를 입력받아 고정된 크기의 해시 값(주로 정수)을 반환하는 함수입니다. 좋은 해시 함수는 키를 고르게 분포시키고 충돌을 최소화합니다.충돌(Collision): 서로 다른 키가 동일한 해시 값을 갖는 상황을 충돌이라고 합니다. 충돌을 해결하는 방법으로 체이닝(Chaining)과 개방 주소..