사이드 프로젝트인 독서 레벨 테스트에 Zustand를 도입하여 사용해 왔다. 단순히 '사용'하기 위해 공부를 했지만 이번 기회에 Deep하게 다양한 개념들을 정리하고 가려한다. Zustand A small, fast, and scalable bearbones state management solution. Zustand has a comfy API based on hooks. It isn't boilerplatey or opinionated, but has enough convention to be explicit and flux-like. - docs 공식 문서를 살펴보면 작고 빠르고 확장성이 뛰어난 상태 관리 솔루션으로 hook 기반으로 익숙하고 편안한 API를 제공한다. boilerplatey(무의..
항상 변화하는 웹 개발 세계에서 웹 애플리케이션을 만들고 원활한 사용자 경험을 구축하려면 보기 좋은 외적 디자인에 그치지 않고 전체적으로 효율적이고 일관적인 애플리케이션 디자인이 필요하다. 디자인 시스템을 갖추면 다양한 프로젝트에서 사용할 수 있는 일관성 있고 재사용 가능한 UI 컴포넌트를 쉽게 만들 수 있다. 디자인 시스템은 재사용 가능한 UI 컴포넌트와 디자인 토큰의 집합이다. 이러한 토큰은 버튼, 색상 및 글꼴과 같은 것을 포함하는 컴포넌트와 같다. 모든 프로덕트에 일관된 UX를 제공하여 매력적인 UX를 만드는 것이 목표다. 🥲 기존의 버튼 컴포넌트 1번 컴포넌트 interface ButtonProps { label?: string; onClick?: (e: React.MouseEvent) => v..
✅ 들어가기 전에 1. React Hook Form 라이브러리란? Performant, flexible and extensible forms with easy-to-use validation. (docs) 성능이 좋고, 유연하고 확장 가능하며 입력 값이 유효한지에 대한 검증을 쉽게 할 수 있는 폼을 만들 수 있도록 도와주는 라이브러리입니다. 2. Zod란? Zod is a TypeScript-first schema declaration and validation library. (docs) Zod는 스키마 선언 및 유효성 검사(검증) 라이브러리입니다. 가능한 개발자 친화적으로 설계되었으며 중복된 타입 선언을 제거하는 것이 목표라고 합니다. Zod의 사용법은 공식 문서에 자세히 나와있습니다. 스키마란? 데..
✅ 다익스트라 알고리즘(Dijkstra's Algorithm)이란? 그래프 내의 한 출발점에서 모든 다른 노드까지의 최단 경로를 찾는 데 사용되는 알고리즘으로 가중치가 있는 그래프에서 각 노드 사이의 최단 경로를 찾을 때 효과적으로 사용된다. 사용 사례 도로 네트워크 경로 탐색: 다익스트라 알고리즘은 GPS 시스템과 네비게이션 앱에서 사용된다. 운전자가 출발지와 목적지를 입력하면, 다익스트라 알고리즘을 활용하여 최단 경로와 예상 도착 시간을 계산하고 제공한다. 인터넷 라우팅: 다익스트라 알고리즘은 데이터 패킷을 최적 경로로 전달하는 라우팅 프로토콜에서 사용된다. 네트워크 노드 간의 연결을 나타내는 그래프에서 최단 경로를 계산하여 데이터의 효율적인 전달을 도와준다. 공항 및 항구 관리: 항공국 및 항구 관..
✅ TDD(Test Driven Development): 테스트 주도 개발 실제 코드를 개발하기 전에 단위 테스트 케이스를 먼저 작성하는 소프트웨어 개발 방법론이다. TDD의 특징 테스트 우선 접근 (Test-First Approach) TDD는 코드를 작성하기 전에 먼저 해당 코드가 통과해야 할 테스트 케이스를 작성하는 방법을 강조한다. 즉, 개발자는 코드를 작성하기 전에 해당 코드가 어떻게 동작해야 하는지를 미리 정의한 테스트를 작성한다. 순환적 개발 (Iterative Development) TDD는 작은 단위의 기능을 개발하고 테스트한 다음, 기능을 확장하거나 변경할 때마다 해당 테스트 케이스를 업데이트한다. 이를 통해 작은 단계로 코드를 개발하면서 안정성을 유지할 수 있다. 자동화된 테스트 스위..
✅ 배열이란? 여러 개의 값을 순차적으로 나열한 자료구조다. 자바스크립트에 배열이라는 타입은 존재하지 않는다. 배열은 객체 타입이다. const numbers = [1, 2, 3, 4] const fruits = ['apple', 'Banana', 'Cherry'] console.log(numbers[1]) console.log(fruits) zero based에 해당하는 0번째, 1번째 와 같은 것들을 index라고 부른다. 배열 데이터 내부의 데이터의 위치를 가리키는 숫자이다. 위와 같이 numbers[1] 대괄호를 열어서 index를 넣어서 조회하는 것을 indexing이라고 한다. 배열 안의 값을 element 즉 요소라고 하기도 하고 배열의 item이라고 한다. 🟢 배열 생성 방법 배열 리터럴 ..
책 정보를 수정하는 API를 작성하던 중 문제를 마주했다. 책 정보를 update하기 위해서 해당하는 책 정보와 그 책과 관계를 맺는 Quotes 정보를 함께 업데이트할 필요가 있었다. 단일 책 정보만을 업데이트 하는 건 간단하지만 매핑 되어 있는 인용문을 함께 업데이트 하려다 보니 난관에 부딪혔다. 천천히 문제를 해결해보자. 1. 문제 이해 const updatedBook = await prisma.book.update({ where: { id: id, }, data: { genreId: genreId, title: title, description: description, publisher: publisher, author: authors, thumbnailUrl: thumbnailUrl, quote..
풀스택 프로젝트 개발을 위해 Prisma ORM과 Database로 MongoDB를 채택하여 사용했다. Book 모델에서 랜덤한 데이터를 받아오기 위해 조사를 하였다. 21년 2월 prisma 깃헙 질문으로 올라온 글을 살펴보았다. (링크) 해당 글에선 다양한 답변이 있었기에 몇 개 살펴보자. const productsCount = await prisma.product.count(); const skip = Math.floor(Math.random() * productsCount); return await prisma.product.findMany({ take: 5, skip: skip, orderBy: { sellingCount: 'desc', }, }); skip을 이용해서 데이터들을 랜덤으로 스킵하..
