“Hello, World!" 거긴 어떤월드냐?

Flutter에서 Google Maps SDK를 사용하여 Android와 iOS 앱에서 구글 지도를 표시하는 방법을 정리했습니다.이 글에서는 Google Maps API Key 설정 방법과 실제 구글 지도를 띄우는 예제를 다룹니다. ✅ 1. Google Maps API 활성화 및 API Key 생성 Google Maps를 사용하려면 먼저 Google Cloud Console에서 API를 활성화하고 API Key를 생성해야 합니다. 1️⃣ Google Cloud Console에서 API 활성화1. Google Cloud Console에 접속2. 프로젝트 선택 또는 새 프로젝트 생성3. API 및 서비스 → 사용자 인증 정보 → 사용자 인증 정보 만들기 → API 키 클릭4. 생성된 API 키 복사 (AIz..

1. 개요Spring Boot에서 Thymeleaf를 사용하여 화면을 구성할 때, 사용자 핸드폰 번호를 01012345678 형식으로 저장한 후 화면에 010-1234-5678처럼 변환하여 출력하는 방법을 알아보겠습니다.한국의 핸드폰 번호는 다음과 같은 패턴을 따릅니다:맨 앞자리(3자리): 010, 011, 016 등가운데 자리(3~4자리): 123, 1234마지막 자리(4자리): 5678이를 고려하여 타임리프에서 쉽게 변환하는 방법을 구현해 보겠습니다.2. 타임리프에서 핸드폰 번호 변환하는 방법타임리프에서 문자열을 변환하기 위해서는 #strings 유틸리티 또는 커스텀 유틸리티 함수를 사용할 수 있습니다.2.1 타임리프 내장 유틸리티 사용 (#strings)#strings.substring을 이용하여 ..

Spring Boot를 사용하여 웹 애플리케이션을 개발할 때, Thymeleaf를 템플릿 엔진으로 활용하는 경우가 많습니다. 특히 Map 형태의 데이터를 Thymeleaf에서 표시하는 방법을 이해하면 다양한 형태의 데이터를 유연하게 다룰 수 있습니다. 이번 글에서는 Map을 활용하여 데이터를 화면에 출력하는 여러 가지 방법을 살펴보겠습니다.1. 기본 Map 데이터 활용하기가장 기본적인 형태의 Map을 Thymeleaf에서 사용하는 방법을 살펴보겠습니다.Controller 코드@Controller@RequestMapping("/map")public class MapController { @GetMapping("/basic") public String basicMap(Model model) { ..

Flutter에서 레이아웃을 구성할 때 Expanded 위젯은 Row, Column, Flex 위젯 내에서 자식 위젯들이 남은 공간을 차지하도록 확장할 수 있게 해주는 중요한 위젯입니다. Expanded는 주어진 공간을 유연하게 배분하며, 레이아웃을 동적으로 조정하는 데 유용합니다.Expanded 위젯이란?Expanded 위젯은 부모 위젯(Row, Column, Flex)이 갖고 있는 남은 공간을 차지하도록 자식 위젯을 확장하는 역할을 합니다. 즉, Expanded로 감싼 위젯은 가능한 최대 크기로 확장되며, 여러 개의 Expanded 위젯이 있을 경우 비율을 조정할 수도 있습니다.📌 주요 특징Row, Column, Flex 위젯 내에서만 사용할 수 있음자식 위젯이 가용 가능한 공간을 최대로 차지하도록..

Flutter Hive_ce & Hive_ce_flutter 소개 및 사용법1. Hive_ce & Hive_ce_flutter란?hive_ce와 hive_ce_flutter는 Flutter에서 사용 가능한 경량 로컬 데이터베이스입니다.특히 Hive_ce는 NoSQL 방식으로 데이터를 저장하며, 빠른 속도와 쉬운 사용법이 장점입니다.📌 주요 특징:Key-Value 기반의 로컬 데이터 저장SQL 없이 사용 가능 (NoSQL)Flutter와 완벽한 호환 (hive_ce_flutter 사용)파일 기반 스토리지 (데이터가 파일로 저장됨)안드로이드 & iOS 지원Flutter 웹에서도 사용 가능2. Hive_ce & Hive_ce_flutter 설치flutter pub add hive_ce hive_ce_flut..

Flutter에서 화면 아래에서 위로 올라오는 팝업을 만들려면 showModalBottomSheet 또는 showBottomSheet을 사용하면 됩니다.1️⃣ showModalBottomSheet (모달 바텀시트)• 화면을 덮는 반투명 배경이 추가됨 (다른 영역 클릭 시 닫힘)• 닫을 때는 Navigator.pop(context) 사용 🔧 예제: showModalBottomSheet 사용import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext..

1️⃣ page_object.dart 파일 생성 및 버튼 클래스 추가 프로젝트 구조 예시:lib/ ├── main.dart ├── pages/ │ ├── home_page.dart (버튼을 사용하는 페이지) │ ├── login_page.dart (버튼을 사용하는 페이지) ├── widgets/ │ ├── page_object.dart (공통 버튼 정의) 🔧 lib/widgets/page_object.dartimport 'package:flutter/material.dart';/// 구글 로그인 버튼class GoogleSignInBtn extends StatelessWidget { final VoidCallback onPressed; const GoogleSignInBtn({s..

1️⃣ assets 폴더에 이미지 추가1. 프로젝트의 assets 폴더에 다운로드한 PNG 이미지를 넣습니다.• 예: assets/images/google_signin_button.png2. pubspec.yaml에서 assets 경로를 추가합니다. ✅ pubspec.yaml 수정flutter: assets: - assets/images/google_signin_button.png ⚠️ 주의:• assets: 들여쓰기(공백 2칸) 유지• flutter clean && flutter pub get 실행하여 변경 사항 반영2️⃣ 구글 로그인 버튼 추가 🔧 방법 1: GestureDetector로 터치 이벤트 감지import 'package:flutter/material.dart';class Goog..

ThemeData({ Brightness? brightness, // 앱의 밝기 (light 또는 dark) MaterialColor? primarySwatch, // 기본 색상 팔레트 Color? primaryColor, // 기본 색상 Color? primaryColorLight, // 밝은 기본 색상 Color? primaryColorDark, // 어두운 기본 색상 Color? accentColor, // 강조 색상 (deprecated, 대신 colorScheme.secondary 사용) Color? scaffoldBackgroundColor, // Scaffold의 배경 색상 Color? backgroundColor, // 배경 색상 Color? canvasColor, // Material 위..

Flutter에서 상태 관리는 필수적인 요소이며, 다양한 방법이 존재합니다. 그중에서도 BLoC (Business Logic Component) 패턴은 명확한 구조와 유지보수성을 제공하는 강력한 패턴입니다. 이번 글에서는 BLoC 패턴이 무엇인지, 어떻게 동작하는지, 그리고 실습 예제를 통해 사용법을 익혀보겠습니다.1. BLoC 패턴이란?BLoC 패턴은 Flutter에서 상태를 관리하는 방법 중 하나로, 비즈니스 로직을 UI와 분리하여 관리합니다. flutter_bloc 패키지를 활용하면 간단하게 상태를 관리할 수 있으며, 이벤트(Event)와 상태(State)의 흐름을 명확하게 정의할 수 있습니다.BLoC 패턴의 핵심 개념Event (이벤트): 사용자 입력이나 특정 동작에 의해 발생하는 트리거 (예: ..