Reset CSS를 사용하는 이유Reset CSS를 사용하는 이유는 브라우저마다 기본적으로 제공하는 스타일이 다르기 때문에 스타일을 초기화하여, 다양한 브라우저에서 일관성 있는 UI를 제공하기 위해 사용합니다. 최근에는 완전히 스타일을 초기화하기보다는 각 브라우저의 기본 스타일을 보완해 주는 방식으로 Normalize CSS도 많이 사용됩니다. Reset CSS 코드 예시아래 사이트와 같이 브라우저의 기본 스타일을 제거하는 reset css를 공유하는 사이트가 있습니다. CSS Tools: Reset CSSCSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default ..

처음 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에서 useMemo를 사용하는 상황은 보통 성능 개선을 위해 사용합니다. 그렇다면 사용하면 무조건 성능이 좋아질까요? 본 글에서는 useMemo를 사용하면 정말로 성능이 향상이 있는지 설명합니다. useMemo()란?useMemo는 React에서 제공하는 훅(Hook) 중 하나로, 메모이제이션(memoization)을 통해 성능 최적화를 돕는 역할을 합니다. 컴포넌트의 렌더링 과정에서 계산 비용이 높은 결과 값을 메모리에 캐싱하게 됩니다. 이후 동일한 입력 값이 들어오더라도 재연산하지 않고, 메모리에 캐싱된 값을 반환하기 때문에 불필요한 연산을 줄어들어 성능이 향상될 수 있습니다. useMemo() 사용 예시계산 비용이 높은 연산의 경우, useMemo를 사용하여 메모리 캐싱을 합니다. 의존성 ..

반응형 웹을 구현할 때, 모바일과 데스크탑 환경을 구분해야 할 때가 종종 있습니다. 본 글에서는 React에서 모바일 환경인지 데스크탑 환경인지 구분하는 훅(hook)을 만드는 방법에 대해 소개합니다. 모바일과 데스크탑 환경을 왜 구분해야 하는가?여러가지 이유가 있겠지만, 저의 경우 CSS의 hover 때문에 구분이 필요했습니다. 모바일 환경에서는 터치를 시작(touch start)했거나 터치를 하는 중(touch)이거나 터치를 끝냈거나(touche end)와 같이 3가지 상태를 가지게 됩니다. 데스크탑 환경에서와 같이 hover가 존재하지 않기 때문에, 모바일에서는 hover 값이 정상적으로 먹히지 않습니다. 따라서 저는 구분을 위해 커스텀 훅을 만들어서 사용합니다. 구현 방법CSS 미디어 쿼리를 이용..

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 등 여러가지 패키..

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

Intersection Observer API 이전에는 스크롤 위치에 따라 화면을 변화시키기 위해, 아래와 같이 scroll event listener 를 추가하여 사용했습니다. document.addEventListener("scroll", callback); 이렇게 스크롤로 화면 내의 요소(element)의 변화를 감지하는 일은, 스크롤을 조금만 움직여도 이벤트가 발생하며 사이트에 부하를 줄 수 있기 때문에 비효율적이었습니다. 비교적 최근 브라우저에서는 Intersection Observer 라는 API를 지원해주기 때문에 이전 방법(스크롤 이벤트를 이용한 방법)보다 효율적이고, 쉽게 컨트롤 할 수 있게 됐습니다. Intersection Observer 사용하기 사용하는 방법은 관찰자(Observer..

tailwindcss tailwindcss는 자주 사용하는 css를 모아놓은 라이브러리로 편리한 유틸리티 css 라이브러리입니다. tailwindcss에는 정말 많은 스타일들이 이미 정의가 되어있어서, 따로 css를 작성할 필요없이 class(className)에만 추가를 하면 스타일이 입혀집니다. 예를 들어, 둥근 사각형을 만든다고 했을때 아래와 같이 html 코드에 class 속성을 추가하고, border-radius 값을 정의해줘야 합니다. .rounded-rectangle { width: 50px; height: 50px; border-radius: 0.25rem; } 만약, tailwindcss 를 사용하게 된다면 훨씬 간단해집니다. (사용하지 않았을때 코드와 비교했을때, 훨씬 간단하게 작성할 ..