조충희의 개발 블로그

VScode로 플러터를 개발하는데 필요한 익스텐션

VScode로 플러터를 개발하는데 필요한 익스텐션 생산성 도구Awesome Flutter Snippets - stless + Tab = StatelessWidget 자동완성 Flutter Widget Snippets - 위젯별 코드 스니펫 제공 Dart Data Class Generator - 모델 클래스 자동 생성코드 품질 관리 - Error Lens - Better Comments - Bracket Pair Colorizer 2 - indent-rainbow (들여쓰기) 개발환경 - Material Icon Theme - Flutter Tree (위젯 트리 시각화) 실무 필수 - GitLens ( Git 히스토리 시각화) ..

VSCode 멀티루트 워크스페이스 - 백엔드/프론트 한번에 보기

VSCode 멀티루트 워크스페이스 (Multi-root Workspace) 를 이용해 풀스택 프로젝트 동시에 작업해보자VSCode의 '멀티루트 워크스페이스' 기능을 사용하면, Spring Boot 백엔드와 Flutter 프론트엔드와 같이 물리적으로 분리된 두 개 이상의 프로젝트를 한꺼번에 작업할 수 있다.단계1. 워크스페이스 생성 및 경로 설정① 상단 메뉴 파일(File) > 작업 영역에 폴더 추가...(Add Folder to Workspace...) 항목을 선택.② 두 번째 프로젝트 폴더(예: markit_place_front)를 선택하여 작업 영역에 추가함.③ 파일(File) > 작업 영역을 다른 이름으로 저장...(Save Workspace As...)을 선택하여, 현재 구성된 작업 영역을 .co..

현존하는 중고거래앱의 기본기능을 구현하고 차별화 지점을 만든다 ◆ 역할분담 1 회원가입 로그인 (1명) (약관? 동의) -> 동의여부 테이블 저장 회원가입시 현재위치로 위치정보 인증 및 저장 2 동네 인증 위치기반 (2명이 같이) 몇키로 반경 api.. 자기 위치를 저장할 수 있게 현재 위치/ 즐찾 위치 3 중고거래 게시판 (1명)상품을 등록하면 위치정보 기록 비회원도 전체/상세 조회 가능 5 커뮤니티 (1명)댓글 좋아요 + 위치정보 비회원도 전체/상세 조회 가능 6 거래관리 판매상태 (거래테이블의 status 칼럼) 4 채팅 (1명)소켓 4-2 알림 SSE 5 뷰(1명) 테이블명_tb pk : id jwt 사용 h2 콘솔 create ◆ 내가 맡게된 부분 백엔드의 회원가입, 로그인, 인증, 예..

파이널프로젝트를 위한 기획안 후보를 3개 추렸다.1) 당근의 클론앱2) 러닝크루를 위한 실시간 지도게임앱3) 유튜브 같이보기 앱이 기획안들에 대해 신우철 망고트리 대표님이 피드백을 주셨다."당근으로 가자. 결국 기업이 원하는 것은 커머스다. 다만 차별화된 컨셉과 BM은 꼭 생각해보자. 솔직히 경찰도둑, 유튜브는 게임회사 같은 곳이 아니면 관심 없을거라고 본다. 다만 경찰도둑처럼 쇼핑에 게이미피케이션을 붙이는 시도는 의미가 있다. 특히 당근과 경찰도둑은 GPS기능이 겹친다. M2E 캐시워크 개념과 비슷한데 참고해보자.유튜브 플랫폼도 화상채팅 메타버스 솔루션으로 발전가능성이 있는데 문제는 당신들이 작업량을 감당할수 있느냐 문제다. 커머스 얘기로 돌아와 요즘은 쇼핑몰을 네이버나 카페24가 다 만들어준다고 하는..

