ayeongjin 님의 블로그

🫠 [Redux Toolkit] Next.js + TypeScript에서 그림판 만들기 - #4 (그림판 저장 stageRef null 오류 & 전역 상태관리 리팩토링)  2025.02.21 - [개발일지/Next.js] - [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #3 (그림 저장하기) [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #3 (그림 저장하기)🎨 Next.js + TypeScript에서 그림판 만들기 - #3 (그림 저장하기)2025.02.20 - [개발일지/Next.js] - [Konva.js] Next.js + TypeScript에서 그림판 만들기 - #2 (Undo/Redo & 지우개 기능 추가) [Konva.js..

https://school.programmers.co.kr/learn/courses/30/lessons/42584 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 비슷한 문제로 백준에서 17298번 오큰수 풀었던 기억이 났다.그때도 스택으로 풀었던 거 같아서 이번에도 스택으로 풀어보려고 했는데 꽤 시간이 걸렸다.오큰수는 배열을 거꾸로 순회하면서 스택에 int 하나만 저장하고 오큰수가 될 수 없는 값을 pop 하면서 풀이했는데,이 문제는 주식가격 유지 시간을 구해야했기 때문에 순서대로 순회하면서 가격과 idx를 튜플로 스택에 append했다. # 스택def solution(prices): n = le..

https://www.acmicpc.net/problem/17143 매 초마다 기억해야할 것1. 위치별 상어가 몇마리 들어있는지 (가장 큰 상어가 잡아먹기위해)2. 각 상어의 속도, 방향, 크기 그래서 낚시터 배열 mp 와 상어의 속도, 방향, 크기를 저장할 sharks 딕셔너리를 만들었다. 상어 정보 저장mp = [[[] for _ in range(C)] for _ in range(R)]sharks = {}direction = [(-1, 0), (1, 0), (0, 1), (0, -1)] # 위, 아래, 오른쪽, 왼쪽for i in range(M): r, c, s, d, z = map(int, input().split()) # 위치, 속력, 이동방향, 크기 heappush(mp[r-1][..

https://www.acmicpc.net/problem/2212 센서 설치 구간을 중점으로 반지름이 일정하게 센서가 수신된다는 뜻인줄알고 예제를 이해하기 어려웠다.그래서 센서 설치 구간부터 양옆으로 거리가 일정하지 않아도 된다면 예제가 맞길래 그렇게 이해하고 풀었다. [예제 1]621 6 9 3 6 7 여기서 센서의 좌표를 정렬하면1 3 6 6 7 9이렇게 되고 이때 최솟값은 (1 3) (6 6 7 9) 이렇게 묶으면 거리의 합이 5로 최솟값이 된다.이때 K개의 묶음의 수를 만들 수 있는 방법은 센서 배열에서 K-1번 자르면(예제에서는 정렬 후 3과 6 사이)K개의 묶음이 나온다고 생각했다. 어디를 자를지 생각하다가 조합으로 모든 경우의 수를 구할까 했는데, 시간 초과가 날 것 같았다.그래서 다시 생각..

