withmilk 님의 블로그

지난 글에서는 사용자가 선택한 이미지를 로컬에 저장하고,SharedPreferences를 통해 경로를 기억하는 방식으로 프로필 이미지를 처리했어요. 이 방식은 간단하고 빠르지만, 실제 서비스 환경에서는 치명적인 문제가 있었죠. 🥲로컬 이미지 경로는 내 기기에서만 유효하고, 임시 저장소이기 때문에 앱 재실행 후 이미지가 사라질 수도 있었어요. 이제 이런 문제를 완전히 해결할 차례입니다.이번 글에서는 Firebase Storage를 활용해 이미지를 클라우드에 저장하고,모든 사용자 기기에서 안정적으로 이미지를 불러오는 방법을 알아보겠습니다.✅ 우리가 만들 기능 요약사용자가 선택한 프로필 이미지를 Firebase Storage에 업로드업로드 후 생성되는 이미지 URL을 SharedPreferences와 Fir..

이전 글까지 Flutter로 만든 메신저 앱, 잘 작동하긴 하지만 뭔가 부족하지 않으셨나요?오늘은 메신저 앱에 닉네임 설정과 프로필 이미지 표시 기능을 추가해 보면서,좀 더 사용자다운 느낌, 그리고 예쁜 인터페이스를 만드는 법을 알아보겠습니다!이 글은 초보자도 쉽게 따라 할 수 있도록 하나하나 순서대로,그리고 코드 예제까지 포함해서 설명할게요. 😉📌 오늘 목표요약사용자가 앱 처음 실행할 때 닉네임과 프로필 이미지를 설정할 수 있어요.메시지를 보낼 때 닉네임과 이미지도 함께 저장돼요.메시지 목록에서 닉네임과 프로필 이미지가 함께 보여요.🧰 사용 기술 요약Firebase Realtime Database : 메시지 저장용SharedPreferences : 닉네임, 이미지 경로를 로컬에 저장함ImagePi..

Flutter와 Firebase로 간단한 메신저 앱을 만들었다면, 이제 진짜 메신저처럼 멋지게 업그레이드해볼 차례입니다!이번 글에서는 메시지 버블, 닉네임 표시, 보낸 시간 표시, 내 메시지와 다른 사람 메시지 구분까지,코드를 어떻게 변경했는지 하나하나 자세히 알려드릴게요.🧩 Flutter 메신저 업그레이드에서 변경된 부분메시지를 보낼 때 닉네임과 시간도 함께 저장메시지를 시간순으로 정렬해서 보여주기내 메시지는 오른쪽, 다른 사람 메시지는 왼쪽 정렬메시지를 버블 디자인으로 예쁘게 꾸미기닉네임과 보낸 시간도 화면에 표시하기업그레이드된 메신저 예제 코드//chat_screen.dartimport 'package:flutter/material.dart';import 'package:firebase_datab..

Flutter와 Firebase를 이용하면 멋진 메신저 앱을 아주 쉽게 만들 수 있어요!Firebase의 Realtime DB는 실시간 업데이트 기능을 제공하기 때문에 메신저의 기능을 엄청 쉽게 구현할 수 있어요.같이 따라하면서 만들어 봐요.🛠️ 준비물: Flutter와 Firebase 연결하기Flutter는 앱을 쉽게 만들 수 있게 도와주는 도구예요. 그리고 Firebase는 데이터를 저장하거나, 메시지를 빠르게 주고받게 해주는 마법 같은 도구예요. 메신저를 만들려면 둘 다 필요해요!먼저, 컴퓨터에 Flutter가 설치되어 있어야 해요. 그리고 새로운 Flutter 프로젝트를 만들어야 해요. 다음으로 Firebase 홈페이지에 가서 새 프로젝트를 만들어요. 그런 다음, Flutter 앱과 Fireba..

