Redux vs Zustand 상태 관리 비교: 쇼핑몰 & 대시보드 실무 사례
·
Frontend Development
React로 쇼핑몰 웹 애플리케이션이나 관리자 대시보드를 개발할 때 전역 상태 관리 도구를 선택하는 일은 매우 중요합니다. 대표적인 상태 관리 라이브러리인 Redux와 Zustand는 서로 다른 철학과 장단점을 지니고 있습니다. 본 글에서는 쇼핑몰과 대시보드 같은 현실적인 UI 시나리오를 배경으로 Redux와 Zustand를 비교합니다. 특히 다음과 같은 핵심 항목들을 중심으로 두 라이브러리의 접근 방식을 살펴보고자 합니다.인증 토큰 관리: Redux에서는 어떻게 관리하며, Zustand에서는 어떤 방식으로 처리할 수 있는지상태 디버깅 및 추적: Redux DevTools의 강점과, Zustand에서의 대안 및 구현 방법미들웨어 확장성: Redux의 미들웨어 (thunk, saga 등) 사용 사례와 Zu..
브라우저 메모리와 상태 관리: 헷갈리는 개념들을 완전 정복하기
·
카테고리 없음
들어가며프론트엔드 개발을 시작하면서 가장 혼란스러웠던 것 중 하나가 바로 상태 관리였습니다. "useState는 새로고침하면 날아간다""localStorage에 저장하면 남아있다" "TanStack Query는 서버 상태를 관리한다"이런 말들을 들을 때마다 "도대체 데이터가 어디에 저장되는 거야?" 라는 궁금증이 생겼습니다. 브라우저 메모리? 그게 내 컴퓨터의 RAM인가? 서버 상태 관리? 클라이언트에서 서버를 관리한다고?오늘은 이러한 헷갈리는 개념들을 시각적 자료와 함께 체계적으로 정리해보겠습니다. 각 상태 관리 방식이 실제로 어디에 저장되고, 언제까지 유지되며, 어떻게 동작하는지 명확하게 이해할 수 있도록 도와드리겠습니다.브라우저 메모리 구조의 전체적인 이해먼저 브라우저가 데이터를 저장하는 공간들을..
[알고리즘 / 그래프] 다익스트라(Dijkstra) vs 플로이드-워셜(Floyd-Warshal)
·
Algorithm/알고리즘
머리글2021 KAKAO BLIND RECRUITMENT의 합승 택시 요금을 풀면서 무지와 어피치가 합승을 할 수 있다는 점에 주목하여 플로이드-워셜 알고리즘을 사용했지만, 효율성 테스트에서 낮은 점수를 받았다. 이를 계기로 다익스트라 알고리즘과 플로이드-워셜의 차이를 다시 정리하고, 각 알고리즘의 적절한 사용 전략을 세울 필요성을 느꼈다.다익스트라(Dijkstra) 알고리즘은 하나의 정점에서 출발하여 다른 모든 정점으로의 최단 경로를 구하는 알고리즘이고, 플로이드-워셜(Floyd-Warshal) 알고리즘은 모든 정점에서 다른 모든 정점으로의 최단 경로를 구하는 알고리즘이다.Dijstra vs FloydWarshall출처 : https://loosie.tistory.com/146다익스트라(Dijkstra..
[프로그래머스 / Python] 안전지대
·
Algorithm/프로그래머스
문제 출처https://school.programmers.co.kr/learn/courses/30/lessons/120866문제다음 그림과 같이 지뢰가 있는 지역과 지뢰에 인접한 위, 아래, 좌, 우 대각선 칸을 모두 위험지역으로 분류합니다.지뢰는 2차원 배열 board에 1로 표시되어 있고 board에는 지뢰가 매설 된 지역 1과, 지뢰가 없는 지역 0만 존재합니다.지뢰가 매설된 지역의 지도 board가 매개변수로 주어질 때, 안전한 지역의 칸 수를 return하도록 solution 함수를 완성해주세요.내 답안def solution(board): answer = 0 bomb = [] n = len(board) #폭탄 찾기 for i in range(n): for ..
[프로그래머스 / Python] OX퀴즈
·
Algorithm/프로그래머스
문제 출처https://school.programmers.co.kr/learn/courses/30/lessons/120907문제덧셈, 뺄셈 수식들이 'X [연산자] Y = Z' 형태로 들어있는 문자열 배열 quiz가 매개변수로 주어집니다. 수식이 옳다면 "O"를 틀리다면 "X"를 순서대로 담은 배열을 return하도록 solution 함수를 완성해주세요.내 답안def solution(quiz): return ["O" if eval(i.split("=")[0]) == int(i.split("=")[1]) else "X" for i in quiz]남의 풀이def solution(quiz): answer = [] for q in quiz: p, a = q.split("=") ..
[프로그래머스 / Python] 등수 매기기
·
Algorithm/프로그래머스
문제 출처https://school.programmers.co.kr/learn/courses/30/lessons/120882문제영어 점수와 수학 점수의 평균 점수를 기준으로 학생들의 등수를 매기려고 합니다. 영어 점수와 수학 점수를 담은 2차원 정수 배열 score가 주어질 때, 영어 점수와 수학 점수의 평균을 기준으로 매긴 등수를 담은 배열을 return하도록 solution 함수를 완성해주세요.내 답안def solution(score): # 각 학생의 영어와 수학 점수의 평균 계산 avg = [sum(i)/2 for i in score] # 평균을 기준으로 점수가 높은 순서대로 정렬 sorted_avg = sorted(avg, reverse=True) answer = [] ..
[프로그래머스 / Python] 영어가 싫어요
·
Algorithm/프로그래머스
문제 출처https://school.programmers.co.kr/learn/courses/30/lessons/120894문제영어가 싫은 머쓱이는 영어로 표기되어있는 숫자를 수로 바꾸려고 합니다. 문자열 numbers가 매개변수로 주어질 때, numbers를 정수로 바꿔 return 하도록 solution 함수를 완성해 주세요.내 답안def solution(numbers): answer = 0 c = dict(zip(["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"], [0, 1, 2, 3, 4, 5, 6, 7, 8, 9])) for i in c.keys(): numbers = nu..
[프로그래머스 / Python] 가까운 수
·
Algorithm/프로그래머스
문제 출처https://school.programmers.co.kr/learn/courses/30/lessons/120890문제정수 배열 array와 정수 n이 매개변수로 주어질 때, array에 들어있는 정수 중 n과 가장 가까운 수를 return 하도록 solution 함수를 완성해주세요.포인트이 문제의 핵심은 두 가지입니다. 첫 번째는 주어진 n과의 차이(절대값)가 가장 작은 원소를 찾는 것이고, 두 번째는 그러한 원소가 여러 개일 경우 더 작은 값을 반환하는 것입니다.내 답안def solution(array, n): # 주어진 배열에서 n과 가장 가까운 수 찾기 # 거리가 같은 경우 더 작은 수 반환 return min(array, key=lambda x: (abs(x - n), ..
[프로그래머스 / Python] 소인수분해
·
Algorithm/프로그래머스
문제 출처https://school.programmers.co.kr/learn/courses/30/lessons/120852?language=python3문제소인수분해란 어떤 수를 소수들의 곱으로 표현하는 것입니다. 예를 들어 12를 소인수 분해하면 2 * 2 * 3 으로 나타낼 수 있습니다. 따라서 12의 소인수는 2와 3입니다. 자연수 n이 매개변수로 주어질 때 n의 소인수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요.포인트이 문제는 수학적 이해와 알고리즘 설계 능력을 동시에 요구합니다. 주어진 수를 가능한 작은 소수부터 차례로 나누어 가며 소인수를 추출하는 과정을 통해, 반복문과 조건문 사용법을 숙달할 수 있습니다.내 답안def solution(n): ans..
[프로그래머스 / Python] 합성수 찾기
·
Algorithm/프로그래머스
문제 출처https://school.programmers.co.kr/learn/courses/30/lessons/120846문제약수의 개수가 세 개 이상인 수를 합성수라고 합니다. 자연수 n이 매개변수로 주어질 때 n이하의 합성수의 개수를 return하도록 solution 함수를 완성해주세요.제한사항1 ≤ n ≤ 100생각의 과정합성수? 오랜만에 듣는 단어라, 처음에는 합성수를 어떻게 구할 수 있을지 고민하는데 시간이 좀 걸렸습니다. 이런 수학적 개념을 프로그래밍에 적용하는 건 항상 새로운 도전 같네요. 합성수를 찾는 방법을 생각하다 보니, 약수의 개수를 세는 방식이 필요하다는 것을 깨달았습니다. 모든 수에 대해 약수를 찾아 그 개수가 3개 이상인지 확인해야 하죠.포인트약수를 찾아 그 개수가 3개 이상인..