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는 ..

초기 환경 설정node 설치React Native는 React와 같이 Javascript으로 개발을 하기 때문에 node가 필요합니다. node 설치는 아래 링크를 참고하시면 됩니다. macos에 nodejs 설치하기 (쉽게 node 버전 변경하기)nodejs 설치 nodejs를 설치하는 방법은 brew를 사용한 방법이 있고, nodejs 공식사이트에서 직접 설치하는 방법이 있습니다. 본 글에서는 brew를 사용하여 설치하는 방법에 대해 소개합니다. brew로 설치bluemiv.tistory.com watchman 설치Watchman은 Facebook이 개발한 오픈 소스 툴입니다. 파일 시스템에서 변화를 감지하고 해당 변화에 반응하는 작업을 자동화할 수 있게 해주는 도구입니다. ..

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 데 사용되는 표준 마크업 언어입니다. 이전에는 대부분 div, span과 같은 HTML 태그를 사용했지만, 최근에는 시멘틱 태그를 사용합니다. 여기서 시멘틱(Semantic) 태그란, 그 내용이 무엇인지 브라우저와 개발자 모두에게 명확하게 설명해 주는 HTML 태그를 말합니다. 이러한 시멘틱 태그들은 웹 페이지의 가독성을 높이고, 검색 엔진 최적화(SEO)에 도움을 줍니다. 본 글에서는 HTML의 시멘틱 태그에 대해 설명합니다. 시멘틱 태그란? 시멘틱 태그는 웹 페이지의 다양한 부분(헤더, 푸터, 본문 등)을 명확하게 구분짓는 데 사용되는 HTML 태그입니다. 이 태그들은 각 섹션의 의미를 명확히 하여, 웹 페이지의 ..

프로젝트를 시작하다보면 어떤 프로젝트 구조로 개발을 할지 고민을 하게 됩니다. 정해진 규칙은 없기 때문에 정답은 없지만, 본 글에서는 제가 개발하면서 유지보수하기 편했던 디렉토리 구조를 설명합니다. 소규모 & 중간규모 프로젝트 작은 규모의 프로젝트일 수록 디렉토리 구조는 단순하게 가져가는 것이 좋았습니다. 그래서 depth는 최대한으로 줄이고 컴포넌트, api, hook, 유틸리티 함수 등으로 디렉토리를 구분하였습니다. my-app/ │ ├── src/ │ ├── components/ # 재사용 가능한 컴포넌트 │ │ ├── common/ # 전역적으로 사용되는 컴포넌트 (버튼, 헤더, 푸터 등) │ │ └── BlogContainer # 블로그 컨테이너 컴포넌트 │ │ ├── index.tsx │ │ ..

vercel vercel은 AWS처럼 클라우드 시스템 위에서 Next.js(SSR, SSG 모두 가능) 혹은 React 프로젝트를 무료로 호스팅할 수 있게 도와주는 서비스 입니다. 그리고, Next.js도 같이 개발을 하고 있어서 어떤 클라우드 서비스보다 원활한 Next.js 호스팅이 가능합니다. 직접 사용해본 결과 AWS Amplify와 비교했을때, 훨씬 지원되는 기능도 많고 안정적입니다. Next.js 프로젝트를 한다면 vercel을 사용하는게 좋을거 같습니다. Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel Vercel's Frontend Cloud gives developers the framewo..

실행 환경 설정 Next.js 14버전은 node버전이 18.17 이상이어야 합니다. 따라서, n 패키지 또는 nvm을 통해 node 버전을 18.17로 설치 및 변경해줍니다. node 버전을 어떻게 변경해야 하는지 모르시는 분은 아래 글을 참고해주세요. macos에 nodejs 설치하기 (쉽게 node 버전 변경하기) nodejs 설치 nodejs를 설치하는 방법은 brew를 사용한 방법이 있고, nodejs 공식사이트에서 직접 설치하는 방법이 있습니다. 본 글에서는 brew를 사용하여 설치하는 방법에 대해 소개합니다. brew로 설치 bluemiv.tistory.com n 패키지를 이용하여 node 버전을 변경합니다. 그리고 버전이 제대로 변경됐는지 확인해봅시다. sudo n 18.19.0 node ..