혹시 VSCode에서 코드 폰트 바꾸는 방법 찾고 계신가요? 프로그래밍을 할 때 가장 중요한 것 중 하나가 바로 개발 환경인데요. 특히 코드 편집기의 폰트는 가독성과 생산성에 큰 영향을 줘요. 개발할 때 가독성이 좋은 폰트를 쓰면 코드가 훨씬 깔끔하게 보이고, 눈의 피로도 줄일 수 있어요! 오늘은 맥북에서 Consolas(콘솔라스) 폰트를 VSCode에서 적용하는 방법을 아~주 쉽게 알려드릴게요!1. VSCode에서 폰트 변경이 중요한 이유코딩할 때 헷갈리는 문자 많잖아요? 예를 들어, 이런 거 구별 안 되면 코드 파악하는데 시간을 더 사용하게 될 수 밖에 없고, 같은 코드를 개발하거나 읽더라도 시간이 더 오래걸려요.1 (숫자 1) vs l (알파벳 L)O (알파벳 O) vs 0 (숫자 0Consolas..

Flutter로 앱을 개발할 때 VSCode(Visual Studio Code) 를 사용하면 가볍고 강력한 기능을 활용할 수 있어요. 하지만, 기본적인 기능만으로는 개발이 불편할 수 있기 때문에 꼭 설치해야 할 확장 프로그램(Extensions)이 있는데요. 이 글에서는 Flutter 앱을 개발할 때 반드시 설치해야 할 VSCode 필수 확장 프로그램을 소개하고, 각각의 기능과 사용법을 쉽게 설명해 드릴게요!1. Flutter & Dart ExtensionFlutter 개발한다면 이건 그냥 무조건 필수입니다! 이 확장 프로그램만 있으면 프로젝트 생성부터 실행, 디버깅까지 한 방에 해결돼요.🔹 주요 기능Flutter Doctor 실행으로 환경 체크코드 자동 완성(Auto-completion) 지원UI 미..

MacBook에서 코딩을 시작하려면 프로그램이 필요해요! 그중에서 VSCode는 정말 좋은 선택이에요. 왜냐하면 가볍고 빠르면서도 강력한 기능이 많거든요. 지난 포스트에서는 VSCode가 왜 좋은지 설명했어요. 이번에는 MacBook에 VSCode를 설치하는 방법을 아주 쉽게 알려드릴게요.1. VSCode 다운로드하는 방법💡 VSCode 다운로드 링크VSCode는 공식 웹사이트에서 무료로 받을 수 있어요. 또는 google에서 "VSCode download" 라고 검색했을 때 나오는 사이트에서 똑같이 받을 수 있어요.💡 VSCode 다운로드하는 단계VSCode 공식 사이트에 들어가면 다음과 같은 페이지가 보여요. 화면에서 "Download for Mac" 버튼을 찾아 눌러주세요. 다운로드 버튼을 누르..

안녕하세요 여러분! 오늘은 제가 왜 항상 VSCode를 사용하는지, 그리고 VSCode가 다른 IDE와 비교했을 때 어떤 장점과 단점이 있는지 편하게 이야기해보려고 해요.VSCode가 뭐지?VSCode는 마이크로소프트에서 개발한 가볍고 빠른 코드 에디터에요. 다양한 프로그래밍 언어와 풍부한 확장 기능을 지원해, 개발자들이 자신만의 환경을 쉽게 구성할 수 있어요. 내장된 Git 연동과 디버깅 기능 덕분에 작업 효율이 크게 향상되고, 직관적인 인터페이스 덕분에 초보자부터 전문가까지 모두에게 인기 있는 도구랍니다.저는 React 개발을 하기 시작하면서 2020년도에 처음 VSCode를 사용해봤어요. 그 전에는 Java 개발을 위해서 Eclipse도 사용했었고, 삼성전자에서 앱을 개발할 때에는 Android S..

Flutter는 구글이 개발한 오픈소스 UI 툴킷으로, 단일 코드베이스로 모바일, 웹, 데스크탑 등 다양한 플랫폼에서 네이티브 앱 수준의 성능을 구현할 수 있는 개발 도구에요. 이 글에서는 Flutter의 개념부터 설치 및 개발 환경 설정까지, 초보자도 쉽게 따라할 수 있도록 단계별로 상세하게 알아볼게요.1. Flutter란 무엇일까요?Flutter는 Google이 만든 오픈소스 UI 툴킷이에요. 한 번의 코드 작성으로 모바일, 웹, 데스크탑 등 다양한 플랫폼의 앱을 만들 수 있는 크로스 플랫폼 솔루션인데요, 대표적인 특징은 핫 리로드(Hot Reload) 기능 덕분에 코드 수정 후 바로 결과를 확인할 수 있다는 점이에요. 또, Flutter는 Dart 언어를 사용해서 깔끔하고 배우기 쉬워요. 많은 분들..