본문 바로가기

Web Development

(78)
[Problem Solving] Zustand로 폼 상태 최적화하기: Context를 버리고 구독 범위를 좁히다 React로 복잡한 폼 페이지를 만들다 보면 점점 많은 상태들이 생겨나게 됩니다.이 글은 프로젝트 초기에 설계했던 상태 관리 방식에서 출발해, 기능 고도화로 인한 문제를 어떻게 해결했는지,그리고 Zustand를 활용한 최적화 과정과 결과를 공유하는 글입니다.초기 설계: useFormDatas로 상태 통합 관리프로젝트 초반에는 useFormDatas라는 커스텀 훅을 통해 모든 폼 상태를 한 곳에서 통합적으로 관리했습니다. 이 방식의 장점은 다음과 같았습니다:상태 흐름을 추적하기 쉬움하나의 파일로 팀원 간 이해가 쉬움유지보수 용이// form과 관련된 모든 데이터를 저장하는 커스텀 훅export const useFormDatas = () => { const [formData, setFormData] = u..
[Algorithm][LeetCode 101] Symmetric Tree 대칭 트리 (Symmetric Tree)LeetCode 문제 중 하나인 Symmetric Tree는 이진 트리가 자기 자신을 기준으로 대칭인지 확인하는 문제입니다.문제 설명주어진 이진 트리의 루트 노드가 있을 때, 이 트리가 대칭 구조인지 확인하세요. 즉, 트리가 자기 자신을 중심으로 좌우가 거울처럼 대칭되어 있어야 합니다.예시 1Input: root = [1,2,2,3,4,4,3]Output: true예시 2Input: root = [1,2,2,null,3,null,3]Output: false문제 조건노드의 수: 1 이상 1000 이하노드의 값: 1 이상 100 이하1. 재귀(DFS)를 이용한 풀이어제 풀었던 "같은 트리인지 확인하는 문제"의 접근을 응용하여, DFS로 공간 복잡도를 최소화하는 방법을 ..
[Algorithm][LeetCode 100] Same Tree 100. Same TreeGiven the roots of two binary trees p and q, write a function to check if they are the same or not.Two binary trees are considered the same if they are structurally identical, and the nodes have the same value.Example 1Input: p = [1,2,3], q = [1,2,3]Output: trueExample 2Input: p = [1,2], q = [1,null,2]Output: falseExample 3Input: p = [1,2,1], q = [1,1,2]Output: falseConstraintsThe ..
[Algorithm][LeetCode 96] Unique Binary Search Trees 고유한 이진 탐색 트리(BST)의 개수 구하기주어진 정수 n에 대해, 1부터 n까지의 값을 가지는 고유한 노드들로 만들 수 있는 서로 다른 구조의 이진 탐색 트리(BST)의 수를 구하는 문제입니다.문제 예시n = 3일 때 가능한 BST는 아래 그림과 같이 총 5가지입니다.Input: n = 3Output: 5접근 방식특정 노드 수 n에 대해 만들 수 있는 BST의 수는 재귀적으로 정의할 수 있습니다.예를 들어 n = 3인 경우:루트가 1인 경우: 나머지 노드(2, 3)는 모두 오른쪽 서브트리에 위치 → numTrees(0) * numTrees(2)루트가 2인 경우: 1은 왼쪽, 3은 오른쪽 → numTrees(1) * numTrees(1)루트가 3인 경우: 나머지 노드(1, 2)는 모두 왼쪽 서브트리에 ..
[자료구조] 트리(Tree) 자료구조 정리 트리(Tree) 자료구조 정리1. 리스트 vs 트리리스트: 선형 자료구조트리: 비선형 자료구조2. 트리 자료구조의 규칙노드는 자식만 가리킬 수 있다. (형제 X, 부모 X)출발점은 하나여야 한다.Root: 트리의 최상단 노드, 부모가 없는 최상위 노드Child: Root로부터 아래로 이동할 때 직접적으로 연결된 노드Parent: 자식 노드에서 Root 방향으로 이동할 때 직접적으로 연결된 노드Siblings: 같은 부모를 가진 노드 그룹Leaf: 자식이 없는 노드Edge: 노드 간의 연결Size: 트리에 포함된 모든 노드의 개수Depth: 루트 노드부터의 거리Height: 깊이 중 최대값Degree: 각 노드의 자식 방향 간선 개수트리의 크기가 N일 때 전체 간선의 개수는 N-1개3. 이진 탐색 트리 (..
[Algorithm][LeetCode 2962] Count Subarrays Where Max Element Appears at Least K Times 최대값이 k번 이상 등장하는 서브어레이 개수문제 설명정수 배열 nums와 양의 정수 k가 주어집니다.조건: 배열 내의 최대값이 적어도 k번 이상 등장하는 모든 서브어레이의 개수를 구하시오.예시 1:Input: nums = [1,3,2,3,3], k = 2Output: 6Explanation: 다음과 같은 서브어레이가 조건을 만족함:[1,3,2,3], [1,3,2,3,3], [3,2,3], [3,2,3,3], [2,3,3], [3,3]예시 2:Input: nums = [1,4,2,1], k = 3Output: 0Explanation: 어떤 서브어레이도 최대값인 4를 3번 이상 포함하지 않음.제약 조건:1 51 61 5풀이 전략처음에는 map을 활용해서 해결하려고 했습니다. 하지만 k 이상이라는 조건은 단일..
[Algorithm][LeetCode 560] Subarray Sum Equals K 문제 풀이 - 누적합과 Hash Map 활용법 🟢 LeetCode 560. Subarray Sum Equals K 문제 풀이 (with 누적합 + 해시맵)최근 Leetcode 2845. Count of Interesting Subarrays 문제를 풀다가 막히는 부분이 있었는데, 유튜브에서 힌트를 찾아보다가 아래 영상을 발견했습니다.How to solve Count of Interesting Subarrays (Leetcode 2845)이 영상에서는 Leetcode 560번과 523번 문제를 먼저 풀어보면 이해가 잘 된다고 추천하더라고요.그래서 먼저 Leetcode 560. Subarray Sum Equals K 문제를 풀어보았습니다.🟢 문제 설명Given an array of integers nums and an integer k,return ..
자바스크립트의 비동기 실행 흐름 정리 자바스크립트는 싱글 스레드 기반으로 동작하기 때문에, 한 번에 하나의 작업만 처리할 수 있습니다.따라서 콜 스택(Call Stack), 이벤트 루프(Event Loop), Web API, 큐(Queue)를 통해 동기/비동기 작업을 처리하게 됩니다.✅ 예제 코드console.log(1);setTimeout(() => { console.log(2)}, 100);console.log(3);1. 동기 작업 진행 console.log(1)이 콜 스택에 올라가 실행됩니다. setTimeout(...) 실행 setTimeout 함수 자체는 콜 스택에서 실행되지만, 내부 콜백 함수 () => console.log(2)는 Web API 영역으로 넘겨집니다. Web API가 100ms..