흑백 개발자

Firebase에 더미 데이터 업로드 과정1. 프로젝트 구조 설계ProductModel 설계class ProductModel { final String productId; // 제품 고유 ID final String name; // 제품명 final String brandName; // 브랜드명 final List productImageList; // 제품 이미지 URL 리스트 final List descriptionImageList; // 제품 설명 이미지 URL 리스트 final String price; // 가격 final int discountPercent; // 할인율 final String c..

실제 구현 순서는 1위젯 분리하고, 2더미데이터로 끌어다 쓰고, 3파이어베이스 끌어오고 , 4리펙토링으로 블럭 씌웠다. 실제 장바구니 구현 순서1단계: 기본 UI 구현 및 위젯 분리1.1 기본 화면 구성 (shopping_cart_screen.dart)class ShoppingCartScreen extends StatefulWidget { @override _ShoppingCartScreenState createState() => _ShoppingCartScreenState();}class _ShoppingCartScreenState extends State with SingleTickerProviderStateMixin { late TabController _tabController; b..

1. UI 를 그리고 위젯 분리한다2. 더미데이터를 가져와서 확인한다.3. 파이어베이스에서 일단 상품 5개 가져온다 - 이때 필요한 부분만 블록 쓸 수 있다 4. 파이어베이스에서 조건에 따라 가져오도록 로직 짠다 개발환경이 들록으로 했다면 자동으로 블록 조금 씌워준다5. 리펙토링 해달라고 하면 블럭 적용해준다

좋아요를 하는데 상품 같은거 끌어와도 상품간의 좋아요가 달라서해결해야 했다 이 문제는 각 위젯이 독립적으로 상태를 관리하고 있기 때문입니다. 해결 방법은 크게 두 가지가 있습니다:Stream을 사용한 실시간 업데이트:// product_repository.dartclass ProductRepository { Stream> streamProducts() { return _firestore .collection('products') .snapshots() .map((snapshot) => snapshot.docs .map((doc) => ProductModel.fromFirestore(doc)) .toList()); }}/..

우선 더미데이터로 했다그 후에 연동함나중에 좀 더 세밀히 파이어베이스 연동할 거 같다. 1. 목표 설정: Firebase Firestore와 연동하여 히스토리 데이터 표시사용자가 본 제품(히스토리) 정보를 Firestore에서 가져와 앱의 UI에 표시하고, 사용자는 최근 본 제품과 좋아요한 제품을 구분해 볼 수 있도록 구현하는 것이 목표였습니다.2. 데이터 모델링: Firestore의 ProductModel과 UI에서 사용될 HistoryItem 정의ProductModel: Firestore의 products 컬렉션에서 데이터를 가져오기 위한 모델로, 제품의 다양한 정보를 포함하고 있습니다. (productId, name, price, isBest, rating 등).HistoryItem: UI에 표시할..

큰순서를 일단은 1. 더미데이터 만들어서 거기서 끌어온다. 2. 파이어베이스에서 조건 상관없이 일단 끌어온다3. 나중에 조건 맞춰서 거기서 끌어온다 Firebase Firestore에서 데이터를 가져오는 과정과 개념에 대해 단계별로 설명드릴게요. 이 설명을 통해, Firestore 데이터를 앱에서 가져오고 사용하는 과정을 이해할 수 있을 거예요.1. Firebase Firestore 설정 개념먼저, Firebase Firestore는 Google의 클라우드 기반 NoSQL 데이터베이스입니다. 이 데이터베이스에 저장된 데이터를 앱에서 실시간으로 읽어오거나 업데이트할 수 있어요.Flutter 앱이 Firestore에서 데이터를 가져오려면 Firebase Firestore를 초기화하고 연결해야 합니다. Fir..

프로젝트 개요소개올리브영 모바일 앱을 클론 코딩한 프로젝트Flutter와 Firebase를 활용한 크로스 플랫폼 앱 개발BLoC 패턴을 적용한 상태 관리 구현반응형 디자인으로 다양한 디바이스 지원기술 스택Frontend: Flutter & DartBackend: Firebase상태관리: BLoC Pattern데이터베이스: Cloud Firestore인증: Firebase Authentication스토리지: Firebase Storage주요 기능 구현1. 아키텍처 설계// 프로젝트 구조lib/ ├── blocs/ # 상태 관리 ├── models/ # 데이터 모델 ├── repositories/ # 데이터 처리 ├── screens/ # UI 화면 ├..

올리브영 스타일 앱의 히스토리 화면 구현 과정을 정리해드리겠습니다.# 올리브영 스타일 앱 - 히스토리 화면 구현하기## 1. 프로젝트 개요- **목적**: 올리브영 앱의 히스토리(최근 본/좋아요) 기능 구현- **주요 기능**: - 최근 본 상품과 좋아요한 상품을 탭으로 구분하여 표시 - 상품 좋아요/취소 기능 - 편집 모드를 통한 상품 삭제 기능 - 전체 삭제 기능- **사용 기술**: Flutter, Bloc Pattern, Firebase## 2. 프로젝트 구조```plaintextlib/├── blocs/│ └── history/│ ├── history_bloc.dart│ ├── history_event.dart│ └── history_state.dart..

Flutter 반응형 UI 구현하기: ScreenUtil을 활용한 디바이스 대응들어가며Flutter로 앱을 개발하다 보면 다양한 디바이스에 대응해야 하는 상황이 발생합니다. 특히 올리브영과 같은 커머스 앱에서는 상품 이미지, 텍스트 크기, 여백 등이 디바이스 크기에 따라 적절하게 조정되어야 합니다. 이번 포스트에서는 ScreenUtil을 활용한 반응형 UI 구현 과정을 상세히 다뤄보겠습니다.1. ScreenUtil 구현하기1.1 기본 설정먼저 utils 폴더에 screen_util.dart 파일을 생성하고 기본 클래스를 구현합니다.class ScreenUtil { static late MediaQueryData _mediaQueryData; static late double screenWidth; ..

정리 맨날 안했는데 이제 해보자 먼저 잘하는 사람이 폴더 디렉토리 구조 짜서 깃에 올리면 1.클론 주소 복사해서 파일 만들 곳에 깃 배쉬 열고git clone https://github.com/username/repository.git  으로 받아와서 한다 그후에 수정 사항이 있다면git pull origin  으로 끌어온다 2.이제 내 브랜치를 만들자git checkout -b git checkout -b feature/new-feature 이러면 로컬에 내 브랜치가 만들어진다커밋하자git add . git commit -m "작업 내용 설명" 3. 로컬에서 만든 브랜치를 원격 저장소에 푸쉬하려면 다음 명령어를 사용한다git push -u origin git push -u origin feature/n..