반응형 웹을 구현할 때, 모바일과 데스크탑 환경을 구분해야 할 때가 종종 있습니다. 본 글에서는 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 등 여러가지 패키..

HTML5는 웹 개발자들에게 다양한 새 기능을 제공합니다. 상세 내용은 아래와 같습니다. 향상된 멀티미디어 지원HTML5에서는 비디오와 오디오를 쉽게 삽입하고 재생할 수 있는 태그를 제공합니다. 태그: 비디오 파일을 직접 삽입할 수 있습니다.  태그: 오디오 파일을 삽입하고 재생할 수 있습니다. 이러한 멀티미디어 태그들은 추가적인 플러그인 없이도 브라우저에서 바로 재생 가능하며, 다양한 포맷을 지원합니다. 그래픽과 애니메이션HTML5는 2D 그래픽과 애니메이션을 지원합니다.  태그: 자바스크립트와 결합하여 동적인 그래픽을 그릴 수 있는 도구를 제공합니다. SVG(Scalable Vector Graphics): XML 기반의 벡터 그래픽을 지원합니다. (해상도에 영향을 받지 않아서, 이미지 깨짐 현상이 없..

auto_routeauto_route는 Flutter에서 route 내용의 코드를 자동으로 생성해주는 라이브러리입니다. auto_route는 라우트 관리를 단순화시켜주고, 코드의 반복을 줄여주기 때문에 유지 보수 측면에서 용이합니다. 의존성 추가필요한 의존성을 추가합니다.flutter pub add auto_routeflutter pub add --dev auto_route_generator build_runner auto_route_generator와 build_runner는 라우팅 관련 코드를 생성하기 위해 필요합니다. 구현screen 파일 생성화면에 띄울 HomeScreen와 FirstScreen 파일을 생성합니다.// home_screen.dartimport 'package:auto_route/a..

Run Pubspec Script (RPS)node 프로젝트에서는 package.json의 scripts를 사용해서 정의해둔 스크립트를 명령어 하나로 수행할 수 있지만, flutter에서는 기본적으로 제공해주고 있지 않습니다. RPS (Run Pubspec Script) 툴을 사용하면 동일한 기능을 사용할 수 있습니다. 툴 설치rps 라이브러리를 global scope로 설치합니다.dart pub global activate rps rps 명령어 사용을 위해, 환경변수를 추가합니다.vim ~/.zshenv# ~/.zshenv# flutterexport PATH="$PATH:$HOME/.pub-cache/bin" pubspec.yaml에 원하는 scripts를 추가합니다.scripts: run: flut..

Flutter 엔진 및 플러그인 초기화Flutter에서 WidgetsFlutterBinding.ensureInitialized() 메서드는 Flutter 앱이 실행되기 전에 앱의 루트 위젯 생성, 리소스 로딩, 플러그인 초기화 등의 필요한 초기화 작업을 수행합니다. 일반적으로 main() 함수나 애플리케이션의 진입점에서 호출하여 사용합니다. (진입점에서 호출해야 애플리케이션이 시작될 때, 모든 초기화가 완료된 후 앱을 수행할 수 있기 때문) 초기화하는 영역을 자세하게 살펴보면, Flutter 엔진 초기화Flutter 엔진은 그래픽 렌더링, 이벤트 처리, 상태 관리 등과 같은 핵심 기능을 담당합니다. WidgetsFlutterBinding.ensureInitialized()는 Flutter 엔진을 초기화하..

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

WebRTC 개념WebRTC(Web Real-Time Communication)는 웹 브라우저와 모바일 어플리케이션을 통해 실시간으로 음성, 비디오, 데이터를 주고받을 수 있게 해주는 기술입니다. 이 기술은 플러그인이나 외부 소프트웨어 설치 없이도 동작하며, HTML5와 JavaScript API를 사용하여 구현됩니다. WebRTC를 사용하면 아래와 같은 기능을 만들 수 있습니다.화상 회의 시스템: Zoom, Google Meet과 같은 서비스와 같이, 실시간 화상 채팅이 가능한 시스템을 구현 가능실시간 게임: 멀티플레이어 게임에서 실시간 음성 대화 시스템 구현 가능파일 공유: 데이터 채널을 이용하여 브라우저 간 직접 파일을 공유할 수 있는 시스템 구현 가능 WebRTC 특징실시간 통신: WebRTC는 ..