본문 바로가기

분류 전체보기

(257)
Zutand 라이브러리 파해치기 최근 리덕스에서 Zustand으로 관심이 옮겨가고있다. 우선 리덕스라는 라이브러리는 잘 알 것이다. 리액트를 사용하는 개발자라면 누구나 한 번씩은 리덕스를 경험해 봤을 것이다. 리덕스를 사용하는데는 여러 이유가 있겠지만 아마 많은 개발자들은 "상태관리"를 더 원활히 수행하기 위해 사용할 것이다. 그러나 리덕스를 사용해보면 알겠지만 어쩌면 배보다 배꼽이 더 크다고 느낄지도 모른다. 고작 전역상태 "하나"를 만드는데 액션,리듀서,스토어를 생성해야하고 추후에 추가될 경우에 대비해 이를 파일로 나누어 정리한다. 등등의 파일을 말이다. 그러다보면 자연스레 리덕스의 역할을 하면서 완전히 쉬운 라이브러리가 떠오르기 마련이다. 그것이 바로 zustand이다. 이 zustand는 출시된지 꽤 된 라이브러리이지만, 회사에..
번역)새 아키텍쳐를 소개합니다 - FSD 소개 프론트엔드 개발자는 종종 애플리케이션 아키텍쳐와 관련된 문제에 직면합니다. 쉽게 확장할 수 있고 애플리케이션 모듈 간의 느슨한 결합과 높은 응집성을 제공할 수 있는 아키텍쳐를 사용해야 합니다. 이 기사에서는 Feature-Sliced Design 아키텍쳐에 대해 설명합니다. 내 생각에는 이 방법론이 사용 가능한 옵션 중 최고입니다. 또한 FSD의 개념과 이 아키텍쳐 방법론이 해결하는 문제를 살펴봅시다. 먼저 레이어(layer), 슬라이스(slice), 세그먼트(sgment)라는 세 가지 개념을 구별해 보겠습니다. 레이어 레이어는 최상위 디렉터리이자 애플리케이션 분해의 첫 번째 수준입니다. 레이어 수는 최대 7개로 제한되어 있으며 표준화되어 있지만 일부는 선택 사항입니다. (준희 - 실제로 FSD 공..
리액트 19가 또 나오네 2024년 연말에 리액트 19가 나올 예정이다. 블로그 useMemo, useCallback, memo는 리액트에서 불필요한 리렌더링 최적화를 진행하는데 없어서는 안될 훅이다. 그런데 이번 19버전에서는 이 훅들이 사라질 예정이라고 한다. (정확히는 deprecated) 이제 리액트에서 이부분을 알아서 최적화해주는 것으로 바뀐다고 한다. 때문에 리액트 사용자들은 해당 훅들을 사용하여 최적화하는 시간에 다른 생산적인(비즈니스 로직 등)에 집중할 수있다. 두번째로 forwardRef가 없어진다고 한다. const ChildComponent = React.forwardRef( ({ data,ref }: dataTypes, ref) => { return ( // ... ); } ); 기존 forwardRef로 ..
CS) 웹 브라우저에 URL을 입력하면.(GSLB, CDN) 해당 내용은 이미 수많은 블로그와 유튜브에 많이 나와있는 내용이다. 이미 나 또한 이 내용을 알고 있었지만, 최근 같은 팀원분께서 위 내용을 질문했고 나는 어버버거리며 질문에 대한 답을 말하지 못하였다. 즉 머릿속으로는 알고 있지만 정리되지는 않아 입으로 말할 수 없는 것이다. 이는 결코 "알고있다"라고 말할 수가 없다. 때문에 다시 한 번 내용을 복습하려 한다. IP주소 우선 국민 포털사이트 네이버로 접속하는 상황을 가정한다.(사용자의 OS는 Window이다) 브라우저는 네이버의 웹서버에 접속하기 위해 네이버의 IP주소를 알아야한다. 그렇기에 1차적으로 DNS서버에 네이버의 IP주소를 얻어온다. 브라우저는 라우터를 통해 DNS서버에 접속하며 네이버의 IP주소를 받아온다. 하지만 반드시 ISP의 DNS서..
BOJ) 안녕 https://www.acmicpc.net/problem/1535 1535번: 안녕 첫째 줄에 사람의 수 N(≤ 20)이 들어온다. 둘째 줄에는 각각의 사람에게 인사를 할 때, 잃는 체력이 1번 사람부터 순서대로 들어오고, 셋째 줄에는 각각의 사람에게 인사를 할 때, 얻는 기쁨이 1번 www.acmicpc.net 이 문제 또한 어제 풀었던 냅색 알고리즘 문제이다. import sys input = sys.stdin.readline n = int(input()) arr = [0]+list(map(int, input().split())) happy = [0] + list(map(int, input().split())) dp = [[0 for _ in range(101)] for _ in range(n+1)]..
BOJ) 평범한 배낭 https://www.acmicpc.net/problem/12865 12865번: 평범한 배낭 첫 줄에 물품의 수 N(1 ≤ N ≤ 100)과 준서가 버틸 수 있는 무게 K(1 ≤ K ≤ 100,000)가 주어진다. 두 번째 줄부터 N개의 줄에 거쳐 각 물건의 무게 W(1 ≤ W ≤ 100,000)와 해당 물건의 가치 V(0 ≤ V ≤ 1,000) www.acmicpc.net 오랜만에 알고리즘 문제를 풀다 처음 마주친 "냅색 알고리즘"을 이용해 풀어야하는 문제이다. 그리디 알고리즘을 생각했으나 조금만 생각해보면 그리디는 최적의 해를 구할 수 없게된다. 우선 냅색 알고리즘은 물건을 쪼개어 부분적으로 담을 수 있는 경우를 고려하거나 또는 각 물건을 선택하거나 선택하지 않았을 때를 고려하는 경우 사용할 수 있..
파이선) 어두운 건 무서워 - BOJ (2D Array prefix sum, and 블로그의 방향성) https://www.acmicpc.net/problem/16507 r, c, q = map(int, input().split()) arr = [] for _ in range(r): arr.append(list(map(int, input().split()))) dp = [[0 for _ in range(c+1)] for _ in range(r+1)] # print(dp) for i in range(1, r+1): for j in range(1, c+1): dp[i][j] = -dp[i-1][j-1] + dp[i][j-1] + dp[i-1][j] + arr[i-1][j-1] for _ in range(q): r1, c1, r2, c2 = map(int, input().split()) num = dp[r2]..
백준) 이건 꼭 풀어야 해! - BOJ https://www.acmicpc.net/problem/17390 17390번: 이건 꼭 풀어야 해! [2, 5, 1, 2, 3]을 비내림차순으로 정렬하면 [1, 2, 2, 3, 5]이다. www.acmicpc.net import sys input = sys.stdin.readline n, q = map(int, input().split()) arr = [0]+list(map(int, input().split())) arr.sort() dp = [] for i in arr: if not dp: dp.append(i) else: dp.append(dp[-1] + i) # print(dp) answer = [] for _ in range(q): l, r = map(int, input().split()) r..