티스토리

짱구

검색하기

블로그 홈

짱구

hitang.tistory.com/m

짱구러버 님의 블로그입니다.

구독자: 2

방명록 방문하기

728x90

주요 글 목록

[Node] firebase 연동해서 fcm 사용하기 fcm 을 처음에는 코프링으로 구현하다가, App Check 가 스프링에서는 구현이 안된다는 이슈로 node 로 다시 구현하기 시작했다. 내가 구현한 기능은 조금 많고 복잡하다. 내가 실력이 부족한건지, 아님 공통으로 줄일 수 있는데, 내가 못줄인것인지,, 이렇게 작성해놓으면 , 미래의 내가 보고 깨달음을 주겠지! 참고로 이게시글에는 백엔드 관련해서만 작성하겠다! 왜냐, node 를 하면서 오랜만에 백엔드 비즈니스 로직을 작성을 했고, 그 흐름을 잊어버리지 않기 위함이다. 1. 데이터베이스는 fcm 예약 DB, fcm 히스토리 DB 2개 존재한다. 토큰, 주제 의 전송방식으로 즉시 전송과 예약 전송 두가지 메소드가 존재한다. 즉시전송! 즉시전송은 바로 fcm 이 전송되기때문에, 전송 성공시 히스토리 DB.. 공감수 0 댓글수 0 2023. 9. 12.
[Flutter - study] 애니메이션 공부 애니메이션을 사용하는 이유 모바일에서 애니메이션을 추가하는 이유 깔끔 멋진 인터페이스는 더이상 사용자의 관심을 이끌지 못한다. 이에 대한 솔루션이다. 사용자가 통제감을 느끼는지 확인해야한다. 그들의 행동이 영향을 끼친다는 것을 알려줘야하고, 앱은 항상 사용자의 행동에 따른 피드백을 바로 보내줘야한다. 이런 방식으로 사용자가 당신의 앱 사용법을 빠르게 배우고, 앞으로 방문할 횟수가 높아질 것이다. Flutter 에서의 Animation 은 매력이 있다. Flutter 는 시각적으로 효율적인 애니메이션을 만드는 완벽한 프레임워크이다. 유일한 한계는 나의 상상력 정도랄까..?? Flutter 의 Animation 종류 💡 Flutter 의 Animation 에는 두가지 종류가 있다. 정의와 차이점 알아보자! .. 공감수 0 댓글수 0 2023. 9. 1.
같은 포트가 실행중일 때, 포트 죽이기 스프링 프로젝트를 실행하는데 두개의 프로젝트를 동시에 실행하거나, 하나의 프로젝트를 종료했음에도 Port 번호가 이미 사용되어있다고 한다면, 그냥 터미널에서 해당 포트 번호를 종료시켜주면 된다. 에러 Web server failed to start. Port 8080 was already in use. 1. 해당 포트 실행 목록 확인하기! lsof -i tcp:8080 이렇게 하면 8080 은 물론이고 다른 포트번호로 실행되어있는 서버 목록도 리스트로 쫙 출력된다. 2. 해당 포트 죽이기 종료하고 싶은 포트의 PID 를 기억하고 넣어주면 된다. sudo kill -포트번호 PID // sudo kill -1234 PID 3. 완료 Mac 유저라면 비밀번호를 입력하라는 라인이 출력되고 해당 맥북의 비밀 번.. 공감수 0 댓글수 0 2023. 9. 1.
LongPressed, onPressed 버튼 영역 클릭효과 없애기 개발을 진행하다보면, Button() 위젯, Inkwell() 위젯을 사용하는데, 버튼의 영역을 없애고 싶을떄가 있다. 그럴떄 사용하는 방법! 부분적으로 위젯의 테마를 수정하고 싶을때, 해당하는 자식 위젯에 적용해주면 된다. Theme( data: ThemeData( splashColor: Colors.transparent, highlightColor: Colors.transparent, ), child: Button( onPressed: () {}, child: Container(), ), ); 전체 위젯의 테마를 수정하고 싶을때, 최상단인 스크린 위젯이나, main.dart 에 위젯을 적용준다. // main.dart MaterialApp( theme: ThemeData( spalshColor: Co.. 공감수 0 댓글수 0 2023. 8. 14.
FirestoreQueryBuilder 사용하기 참조 FirestoreQueryBuilder class - firestore library - Dart API FirestoreQueryBuilder class Listens to a query and paginates the result in a way that is compatible with infinite scroll views, such as ListView or GridView. FirestoreQueryBuilder will subscribe to the query and obtain the first pageSize items (10 by defau pub.dev FirestoreQueryBuilder 는 개고생을 하고 얼마전에 발견했다. 파이어스토어의 데이터를 futureBuilder 로.. 공감수 0 댓글수 0 2023. 8. 10.
Flutter가 대세다!! 중고나라에서도 플러터 사용한다!! 미디엄 블로그를 즐겨보는데, 중고나라에서도 22년 8월 29일 플러터 프로젝트로 출시완료했다는 글을 읽었다. 대부분의 기업들이 앱을 출시할때, 안드로이드와 IOS 를 둘다 개발해서 출시를 하고, 각각의 개발자들을 두고 있는 것을 알고 있다. 나 역시도 전 회사에서 IOS 개발자와 Android 개발자 한명씩 있었다. 하지만 이제는 트렌드에 따라 하나의 소스로 여러개의 플랫폼을 돌아가게끔 하는 dart 언어의 기반인 Flutter 를 선택한다. 중고나라도 이 점에 매우 매력적으로 느껴서 개발을 진행한 것으로 보인다. 확실히 매력적이다. "One-source UI software Devkit" 이다. 하나의 소스로 여러 플랫폼의 UI 를 그리는 것 만큼, 여러 플랫폼을 신경쓰지 않고, 하나에만 집중이 가능하.. 공감수 1 댓글수 1 2023. 8. 8.
flutter 라이트, 다크모드 만들기 프로젝트에 추가용으로 간단하게 다크모드 예제를 만들어보겠습니다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); static final ValueNotifier themeNotifier = ValueNotifier(ThemeMode.light); @override Widget build(BuildContext context) { return ValueListenableBuilder( valueListenable: themeNotifier, builder: (_, ThemeMode currentMode.. 공감수 0 댓글수 0 2023. 8. 8.
가로모드 세로모드에 맞게 위젯 설정하기 가로모드와 세로모드에 맞게 위젯을 설정하는 방법을 적어보겠다. Scaffold( body: SizedBox( height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, child: OrientationBuilder( builder: (context, layout) { if (layout == Orientation.landscape) { return const Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text('H'), Text('M'), Text('S'), ].. 공감수 0 댓글수 0 2023. 8. 1.
[Error] Execution failed for task ':app:checkDebugDuplicateClasses'. 플러터를 업그레이드 하면서 안드로이드 시뮬레이터를 실행하려는데, 갑자기 처음 보는 에러가 발생했다... 아직은 해결 못하는 점... 에러가 2가지 인데, 클래스가 중복되는 이슈와 gradle 버전이 프로젝트와 맞지 않다는 이슈이다. 해결을 하고 해결방법을 작성해보도록 하겠다. FAILURE: Build completed with 2 failures. 1: Task failed with an exception. ----------- * What went wrong: Execution failed for task ':app:checkDebugDuplicateClasses'. > A failure occurred while executing com.android.build.gradle.internal.task.. 공감수 0 댓글수 0 2023. 7. 20.
Widget Build 후 콜백 함수!! 위젯이 빌드되고 난 후 콜백함수를 받고 싶을 떄가 있다. 나는 위젯이 빌드되고 나서 로그인 여부를 판별해 페이지 이동 시켜주는 코드를 본 적이 있다. 다른 방법으로 사용되는 부분이 있을지 한번 생각해보고 찾아보겠다. WidgetsBinding.instance.addPostFrameCallback((timeStamp) { afterBuild(timeStamp, context); }); void afterBuild(Duration timeStamp, BuildContext context) { } 공감수 0 댓글수 0 2023. 7. 18.
함수 작동 시간 체크 면접을 볼때 어떤 사람이 자랑스럽게 A 로직이 1초가 걸리던 로직을 0.5초까지 로직 시간을 줄인 경험이 있다라고 대답하는 면접자를 본 경험이 있다. 개발을 진행하다보니 함수가 얼마나 빨리 로직을 돌고 결과물을 리턴하는 것이 매우 중요해졌다. 왜냐하면 이 로직의 시간이 길어질수록, 사용하는 클라이언트는 그만큼 기다려야하고, 앱, 웹을 탈출하는 요소를 더욱 더 높이기 떄문이다. 우리의 앱과 웹을 많은 사람들이 애용하게 하려면, 체류시간을 늘리기는 목표로 잡아야한다. 체류시간을 높이기 위한 방법 중 하나가 유저의 불편요소를 없애는 것이다. 아니면 다른 방법으로 불편하지 않게 대체 해주면 된다. 부드럽게 유저 편의성을 높이면, 자연스럽게 앱을 사용하는데 편안함을 느낄 것이다. 그리고 그 후에는 컨텐츠의 양과 .. 공감수 0 댓글수 0 2023. 7. 6.
데이터 직렬화, 역직렬화 RestAPI 로 데이터 통신을 자주하는 요즘 json 문자열로 응답을 보내고 받는것이 요즘 추세이다. 그렇기 때문에 json 문자열을 잘 다루는 것이 중요하다. 여기서 중요한 개념이 직렬화와 역직렬화이다. 직렬화 : 언어에서 사용되는 Object 또는 Data 를 다른 시스템에서도 사용할 수 있도록 바이트 스트림형태로 연속적인 데이터로 변환하는 포맷 기술이다. 역직렬화는 직렬화의 반대의미이다. Flutter 에서도 친절하게 json 데이터를 직렬화와 역직렬화하는 방법을 알려준다. Flutter 는 클래스를 별도로 만들어서 매핑을 할수있게 해준다. front 의 입장에서는 백엔드의 api 의 응답값인, response.data 로 데이터를 출력해주기 위해 사용한다. // 어떤 api 의 response .. 공감수 0 댓글수 0 2023. 7. 5.
Interceptor(인터셉터) 프론트에서 http 통신을 하면 api 요청전, 후 과정에 처리과정을 넣고 싶을때가 있고, 그렇게 해야하는 경우가 대단히 많다. 예를 들면 로그인된 회원만 볼수 있는 화면에 페이지를 보여준다거나 할때! api 를 요청할때 가로채서 해당 처리과정을 실행하고 요청후에도 가로채서 해당 처리과정을 실행하면 된다. Express 를 공부하면서 interceptor 를 사용해보려고 한다. 전체 적용 const express = require('express'); const app = express(); app.use(function(req, res, next) { // 인터셉터 역할 next(); }); 개별 적용 const express = require('express'); const router = expre.. 공감수 0 댓글수 0 2023. 7. 4.
Node - Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client 에러 발생 Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client 서버가 클라이언트에게 두개 이상의 응답을 보내려고 할떄 발생하는 오류이다. 그러니 response 주는 부분을 확인바란다. 나 같은 경우도 이렇게 reponse 에 두개를 보내서 이런 문제가 발생하는것이다. const express = require('express'); const app = express(); const port = process.env.PORT || 3000; app.get('/', (req, res) => { res.json({ success: true, }); res.send('Hello Wolrd!'); }); 지워주면 .. 공감수 0 댓글수 0 2023. 7. 3.
Node 구성 설계 로직 설명 폴더 구조 src ㄴ- app.js - 앱 시작점 ㄴ- api - Express 라우트 컨트롤(app 의 모든 endpoint) ㄴ- config - 환경변수 및 구성 관련 설정 ㄴ- jobs - agenda.js 를 위한 Jobs 정의 ㄴ- loaders - 시작 프로세스 모델 분리 ㄴ- models - 데이터베이스 모델 ㄴ- services - 비즈니스 로직 ㄴ- subscrivers - 이벤트 핸들러(비동기) ㄴ- types - 타입 정의 파일 3계층 설계 관심사 분리 원칙(principle of separation of concerns) 적용을 위한 비즈니스로직을 node.js 의 api routes 와 분리해준다. Controller 에는 비즈니스 로직을 넣지 않는다! 바로 express.js .. 공감수 0 댓글수 0 2023. 7. 3.
[프로젝트] 미세먼지 앱 들어가기 앞서... 1. 주의 깊게 봐야하는 점... CustomScrollView 위젯 실전 사용! (스크롤 열였을때, 안열었을떄 UI 다르게) Drawer 위젯 사용 (지역선택시 열리고 선택시 닫히게) Dio 로 HTTP 요청 (서버에서 외부데이터 가져오기) Hive 로 NOSQL 데이터 관리 (drift 를 사용해서 SQLdatabase 를 사용했지만, Hive 로 NOSQL(캐싱, 데이터저장하는법)) 오프라인 지원 (인터넷 안되는 상황, 기존 데이터를 보여주는 방법 간단하게 접근!) 정부 오픈 API 알아보기 본문으로... 1. 정부 api 승인받기! 한국환경공단_에어코리아_대기오염통계 현황 대기오염 통계 정보를 조회하기 위한 서비스로 각 측정소별 농도 정보와 기간별 통계수치 정보를 조회할 수 있.. 공감수 0 댓글수 0 2022. 12. 29.
[이론] Scrollable Widgets 들어가기 앞서... 스크롤이 가능한 위젯에 대해 공부하겠다. SingleChildScrollView ListView GridView ReorderableListView CustomScrollView - SliverList CustomScrollView - SliverGrid CustomScrollView - SliverAppBar CustomScrollView - SliverPersistentHeader Scrollbar RefreshIndicator 본문으로... 1. SingChildScrollView 공부! import 'package:flutter/material.dart'; import 'package:single_child_scroll_view_study/constant/colors.dart.. 공감수 0 댓글수 0 2022. 12. 27.
[이론] WidgetsFlutterBinding.ensureInitialized(); 란? 상황 TableCalneder 패키지를 사용해서, 캘린더를 출력을 하고 있었고, 타이틀에 제목을 한글로 번역시켜주기 위한 intl 패키지로 언어 변경을 하려는 상황이었다. import 'package:intl/date_symbol_data_local.dart'; void main() async { // 여기! WidgetsFlutterBinding.ensureInitialized(); // intl 을 runApp() 하기전에 초기화 시켜주는 함수 await initializeDateFormatting(); runApp( MaterialApp( theme: ThemeData(fontFamily: 'NotoSans'), home: HomeScreen(), ), ); } main 함수에서 runApp() 이.. 공감수 0 댓글수 0 2022. 12. 22.
[프로젝트] 일정 스케줄러 들어가기 앞서... 1. 주요로 봐야하는 점들... SQLite 를 이용한 테이터 관리 간단한 SQL 문법 Drift 패키지(SQLite ORM) Table Calendar 패키지 (캘린더) Getlt 패키지 (Dependency Injection) Spinkit 패키지 (이쁜 로딩 위젯) Intl 패키지(다국어화) TextField (글자 인풋받기) 본문으로... 1. 세팅! // 실제 출시 시에만 dependencies: table_calendar: ^3.0.3 intl: ^0.17.0 drift: ^1.4.0 sqlite3_flutter_libs: ^0.5.0 path_provider: ^2.0.0 path: ^1.8.1 // 개발 시에만(출시하면 제외된다.) dev_dependencies: dri.. 공감수 0 댓글수 0 2022. 12. 22.
사느냐 vs 만드냐 개인 프로젝트, 회사 업무 중 프로젝트의 규모에 따라 하나의 기능을 추가하는데 고민하는 부분이 있다. 달력이라고 예를 든다면, 달력을 직접 만드냐, 아님 잘 되어있는 유료 달력을 사느냐에 대한 것으로 접근하면 생각하기 쉽다. 그것에 대한 차이를 적어놨으니 한번 읽어보자! Buy 산다! 초기 금전적 비용 필요 서비스 직접 유지, 보수할 필요 없다. 서비스 직접적으로 개발 하지 않으니 연동하는데만 시간이 필요하다. 기회 비용이 없다. 가져다 쓰면 되니, 다른 정말 중요한 기능에 더욱 더 집중 가능하다. Build 만든다! 개발자 고용, 서비스 제작해야하므로 월급이 많이 나간다. 지속적으로 버그 잡고 트래픽이 늘수록 서버를 증설 하는 등 유지 보수 필요 전체적인 서비스를 만드는데 많은 시간이 걸림 주요기능이 .. 공감수 0 댓글수 0 2022. 12. 22.
[이론] FutureBuilder 와 StreamBuilder 들어가기 앞서... 비동기 통신을 하면서 FutureBuilder 와 StreamBuilder 를 사용하게되는데, 무엇인지와 사용법을 알아보자! 본문으로... FutureBuilder 배우기 1. 기본 세팅! import 'dart:math'; import 'package:flutter/material.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({Key? key}) : super(key: key); @override State createState() => _HomeScreenState(); } class _HomeScreenState extends State { final textStyle = TextStyle( fontSize.. 공감수 0 댓글수 0 2022. 12. 20.
[에러] 갑자기 멀티덱스를 활성화라고 에러가 뜬다면? 상황 google_map_flutter 와 Geolocator 플러그인을 사용해서 유저의 위치 서비스 권한을 요청하려던 개발을 진행을 하다가 앱 시작이 잘 되었던 프로젝트가 갑자기 ERROR:D8 이라는 에러를 출력한다면? 에러내용 더보기 ERROR:D8: Cannot fit requested classes in a single dex file (# methods: 70980 > 65536) com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives: The number of method references in a .dex file cannot exceed 64K. Learn how to resolve th.. 공감수 0 댓글수 4 2022. 12. 16.
[프로젝트] - 출근 기록 들어가기 앞서... 구글 맵과 geolocator 플러그인을 통해서 회사의 위치와 나의 위치를 알고 어떤 조건에 맞으면 출근이 가능하게끔 하는 프로젝트이다. 본문으로... 1. 기본 세팅! geolocator | Flutter Package Geolocation plugin for Flutter. This plugin provides a cross-platform (iOS, Android) API for generic location (GPS etc.) functions. pub.dev google_maps_flutter | Flutter Package A Flutter plugin for integrating Google Maps in iOS and Android applications. pub.dev.. 공감수 0 댓글수 0 2022. 12. 16.
[프로젝트] 영상플레이어 (4) 동영상 위 버튼 올리기 들어가기 앞서... 동영상위의 버튼 플레이 버튼을 만들고 컨트롤 해보자! 본문으로... 1. 비디오 플레이어를 원래 사이즈로 만들까? @override Widget build(BuildContext context) { if (videoController == null) { return CircularProgressIndicator(); } return AspectRatio( aspectRatio: videoController!.value.aspectRatio, child: Stack( children: [ VideoPlayer(videoController!), _Controls(), ], )); } } class _Controls extends StatelessWidget { const _Controls.. 공감수 0 댓글수 2 2022. 12. 15.
[프로젝트] 영상플레이어 (3) ImagePicker 사용 들어가기 앞서... 비디오 플레이어 사용법을 알아 볼 것 이다. 본문으로... 1. custom_video_player.dart import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart'; import 'package:video_player/video_player.dart'; class CustomVideoPlayer extends StatefulWidget { final XFile video; const CustomVideoPlayer({Key? key, required this.video}) : super(key: key); @override State createState() => _CustomVide.. 공감수 0 댓글수 0 2022. 12. 14.
[프로젝트] 영상플레이어 (2) 조건에 따른 다른 위젯 렌더링 들어가기 앞서... 비디오가 담기지 않았을때와 담겼을떄의 뷰를 조건부로 랜더링 하겠다. 본문으로... 1. 코드 정리! 1) body 함수로 뺴자! Scaffold( body: renderEmpty() ); Widget renderEmpty() { return Container( width: MediaQuery.of(context).size.width, decoration: getBoxDecoration(), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ _Logo(), SizedBox( height: 30.0, ), _AppName(), ], ), ); } 2) 로고를 클릭하면 이미지를 선택하게! // 함수 파라미터로 넘.. 공감수 0 댓글수 0 2022. 12. 14.
[이슈] - 이미지가 출력이 안될때! pubspec.yaml 파일에 이미지 경로를 잘 입력을 했는데도 이미지가 안나오는 경우가 있다. 터미널에뜨는 이슈 사항 변경 전 Image.asset('asset/img/logo.png') 변경 후 Image(image: AssetImage("asset/img/logo.png") 체크사항 flutter fub get 후에 앱 재시작하기 디렉토리 구조와 pubspec.yaml 파일에 작성법이 알맞게 작성이 되었는지 확인하기 출처 https://docs.flutter.dev/development/ui/assets-and-images Adding assets and images How to use images (and other assets) in your Flutter app. docs.flutter.dev 공감수 0 댓글수 0 2022. 12. 14.
[프로젝트] 영상플레이어 (1) HomeScreen 구현하기 들어가기 앞서... 영상을 재생할 수 있는 프로그램을 만들것이다. 1. 주의 깊게 봐야하는 점... video_player 플러그인 image_picker 플러그인 Stack 위젯 AspectRatio 위젯 2. 간단한 설명으로는... image_picker 핸드폰에 있는 비디오선택 후 video_player 비디오 재생 Stack 화면을 제작하고, AspectRatio 은 비율대로 childWidget 을 조절할것이다. 본문으로... 1. 기본 세팅 ! 페이지 세팅 및 asset 폴더 경로 설정 1) 로고와 비디오 3개 정도 준비하자! 2) 페이지 세팅 및 asset 폴더 경로 설정해주자! 로고 파일은 assets 경로 설정을 해주고, 비디오 같은 경우 다르게 설정을 해줄것이다. // pubsepc.y.. 공감수 0 댓글수 0 2022. 12. 13.
[프로젝트] 랜덤숫자 생성 (2) 완성 들어가기 앞서... Slider 를 사용하고, 상태값을 저장하고 다른 페이지에 상태값을 전달하는 방법을 배울것이다. 본문으로... 1. Slider 위젯 사용해보자! 1) 숫자랑, 버튼 UI 작업 children: [ Expanded( child: Row( children: 10000 .toString() .split('') .map((e) => Image.asset( 'asset/img/random_number/$e.png', width: 50.0, height: 70.0, )) .toList(), ), ), ElevatedButton( onPressed: () {}, child: Text('저장!'), style: ElevatedButton.styleFrom(backgroundColor: RED_CO.. 공감수 0 댓글수 1 2022. 12. 8.
Optional Function Paramters Dart 에는 Optional Parameters 에는 2가지 방식이 있다. Optional Parameters 에는 주어진 함수를 호출 할떄 변수를 지정할 필요가 없는 매개변수이다. Optional Parameters 는 required parameters 후에 선언 되어야한다. 기본값을 사용할 수 있고, 함수 호출시 변수 지정하지 않을 경우 사용된다. Positinal Parameters in Dart Square brackets [] 는 매개변수를 지정하는데 사용된다. readFile(String name, [String mode, String charset = 'utf-8']) { ... } name 값은 필수 이고, mode, charsetd 은 선택적 이다. charset은 지정안하면, 기본값.. 공감수 0 댓글수 2 2022. 12. 8.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.