1️⃣ post_write_form.dart 사용자 인터페이스(UI)를 구성하며 제목과 내용을 입력받는 폼을 제공사용자의 입력 데이터를 받아 PostWriteFormNotifier로 전달하는 중간 연결자class PostWriteForm extends ConsumerWidget { final _formKey = GlobalKey(); final _title = TextEditingController(); final _content = TextEditingController(); PostWriteForm({Key? key}) : super(key: key); @override Widget build(BuildContext context, WidgetRef ref) { return Form(..

◆ 모델과 리포지터리의 역할 △ 모델(Model) ① 역할: 서버와 주고받는 데이터의 구조를 정의하는 설계도 역할을 한다. ② 핵심: JSON 데이터를 앱에서 사용할 Dart 객체로 변환하는 역할을 한다. ③ 예시: 서버에서 {"id": 1, "title": "첫 글"}을 보내면, 이 모델을 사용해 Post(id: 1, title: "첫 글") 객체로 만들어 사용한다. △ 리포지터리 (Repository)레포지토리, 레파지토리 등 다양한 표기법이 있는데 국립국어원 외래어표기법에 따르면 리포지터리라고 한다.① 역할: 데이터 통신을 전담하는 관리자 역할을 한다. ② 핵심: - GET, POST와 같은 HTTP 요청 로직을 모두 레포지토리 안에 캡슐화한다. - UI 코드와 서버 통신 로직을 분리하여..

기존의 모노리스 monolith...모든 로직과 상태관리를 하나의 파일에 통합 간단한 앱 빠르게 개발 MVVM 패턴 모델-뷰-뷰모델 소프트웨어의 세 가지 핵심 영역인 데이터, UI, 그리고 그 둘을 연결하는 로직을 분리하는 디자인 패턴이다.관심사의 분리(Separation of Concerns) 를 통해 쉬운 유지보수 독립적인 개발 테스트 용이성...등의 이점을 가져갈 수 있다. 예제) 간단한 카운팅 프로그램 변경import 'package:flutter/material.dart';void main() => runApp(CountApp());class CountApp extends StatelessWidget { const CountApp({super.key}); @override Widget bu..

Flutter 앱에서 가볍고 간단한 데이터를 영구적으로 저장 앱의 개인 메모장 키-값으로 데이터 저장 사용자 경험 크게 향상 비동기(Asynchronous) 프로그래밍 Null Safety와 기본값 설정 사용하는 법shared_preferences: ^2.5.3import 'package:shared_preferences/shared_preferences.dart'; 예제)버튼을 누르면 카운터에 변수 반영저장하면 현재 카운터값이 영구저장영구저장값은 앱 실행시, 새로고침 클릭시 호출삭제를 클릭하면 영구저장값 삭제import 'package:flutter/material.dart';import 'package:shared_preferences/shared_preferences.dart';void main()..

구글 지도 api 써보기 의존성 google_maps_flutter: ^2.12.3 shared_preferences: ^2.5.3 임포트 import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:shared_preferences/shared_preferences.dart'; 안드로이드 세팅 gradle-wrapper.properties distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-all.zip settings.gradle plugins { id "dev.flutter.flutter-plug..

피호출자가 다시 호출자의 메서드를 호출하는 것을 콜백(callback)이라고 하며 그러한 메서드를 콜백 메서드라고 한다. 🤸‍♂️자식 위젯에서 이벤트가 발생했을때 이 사실을 👨‍🦰부모위젯에도 알리려면??이를 가능하게 도와주는 것이 콜백메서드다. 콜백메서드는 실무에서 굉장히 많이 쓰이는 부분이라고 한다. 플러터 프로젝트에서 콜백메서드를 어떻게 연결하는지 알아본다.플러터에서는 주로 생성자를 통해 콜백함수를 연결한다.메서드로 연결하는 방법도 있다. 예제)ParentView라는 부모 위젯은 ChildA / ChildB라는 자식 위젯에게 handleReciever라는 함수를 콜백으로 전달한다. 자식 위젯들은 사용자의 탭 이벤트를 감지해 전달받은 handleReciever 함수를 호출, ParentView의 ..