ayeongjin 님의 블로그

👩‍🏭 게시물 리스트 무한 스크롤 (throttle 적용) 1. 작업 배경 프로젝트에서 피드 리스트(FeedList)를 무한 스크롤 방식으로 구현하고 있었다.사용자가 스크롤을 내리면 마지막 요소를 감지해 fetchNextPage를 호출하고, 새로운 데이터를 불러오는 구조였다.하지만 개발 과정 중 테스트를 하면서 스크롤을 빠르게 내릴 때 API 요청이 과도하게 중복 호출되는 현상을 발견했다.이는불필요한 서버 트래픽 증가클라이언트 성능 저하UX 부드러움 감소등 여러 문제를 초래할 수 있음을 인지하게 됐다.특히 모바일 환경처럼 빠른 스크롤이 빈번한 상황에서는 이 문제가 더욱 두드러질 수 있었다.이 문제를 해결하기 위해 IntersectionObserver + fetchNextPage 호출을 제어할 수 있는..

https://www.acmicpc.net/problem/17472 ✅ 문제 조건1. 다리의 방향은 가로 또는 세로로만 연결 가능하다2. 방향이 가로인 다리는 다리의 양 끝이 가로방향으로 섬과 인접, 세로도 마찬가지3. 다리의 길이는 2 이상4. 다리 교차 가능5. 모든 섬이 연결하는 다리 길이의 최솟값 구하기 ✅ 접근 방법 1. 섬 위치 체크BFS를 이용해 하나의 섬마다 고유 번호를 부여하고, 바다와 맞닿아 있는 가장자리 좌표를 따로 저장했다.여기까지는 다리만들기1이랑 거의 비슷하게 풀었다. 2. 섬의 가장자리만 모아둔 배열에서 다른 섬까지 한 방향으로 다리 만들어 나가기가장자리 좌표에서 상하좌우 한 방향으로 쭉 탐색하고, 다른 섬에 도달 가능한 경우 다리 후보로 저장한다.이때 다리 길이가 2 이상을..

최소 스패닝 트리 (MST)란?최소 스패닝 트리(MST, Minimum Spanning Tree)는 그래프 이론에서 중요한 개념 중 하나로, 주어진 그래프에서 모든 정점을 연결하는 트리 중에서 가중치의 합이 최소인 트리를 의미한다.간단히 말해, 각 정점들이 연결되어 있으며, 연결된 모든 간선들의 가중치 합이 최소가 되는 트리를 찾는 문제✅ 최소 스패닝 트리의 특징트리 구조:MST는 반드시 트리 형태 (트리 : 사이클이 없는 연결된 그래프)트리의 특성상, N개의 정점이 있을 경우, 간선의 수는 항상 N-1최소 가중치:MST는 모든 간선의 가중치 합이 최소가 되어야 한다. (ex. 가중치가 의미하는 것 : 도로의 비용, 네트워크 연결의 비용 등)그래프 연결:MST는 그래프에 있는 모든 정점들을 연결해야 하므..

https://www.acmicpc.net/problem/13460 ✅ 문제 조건 1. 보드 상하좌우로 욺직여서 구슬 이동2, 빨간구슬만 빼내기3. 각 단계마다 네방향으로 기울이며 두 구슬을 동시에 이동3-1. 파란구슬이 구멍에 빠지면 실패3-2. 빨간구슬이 구멍에 빠지면 성공4. 10회 반복 후, 성공 못하면 -1 ✅ 접근 방법 # 문제 1먼저 상하좌우로 이동하며 그때마다 턴을 반복해야한다는 건 이해했지만, 두 개의 구슬이 같은 위치에 겹치면 어떻게 처리해야할지 생각하는 데 오래걸렸다.그래서 구슬의 위치와 현재 방향을 바탕으로 어떤 구슬이 먼저 움직어야하는지 계산할까 생각했지만 너무 복잡해서 포기했다.위의 방법을 고민하던 중, 어떤 구슬이 먼저 움직어야하는지 계산을 하지 말고 일단 그냥 두 개의 구슬..

https://www.acmicpc.net/problem/1522 문제 조건은1. 모든 a를 한곳에 모아야한다2. 문자열은 원형 구조라 처음과 끝이 이어져있다. 따라서 문제 풀이는1. 최종 완성되어야할 연결된 a의 수 구하기2. 문자열은 원형구조이므로 두배로 이어 붙이기3. 문자열 i부터 i+a 까지 슬라이싱해서 그 안에 있는 b의 수의 최솟값 구하기 # 성공 코드const str = require("fs").readFileSync("/dev/stdin").toString().trim();const aCnt = [...str].filter((c) => c === "a").length;const strDouble = str + str;let result = Number(Infinity);for (let ..

