사이드 프로젝트인 독서 레벨 테스트에 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이라고 한다. 🟢 배열 생성 방법 배열 리터럴 ..
사전 지식 관계형 데이터베이스: 테이블과 열로 구성된 데이터 모델을 사용하여 데이터를 저장하고 관리합니다. ORM(Object Relational Mapping): OOP에서는 데이터를 객체로 표현하고 객체들 간의 관계를 맺고 메서드를 통해 상호작용한다. ORM은 객체와 관계형 데이터베이스 간의 불일치를 해결하기 위해 개발되었습니다. 관계형 데이터베이스를 조작하기 위한 인터페이스를 제공하여 쿼리를 직접 작성하지 않고도 데이터베이스 작업을 수행할 수 있습니다. Prisma란? Prisma는 기존 ORM과는 근본적으로 다른 새로운 종류 ORM이며 기존 ORM들과 관련된 문제들로 고통받지 않습니다.결론은 ORM이다. 설치 npm install prisma --save-dev npm install @prisma..
Next.js를 공부하기에 앞서 Next.js가 무엇이고 사람들은 왜 Next.js를 사용하며, 어떠한 이점이 있는지 알아보자. What is Next.js? Next.js is a framework for building web applications. With Next.js, you can build user interfaces using React components. Then, Next.js provides additional structure, features, and optimizations for your application. Under the hood, Next.js also abstracts and automatically configures tooling for you, like bu..