🧐 이분 그래프(Bipartite Graph) 1. 이분 그래프란?이분 그래프는 정점 집합을 두 그룹으로 나눌 수 있는 그래프다. ✅ 이분그래프 조건정점을 두 집합 U, V로 나누었을 때 모든 간선은 반드시 U의 정점과 V의 정점 사이에만 존재해야 한다.(즉, 같은 집합에 있는 정점끼리는 연결되면 안 됨) 그래프를 색칠하는 관점에서 보면 두 가지 색만으로 인접한 정점끼리 서로 다른 색을 칠할 수 있다면 이분 그래프  ✅ 완전 이분 그래프  ✅ 부분 연결 이분그래프 ✅ 불완전 이분그래프  ✅ 예시친구 관계 그래프에서 "남자 ↔ 여자"만 연결되어 있는 구조체스판처럼 흑백이 번갈아 연결되어 있는 구조2. 이분 그래프 판별 방법 (BFS / DFS)이분 그래프인지 판별하는 대표적인 방법은 그래프 탐색 (BFS..

https://www.acmicpc.net/problem/19238 처음에는 모든 출발지와 도착치의 좌표가 겹치는 경우가 없다고 생각해서 출발지와 목적지를 전부 mp에 대입해버렸다.그리고 택시의 처음 위치부터 시작해서 너비우선탐색으로 가장 가까운 출발지점을 찾고, 해당 번호의 도착지를 찾은 후, 연료와 택시 위치를 갱신해서 풀었다.그렇게 해서 1퍼센트에서 틀렸습니다 떴다. # 실패 코드 1'''현재 위치에서 가장 가까운 손님에게 가기 (거리가 같을 경우 행번호 -> 열번호 순서로 탐색)현재 택시와 같은 위치라면 거리 = 0한칸 이동마다 연료 1 소모목적지 도착시 승객 이동 중 소모한 연료의 두배 충전이동중 연료 바닥나면 영업 종료 (도착과 동시에 연료 바닥날시에는 이동 성공)'''from collecti..

https://www.acmicpc.net/problem/15685  드래곤 커브를 어떻게 구현할지 많이 고민했다.그래서1. 현재까지의 드래곤 커브 좌표 리스트를 좌표이동하여 붙이는 방법2. 현재까지의 드래곤 커브 방향을 회전하여 이어붙이는 방법두가지로 할 수 있지 않을까 생각했다. 1번으로 하면 좌표 연산량이 많아지고 매번 좌표 튜플을 저장해야해서 메모리 사용량이 증가할 것 같았다.그래서 2번으로 구현 시작했다. 먼저 네 좌표로 정사각형이 되는지 확인하는 함수를 만들었다. mp = [[False] * 101 for _ in range(101)]# 정사각형 체크def check(i, j): if mp[i][j] and mp[i+1][j] and mp[i][j+1] and mp[i+1][j+1]: ..

📄 [TanStack Query/Intersection Observer] 게시물 리스트 무한 스크롤 구현하기 1. TanStack Query란?TanStack Query(구 React Query)는 데이터 패칭, 캐싱, 동기화를 자동으로 관리해주는 라이브러리다.기본적으로 서버 상태 관리(Server State Management)에 특화된 기능을 제공한다. ✅ TanStack Query 주요 기능데이터 캐싱: API 요청 결과를 자동으로 캐싱하여 동일한 요청 반복 방지자동 리페칭: 데이터가 변경되면 필요한 부분만 새로 가져오기배경 데이터 동기화: 사용자가 보지 않는 동안에도 최신 상태 유지무한 스크롤 및 페이지네이션 지원이번 구현에서는 useInfiniteQuery를 활용하여 무한 스크롤 페이지네이션을..

🧑‍🎨 [SkeletonUI] 데이터 로딩중 스켈레톤 UI 적용하여 사용자 경험 향상시키기이렇게 생긴 그림일기 디테일 페이지에 스켈레톤 UI를 적용하려고 한다.스켈레톤 UI를 적용하면 단순히 스피너가 돌아가는 것보다 사용자가 어디에 어떤 내용이 뜰지 예측할 수 있도록 도와주며, 로딩 중 지루함을 덜어줄 수 있다.직접 구현할 수도 있지만 react-loading-skeleton 라이브러리를 사용하면 더 간펀하게 스켈레톤 UI를 만들 수 있다. 1. react-loading-skeleton 설치하기npm install react-loading-skeleton설치 후 Skeleton 컴포넌트를 가져와서 사용할 수 있다. 2. Skeleton 기본 사용법두가지 방법으로 크기를 지정할 수도 있고 부모 너비의 ..

https://www.acmicpc.net/problem/1074  문제 풀이 방식 생각하기까지 꽤 오래걸렸다.처음 시작점을 (0, 0)으로 두고 0, 1, 2, 3 구역중에 위치를 찾아가면서 그 구역에 속하는 숫자들을 더하면서 새로운 시작점을 찾는 방식으로 풀어야겠다고 생각했다. 1. (0, 0) 부터 시작, 한변의 길이(n)이 1이 될 때 까지 반절로 자르면서 (r, c) 찾아가기2. (r, c)가 0 구역에 속하면 지나친 숫자 없음 -> 한 변의 길이만 자르기3. (r, c)가 1 구역에 속하면 0 구역의 숫자들 지나침 -> 0 구역에 속하는 칸들 다 지나치기 (result += (half * half))4. (r, c)가 2 구역에 속하면 0, 1, 구역의 숫자들 지나침 -> 0, 1 구역에 속하..