Welcome
mwryu.devdocs
배운 것을 문서로 남기는 개발 노트. 기술 정리부터 삽질 기록까지, mwryu의 devdocs입니다.
21 posts
전체 글
배운 것을 문서로 남기는 개발 노트. 기술 정리부터 삽질 기록까지, mwryu의 devdocs입니다.
React Native와 Flutter 같은 크로스 플랫폼 프레임워크는 하나의 코드로 iOS와 Android 앱을 함께 만들 수 있어 오랫동안 사랑받았습니다. 그런데 2026년 Shopify가 AI 코딩 에이전트를 이유로 네이티브로 돌아가면서, 크로스 플랫폼의 시대가 끝나는지 정리해 봤습니다. 저는 React Native로 실무를 시작했고, 이후 Flutter도 공부하면서 두 프레임워크를 모두 써 봤습니다. 그래서 Shopify의 발표는 남의 이야기처럼 들리지 않았습니다. 이 글에서는 크로스 플랫폼 프레임워크가 무엇인지부터 시작해서, 대표 주자인 React Native와 Flutter를 비교하고, 네이티브로 돌아간 기업들의 사례를 살펴본 뒤 제 생각을 정리해 보려고 합니다.크로스 플랫폼 프레임워크란?크..
velog를 쓰면서 겪은 서버 장애와 스타일 커스터마이징의 한계 때문에 블로그를 Tistory로 옮겼습니다. 직접 개발 대신 Tistory를 고른 이유, GPT와 Claude Code로 스킨을 만든 과정, 기존 글 백업과 Cloudflare R2로 이미지를 옮긴 방법을 정리했습니다. 지금까지 velog에 올려 두었던 글을 모두 옮기고 나서, 그 과정에서 고민했던 점과 실제로 해 본 작업을 순서대로 기록해 두려고 합니다. 블로그 플랫폼을 옮기려는 분이나, AI로 티스토리 스킨을 만들어 보려는 분께 참고가 되었으면 좋겠습니다.Velog를 사용하면서 느낀 점장점블로그를 처음 시작하기 쉽습니다velog는 가입하고 바로 글을 쓸 수 있을 만큼 진입 장벽이 낮습니다. 개발자를 위한 서비스라서 마크다운과 코드 블록..
오늘은 어제 LinkedIn에서 받은 메일 한 통에 나온 내용을 다뤄 보려고 합니다. 어제 LinkedIn에서, 프론트엔드에서 UI 개발과 테스트에 많이 쓰는 Storybook이 es-toolkit이라는 라이브러리를 도입했다는 게시글이 담긴 메일을 받았습니다. 그 뒤 예전에 개발했던 프로젝트 환경에서 es-toolkit을 써 봤는데 너무 놀라워서, 오늘은 es-toolkit에 대해 다뤄 보겠습니다.1. es-toolkit이란?es-toolkit은 토스 팀에서 개발한 JavaScript 유틸리티 라이브러리입니다. Node.js 기반 개발 환경을 다루신다면 "lodash" 많이 쓰시죠?? JavaScript 개발자 사이에서 인기가 높은 라이브러리 중 하나인 lodash에는 array, collection, ..
오늘은 개발자라면 누구나 쓰고 있는, 소스코드 변경 사항을 관리하기 위한 "형상 관리"에 대한 내용을 작성해 보려고 합니다. (갑자기 생각이 나서 간단히 자료 조사를 하고 글만 적었습니다 ㅎㅎㅎ)1. 형상 관리형상 관리는 영어 약자로 SCM(Software Configuration Management)이라고 부르고, 소프트웨어나 소스코드의 변경 사항을 체계적으로 끊임없이 관리하기 위한 개념입니다. 쉽게 말하면, 개발자가 소프트웨어나 소스코드를 작성하면서 생기는 변경 사항을 다른 개발자와 협업하고, 필요하면 이전으로 되돌릴 수 있도록 체계적으로 관리하는 개념입니다. 형상 관리의 하위 개념으로는 버전 관리 시스템(VCS, Version Control System), 소스코드 관리(Source Code Man..
안녕하세요. 이번에는 최근 Google Developers 유튜브에 올라온 내용 중 아주 흥미로워 보이는 새로운 기술을 찾아서 리뷰해 보려고 합니다. 지난해 구글이 처음 공개한 웹 기반 IDE, Project IDX를 간단히 소개하고 직접 써 본 리뷰를 작성해 보겠습니다!1. Project IDX가 뭐야? Project IDX는 지난해 구글이 처음 공개한 웹 브라우저 기반 IDE입니다. 보통 개발할 때는 각자 개발하려는 것에 맞춰 컴퓨터에 환경 설정을 하고, VSCode나 IntelliJ 같은 IDE로 코드를 작성합니다. 하지만 Project IDX는 컴퓨터의 로컬 환경이 아니라 웹 브라우저를 통해 구글의 클라우드 환경에서 개발하는 방식입니다. Project IDX는 PaLM 2 모델 기반의 AI 코딩 ..
2024 구글 I/O 정리 네 번째 순서, 바로 Jetpack Glance를 사용한 안드로이드 위젯 구축입니다.1. Jetpack GlanceJetpack Glance는 안드로이드의 선언형 UI 개발 툴킷인 Jetpack Compose를 기반으로 위젯을 개발하는 툴킷입니다. 기존에는 안드로이드에서 위젯을 개발할 때 일반 안드로이드 앱 개발 방식과 같이 XML 레이아웃으로 UI를 구성해 왔습니다. 하지만 Jetpack Compose 기반 앱 개발이 점점 늘어나면서, 이제 위젯도 Jetpack Compose를 기반으로 개발할 수 있게 된 것입니다.2. 안드로이드 위젯의 기본적인 작동 원리2-1. AppWidgetHost위젯을 추가할 수 있는 영역으로, 안드로이드 폰으로 치면 홈 화면이라고 생각하면 됩니다.2..
2024 구글 I/O 강의 세 번째 순서로, Android 온디바이스 생성형 AI의 작동 원리를 정리해 보겠습니다.1. What is on-device inference? (온디바이스 추론이란 무엇인가?)온디바이스 생성형 AI는 사용자의 스마트폰, 태블릿, 컴퓨터에서 서버에 요청하지 않고도 명령을 처리할 수 있습니다. 온디바이스 생성형 AI의 핵심 장단점을 꼽아 보자면 다음과 같습니다. 먼저 장점은, 서버 요청 없이 디바이스 안에서 실행되는 기능이라 민감한 사용자 데이터를 외부로 보내지 않고 디바이스 안에서 로컬로 처리한다는 점입니다. 그리고 인터넷 연결이 약한 환경이나 예측할 수 없는 신호 감소 환경에서도 기능을 온전히 제공할 수 있습니다. 마지막으로 서버에 요청하는 것이 아니기 때문에 추가 비용이 발..
2024 구글 I/O 포스트 두 번째 순서, 바로 Flutter 새 소식입니다.1. Gemini API를 사용한 앱 개발 이 내용은 정확히는 이 강의가 아니라 구글 I/O 개발자 키노트에서 공개된 내용입니다. 바로 올해 초 Dart 기반의 Flutter용 Google AI SDK가 출시되었다는 점입니다. 이 SDK를 쓰면 텍스트 생성, 요약, 채팅처럼 AI가 필요한 기능을 최소한의 설정으로 구현할 수 있습니다. 무엇보다 Gemini의 모든 AI 모델을 쓸 수 있다는 점이 특징입니다.2. Games갑자기 게임 이야기가 나와서 저는 살짝 당황스러웠던 것 같습니다. 아무리 Flutter가 운영체제의 도움 없이 Flutter Framework와 Flutter 엔진만으로 독립적으로 동작한다고 해도, 우리가 흔히 ..
안녕하세요. 오랜만에 작성하는 구글 I/O 포스트입니다. 작년까지만 해도 Firebase 새 소식만 정리해서 올렸지만, 올해부터는 Firebase를 포함해 제가 예전부터 관심이 많았던 Flutter, Jetpack Compose, Android 등 다양한 주제로 포스트를 작성하려고 합니다. 첫 번째 순서는 제가 2022년 구글 I/O부터 매년 작성하고 있는 주제, 바로 Firebase입니다.1. Firebase 로고 변경올해 강의에서는 Firebase 로고 리뉴얼 소식을 알려 왔습니다. 저는 이 로고를 보고 기존 로고보다 더 예뻐졌다는 느낌을 받았는데요, 이번 강연에서 설명한 로고 변경의 계기는 요즘 구글을 포함해 전 세계적으로 많이 밀고 있는 AI, 그중에서도 생성형 AI에 더욱 집중하겠다는 의미를 ..
크로스 플랫폼 프레임워크의 양대 산맥, React Native와 Flutter의 차이점과 장단점을 분석해 보려고 한다.1. React Native React Native는 페이스북(현 메타)에서 개발한 크로스 플랫폼 프레임워크이다. 페이스북이 React 라이브러리를 기반으로 개발했고, 컴포넌트의 라이프사이클은 같지만 React와 달리 HTML은 쓰지 않는다. HTML 대신 React Native가 자체 제공하는 컴포넌트를 쓴다.1-1. 장점1. 주 사용 언어: JS, TSReact Native는 React처럼 주 언어로 JavaScript와 TypeScript를 쓴다. 그래서 웹 개발자는 다른 개발 분야에 비해 상대적으로 접근하기가 쉽다.2. 커뮤니티가 가장 크다현재 시장에 나와 있는 크로스 플랫폼 프레..
React Native와 Flutter 같은 크로스 플랫폼 프레임워크는 하나의 코드로 iOS와 Android 앱을 함께 만들 수 있어 오랫동안 사랑받았습니다. 그런데 2026년 Shopify가 AI 코딩 에이전트를 이유로 네이티브로 돌아가면서, 크로스 플랫폼의 시대가 끝나는지 정리해 봤습니다. 저는 React Native로 실무를 시작했고, 이후 Flutter도 공부하면서 두 프레임워크를 모두 써 봤습니다. 그래서 Shopify의 발표는 남의 이야기처럼 들리지 않았습니다. 이 글에서는 크로스 플랫폼 프레임워크가 무엇인지부터 시작해서, 대표 주자인 React Native와 Flutter를 비교하고, 네이티브로 돌아간 기업들의 사례를 살펴본 뒤 제 생각을 정리해 보려고 합니다.크로스 플랫폼 프레임워크란?크..
velog를 쓰면서 겪은 서버 장애와 스타일 커스터마이징의 한계 때문에 블로그를 Tistory로 옮겼습니다. 직접 개발 대신 Tistory를 고른 이유, GPT와 Claude Code로 스킨을 만든 과정, 기존 글 백업과 Cloudflare R2로 이미지를 옮긴 방법을 정리했습니다. 지금까지 velog에 올려 두었던 글을 모두 옮기고 나서, 그 과정에서 고민했던 점과 실제로 해 본 작업을 순서대로 기록해 두려고 합니다. 블로그 플랫폼을 옮기려는 분이나, AI로 티스토리 스킨을 만들어 보려는 분께 참고가 되었으면 좋겠습니다.Velog를 사용하면서 느낀 점장점블로그를 처음 시작하기 쉽습니다velog는 가입하고 바로 글을 쓸 수 있을 만큼 진입 장벽이 낮습니다. 개발자를 위한 서비스라서 마크다운과 코드 블록..
오늘은 어제 LinkedIn에서 받은 메일 한 통에 나온 내용을 다뤄 보려고 합니다. 어제 LinkedIn에서, 프론트엔드에서 UI 개발과 테스트에 많이 쓰는 Storybook이 es-toolkit이라는 라이브러리를 도입했다는 게시글이 담긴 메일을 받았습니다. 그 뒤 예전에 개발했던 프로젝트 환경에서 es-toolkit을 써 봤는데 너무 놀라워서, 오늘은 es-toolkit에 대해 다뤄 보겠습니다.1. es-toolkit이란?es-toolkit은 토스 팀에서 개발한 JavaScript 유틸리티 라이브러리입니다. Node.js 기반 개발 환경을 다루신다면 "lodash" 많이 쓰시죠?? JavaScript 개발자 사이에서 인기가 높은 라이브러리 중 하나인 lodash에는 array, collection, ..
오늘은 개발자라면 누구나 쓰고 있는, 소스코드 변경 사항을 관리하기 위한 "형상 관리"에 대한 내용을 작성해 보려고 합니다. (갑자기 생각이 나서 간단히 자료 조사를 하고 글만 적었습니다 ㅎㅎㅎ)1. 형상 관리형상 관리는 영어 약자로 SCM(Software Configuration Management)이라고 부르고, 소프트웨어나 소스코드의 변경 사항을 체계적으로 끊임없이 관리하기 위한 개념입니다. 쉽게 말하면, 개발자가 소프트웨어나 소스코드를 작성하면서 생기는 변경 사항을 다른 개발자와 협업하고, 필요하면 이전으로 되돌릴 수 있도록 체계적으로 관리하는 개념입니다. 형상 관리의 하위 개념으로는 버전 관리 시스템(VCS, Version Control System), 소스코드 관리(Source Code Man..
안녕하세요. 이번에는 최근 Google Developers 유튜브에 올라온 내용 중 아주 흥미로워 보이는 새로운 기술을 찾아서 리뷰해 보려고 합니다. 지난해 구글이 처음 공개한 웹 기반 IDE, Project IDX를 간단히 소개하고 직접 써 본 리뷰를 작성해 보겠습니다!1. Project IDX가 뭐야? Project IDX는 지난해 구글이 처음 공개한 웹 브라우저 기반 IDE입니다. 보통 개발할 때는 각자 개발하려는 것에 맞춰 컴퓨터에 환경 설정을 하고, VSCode나 IntelliJ 같은 IDE로 코드를 작성합니다. 하지만 Project IDX는 컴퓨터의 로컬 환경이 아니라 웹 브라우저를 통해 구글의 클라우드 환경에서 개발하는 방식입니다. Project IDX는 PaLM 2 모델 기반의 AI 코딩 ..
2024 구글 I/O 정리 네 번째 순서, 바로 Jetpack Glance를 사용한 안드로이드 위젯 구축입니다.1. Jetpack GlanceJetpack Glance는 안드로이드의 선언형 UI 개발 툴킷인 Jetpack Compose를 기반으로 위젯을 개발하는 툴킷입니다. 기존에는 안드로이드에서 위젯을 개발할 때 일반 안드로이드 앱 개발 방식과 같이 XML 레이아웃으로 UI를 구성해 왔습니다. 하지만 Jetpack Compose 기반 앱 개발이 점점 늘어나면서, 이제 위젯도 Jetpack Compose를 기반으로 개발할 수 있게 된 것입니다.2. 안드로이드 위젯의 기본적인 작동 원리2-1. AppWidgetHost위젯을 추가할 수 있는 영역으로, 안드로이드 폰으로 치면 홈 화면이라고 생각하면 됩니다.2..
2024 구글 I/O 강의 세 번째 순서로, Android 온디바이스 생성형 AI의 작동 원리를 정리해 보겠습니다.1. What is on-device inference? (온디바이스 추론이란 무엇인가?)온디바이스 생성형 AI는 사용자의 스마트폰, 태블릿, 컴퓨터에서 서버에 요청하지 않고도 명령을 처리할 수 있습니다. 온디바이스 생성형 AI의 핵심 장단점을 꼽아 보자면 다음과 같습니다. 먼저 장점은, 서버 요청 없이 디바이스 안에서 실행되는 기능이라 민감한 사용자 데이터를 외부로 보내지 않고 디바이스 안에서 로컬로 처리한다는 점입니다. 그리고 인터넷 연결이 약한 환경이나 예측할 수 없는 신호 감소 환경에서도 기능을 온전히 제공할 수 있습니다. 마지막으로 서버에 요청하는 것이 아니기 때문에 추가 비용이 발..
2024 구글 I/O 포스트 두 번째 순서, 바로 Flutter 새 소식입니다.1. Gemini API를 사용한 앱 개발 이 내용은 정확히는 이 강의가 아니라 구글 I/O 개발자 키노트에서 공개된 내용입니다. 바로 올해 초 Dart 기반의 Flutter용 Google AI SDK가 출시되었다는 점입니다. 이 SDK를 쓰면 텍스트 생성, 요약, 채팅처럼 AI가 필요한 기능을 최소한의 설정으로 구현할 수 있습니다. 무엇보다 Gemini의 모든 AI 모델을 쓸 수 있다는 점이 특징입니다.2. Games갑자기 게임 이야기가 나와서 저는 살짝 당황스러웠던 것 같습니다. 아무리 Flutter가 운영체제의 도움 없이 Flutter Framework와 Flutter 엔진만으로 독립적으로 동작한다고 해도, 우리가 흔히 ..
안녕하세요. 오랜만에 작성하는 구글 I/O 포스트입니다. 작년까지만 해도 Firebase 새 소식만 정리해서 올렸지만, 올해부터는 Firebase를 포함해 제가 예전부터 관심이 많았던 Flutter, Jetpack Compose, Android 등 다양한 주제로 포스트를 작성하려고 합니다. 첫 번째 순서는 제가 2022년 구글 I/O부터 매년 작성하고 있는 주제, 바로 Firebase입니다.1. Firebase 로고 변경올해 강의에서는 Firebase 로고 리뉴얼 소식을 알려 왔습니다. 저는 이 로고를 보고 기존 로고보다 더 예뻐졌다는 느낌을 받았는데요, 이번 강연에서 설명한 로고 변경의 계기는 요즘 구글을 포함해 전 세계적으로 많이 밀고 있는 AI, 그중에서도 생성형 AI에 더욱 집중하겠다는 의미를 ..
크로스 플랫폼 프레임워크의 양대 산맥, React Native와 Flutter의 차이점과 장단점을 분석해 보려고 한다.1. React Native React Native는 페이스북(현 메타)에서 개발한 크로스 플랫폼 프레임워크이다. 페이스북이 React 라이브러리를 기반으로 개발했고, 컴포넌트의 라이프사이클은 같지만 React와 달리 HTML은 쓰지 않는다. HTML 대신 React Native가 자체 제공하는 컴포넌트를 쓴다.1-1. 장점1. 주 사용 언어: JS, TSReact Native는 React처럼 주 언어로 JavaScript와 TypeScript를 쓴다. 그래서 웹 개발자는 다른 개발 분야에 비해 상대적으로 접근하기가 쉽다.2. 커뮤니티가 가장 크다현재 시장에 나와 있는 크로스 플랫폼 프레..