처음 React를 배울때 만들어봤던 To Do 앱을 다시 한번 만들어보고 싶은 마음이 생겼습니다. 본 글에서는 React로 만든 To Do 앱에 대한 내용을 설명합니다. 기술 스택 정의이전에는 CRA(Create React App)을 사용해서 프로젝트를 생성했으나, 이번에는 TypeScript와 Vite 기반의 프로젝트를 생성하여 진행했습니다. 언어: TypeScript번들러: Vite트랜스파일러: SWC기타 사용 라이브러리tailwindcsszustandreact-hook-formyupclassnamesdayjsprettierhusky vite 프로젝트 생성하는 방법에 대해 궁금하신 분은 아래 글을 참고해주세요 Bun 설치 및 React 프로젝트 생성하기Bun은 JavaScript 및 TypeScrip..

React 프로젝트에서 Path Aliasing을 설정하면, 복잡하고 긴 상대 경로 대신 짧고 명확한 경로로 모듈을 import할 수 있습니다. 본 글에서는 Path Aliasing을 설정하는 방법에 대해 설명합니다. Path Aliasing이란?Path Aliasing은 프로젝트 내에서 특정 경로를 별칭(alias)으로 정의하여 import 할 수 있도록 하는 기능입니다. 예를 들어, 아래 코드와 같이 길고 복잡한 경로 대신에import MyComponent from '../../../components/MyComponent';  다음과 같이 짧고 명확하게 코드를 작성할 수 있습니다.import MyComponent from '@components/MyComponent'; Vite에서 Path Alia..

Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로, 개발을 빠르고 쉽게 만들 수 있습니다. 정말 빠르게 개발할 수 있다는 점에서 개인적으로 tailwindcss를 선호하는 편입니다. 본 글에서는 Vite 기반의 React 프로젝트에서 Tailwind CSS를 적용하는 방법에 대해 설명합니다. Vite 프로젝트 생성 및 기본 설정먼저 Vite기반의 React 프로젝트를 생성해야하는데, 아래 글을 참고하시면 좋습니다. Bun 설치 및 React 프로젝트 생성하기Bun은 JavaScript 및 TypeScript 프로젝트를 위한 번들러(bundler)입니다. 본 글에서는 Bun을 이용하여 React 프로젝트를 생성하는 방법에 대해 설명합니다. Bun 설치하기먼저, React 프로젝트를 생성하기 전b..

Bun은 JavaScript 및 TypeScript 프로젝트를 위한 번들러(bundler)입니다. 본 글에서는 Bun을 이용하여 React 프로젝트를 생성하는 방법에 대해 설명합니다. Bun 설치하기먼저, React 프로젝트를 생성하기 전에 Bun을 설치해야 합니다. 본 글에서는 macOS 환경에서 Bun을 설치하는 방법에 대해 소개합니다. 다른 환경에서의 설치 방법은 아래 공식 사이트를 참고해주세요.Bun: https://bun.sh/ brew를 이용하여 Bun을 설치하도록 하겠습니다. 만약, brew가 설치되어 있지 않다면 아래 글을 참고하여 설치를 진행해주시길 바랍니다. MacOS에 Homebrew 설치하기Homebrew란? 리눅스 기반의 OS에서는 apt-get, yum, rpm 등 여러가지 패키..

타입스크립트(TypeScript)에서 타입을 정의할 때, 사용하는 두 가지 개념이 있습니다. type과 interface입니다. 이 두 구조는 타입스크립트에서 데이터의 형태를 정의하는 데 사용되지만, 그 사용법과 목적에서 약간의 차이가 있습니다. type과 interface의 기본 사용법차이점을 살펴보기 전에 두 개념의 사용법에 대해 먼저 살펴봅시다. 타입(type)type은 interface보다 보다 유연하게 타입을 정의할 수 있습니다. 객체 형태뿐만 아니라, 유니온(Union), 인터섹션(Intersection), 튜플(Tuple) 등 다양한 타입의 조합을 만들어낼 수 있습니다.type Point = { x: number; y: number;};type ID = string | number;con..

시그널링 서버(signaling server)실시간 화상채팅을 구현하기 전에 Signaling 서버에 대해 알아야 합니다. WebRTC에서 시그널링 서버(signaling server)는 매우 중요한 역할을 합니다. 이 서버는 WebRTC 연결을 구성하기 위해 필요한 메타데이터와 control 메시지를 주고받는 데 사용됩니다. 시그널링 서버는 peer-to-peer 간의 초기 설정, 네트워크 정보 교환, 세션 관리 등을 합니다. WebRTC 프로토콜 자체에서 제공해주는 기능은 아니기 때문에 시스템 구조 및 상황에 맞게 개발자가 시그널링 프로세스를 구현해야 합니다. (예를들어, 화상 채팅 앱을 만든다면, 인증 및 채팅 방을 관리하기 위한 프로세스가 필요합니다. 이런 프로세스를 직접 시그널링 서버에 구현해햐..

서비스(Service)란 서비스는 NestJS에서만 사용하는 개념은 아니고, 소프트웨어 개발시 공통적으로 사용하는 개념입니다. 서비스는 보통 복잡한 비지니스 로직 또는 데이터베이스 관련된 로직을 처리할때 사용합니다. 정답은 없겠지만 종종 Controller에서 비지니스 로직을 처리하는 경우를 종종 보게 되는데, 컨트롤러는 라우팅을 정의하는 목적으로만 사용하고 복잡한 비지니스 로직은 서비스로 분리하는 것이 유지 보수 측면에서도 좋을거 같다고 생각합니다. NestJS에서의 서비스 NestJS에서 서비스를 정의할때는 @Injectable 데코레이터를 사용합니다. (Injectable 영어 단어로만 보더라도, "주입할 수 있는"로 해석할 수 있는데, Spring에서 DI와 동일한 개념) 해당 데코레이터에 의해,..

타입스크립트 요즘은 웹 개발을 하기 위해서 꼭 배워야 할 언어 중에 typescript가 있습니다. javascript로도 잘 개발해왔는데, 왜 typescript를 사용할까요? 본 글에서는 javascript와 typescript의 차이를 살펴보면서 typescript에 대해 살펴봅니다. javascript vs typescript javascript 예전부터 사용해오던 javascript는 타입이라는게 없어서 편하기도 하면서, 많은 버그들을 만들어 우리들을 괴롭혀왔습니다. 예를들면, 두 수를 더해주는 메소드를 구현해보겠습니다. function sum(numA, numB) { return numA + numB; } 일반적으로는 우리는 numA와 numB에 숫자 형태의 값을 넣어서 사용할 것입니다. 아래..