⏳ React에서 컴포넌트 언마운트와 비동기 오류 대응하기React로 비동기 API 요청을 처리하다 보면 간헐적인 에러 페이지 이동이나 불필요한 상태 업데이트 등 예상치 못한 문제가 발생할 수 있다.이 글에서는 실제로 겪었던 이슈를 바탕으로 아래 세 가지를 정리했다.useEffect 내부 비동기 처리 시 발생할 수 있는 문제언마운트된 컴포넌트에서의 상태 업데이트 방지 방법더 나은 데이터 패칭 대안❗ 문제 상황게시글 리스트와 디테일 페이지를 구현한 후, API 요청 실패 시 에러 페이지(/error)로 이동하도록 예외 처리를 했다.하지만 테스트 중 간헐적으로 잘못된 에러 페이지 이동 현상이 발생했다.useEffect(() => { fetchData() .then((res) => { setD..

🌐 CSR, SSR, SSG, ISR의 렌더링 방식과 SEO, Hydration의 관계SEO 최적화를 고민하다가 CSR/SSR뿐만 아니라 SSG, ISR 그리고 SEO, Hydration에 대한 개념을 정리하고 실제 사용 시 어떤 조합이 적절한지 고민해보게 되었다. ✅ Hydration이란?Hydration은 서버에서 생성된 정적 HTML을 클라이언트에서 React가 연결하여 실제로 동작하게 만드는 과정이다. SSR, SSG, ISR 모두 hydration이 필요하다HTML만으로는 상호작용이 불가능하며, React의 이벤트 바인딩이 완료되어야 비로소 인터랙션이 가능해진다Hydration 동안에는 버튼 클릭, 입력 등이 잠시 비활성화될 수 있어 사용자 경험에 영향을 줄 수 있다 예를들어,서버가 만들어준 ..

🤔 useState는 const인데 왜 값이 변할까?React를 사용할 때 가장 기본적으로 만나게 되는 훅이 useState이다.아래와 같은 코드는 익숙하게 보이지만, 자바스크립트을 더 자세히 공부하면서 의문이 생겼다. const [count, setCount] = useState(0); 분명히 const는 상수인데, 어떻게 count의 값이 계속 바뀔 수 있는 걸까?이 글에서는 이 궁금증을 React 상태 관리의 흐름과 JavaScript의 const 개념을 중심으로 풀어봤다. ✅ let, const, var의 기본적인 차이우선 자바스크립트에서 let, const, var의 차이를 간단히 정리해보면var함수 스코프(function-scoped)이며, 호이스팅되고 중복 선언이 가능하다. ..

https://www.acmicpc.net/problem/2240 이문제를 풀면서 가장 어려웠던 점은 dp 테이블을 어떻게 설계해야하는지에 대한 고민이었다.처음에는 dp 테이블에 저장할 값을1. T 시간만큼 순회하는 동안 현재 시간까지의 이동 수2. 현재 위치3. 그 이동 수와 현재 위치에 따라 얻을 수 있는 최대 자두의 수이렇게 저장하려고 생각했다.하지만 이동 수에 따라서 현재 나무 위치와 자두 최댓값을 어떻게 점화식을 세울지 너무 헷갈렸다.그래서 처음부터 다시 생각했다. 먼저1. 처음 위치는 똑같이 1번 나무에서 시작2. 만약에 3번 이동했다면, 1 -> 2 -> 1 -> 2 로 2번 나무2-2. 따라서 현재 나무 위치를 dp 테이블에 저장할 필요는 없음 (이동 횟수에 따라서 알 수 있으므로)3. 그..

https://www.acmicpc.net/problem/17822 매 T 마다 반복되는 동작은1. 원판 회전2-1. 인접한 값 중 서로 같은 값이 있으면 그 값들 삭제2-2. 인접하면서 같은 수가 없는 경우에는 원판 수의 합보다 작은 수는 += 1, 큰 수는 -= 1 그래서 세가지 함수를 만들었다.  1. 원판 회전def turn(x, d, k): # x의 배수인 원판을 d(0: 시계, 1: 반시계) 방향으로 k칸 회전 for i in range(x, N+1, x): if d == 0: # 시계 방향 circles[i-1] = circles[i-1][-k:] + circles[i-1][:-k] else: # 반시계 방향 circ..