티스토리

Henry Tutorial

검색하기

블로그 홈

Henry Tutorial

rlg1133.tistory.com/m

https://github.com/Gyeony95

구독자: 15

방명록 방문하기

주요 글 목록

[플러터] Flutter Web 을 디버깅하는 3가지 방법 Flutter는 크로스 플랫폼을 지원하는 프레임워크이며 많은 개발자들이 Andorid, IOS 모바일 앱을 만들기 위해 사용하지만 데스크탑 앱과 웹에서도 꽤 괜찮은 성능으로 동작합니다. 하지만 익숙한 모바일앱과는 달리 플러터를 웹으로 빌드하고 또 그 웹사이트를 모바일앱에서 확인해야 한다고 했을때 어떻게 하면 좋을까요? 아시다시피 Flutter 에는 웹을 렌더링하는 두가지 방식이 존재합니다. 1. HTML : HTML/CSS를 기반으로 위젯 트리를 렌더링2. CanvasKit : Flutter의 기본 렌더링 엔진인 skia와 WebGL을 사용하여 렌더링 이렇게 봤을때 HTML 렌더링을 통해 보통 웹처럼 디버깅 해볼 수 있지 않을까? 하는 생각이 들지만 말만 HTML 렌더링이지 생각보다 쓸만한 디버깅을 하.. 공감수 1 댓글수 0 2024. 9. 8.
[플러터] 관리하기 좋은 다국어 모듈 실무에서 앱을 개발하다보면 외국인을 대상으로 서비스를 운영하기도 합니다. 외국인 클라이언트들에게 한국어를 강요할 수는 없기때문에 우리 개발자들은 정해진 locale 에 따라서 언어를 분기해주어야 하죠 제가 소속된 팀에서는 GetX를 사용하는데 이 상태관리툴에는 기본적으로 다국어를 지원할 수 있끔 기능이 포함되어있습니다. 아래 예시를 보시죠 위 내용은 Getx 패키지 Readme에 작성 되어있는 다국어의 예시입니다.각 국가별 구분을 최상위 key로 가지고 value 로는 같은 하위 key에 다른 하위 value 를 가진 json 형태로 만들어져 있죠그리고 이렇게 정해준 내용들을 가지고 아래와 같은 형태로 사용을 하게 되는겁니다.Text('title'.tr); 하지만 위와 같은 방식으로 사용하게 되면 .. 공감수 1 댓글수 0 2024. 7. 2.
시뮬레이티드 어닐링(Simulated Annealing) 알고리즘으로 대학원생 친구 구원해주기 약 2달 전쯤 친구들이 모여있는 단톡방에서 포스텍 박사과정을 진행중인 친구가 여느때와 같이 우는소리를 하기 시작했습니다. 얘기를 들어보니 자기가 하는 연구가 대충 단백질 만드는거라는데 만들어진 단백질의 분자량만 가지고 그 단백질을 구성하는 아미노산들의 조합을 뽑아보고 싶다는겁니다. 저런 화학지식에 대해 아는게 전혀없는 저에게는 뭔소린가 싶었지만 설명을 듣다보니 생각보다 할만하다? 라는 느낌이 들었습니다. (물론 처음에 말한 조건과 나중에 말한 조건이 달라서 낭패를 보긴했습니다.. ) 조건은?처음에 저한테말해줬던 조건은 1. 단백질 분자량 약 500~ 10000 정도의 값을 입력할 수 있어야한다. (double 값) 2. 아미노산의 종류와 각 분자량은 이미 20개 정도로 정해져있다. 3. 필수로 들어가는 .. 공감수 2 댓글수 4 2023. 12. 2.
[플러터] 이미지 Pre-Cache를 통해 성능을 올려보자 앱의 성능을 올려볼 방법이 없을까? 최근 작업을 하면서 성능을 올릴만한게 뭐 없을까? 라는 고민을 하며 회사에서 작업을 하던중 앱의 화면에 asset이 많이 들어가면 화면이 버벅이는거 같은 느낌을 받았습니다. 이 느낌은 아이폰에서 특히 더 많이 느껴지는거같았고 어떻게 해결할 수 있는 방법이 없을지 찾아보던 중 이미지를 precache 할 수 있다는것을 알아냈습니다.이미지 Precache는 Flutter에서 제공하는 기능 중 하나로, 화면에 표시되기 전에 이미지를 미리 로드하여 캐시에 저장하는 과정입니다. 이를 통해 사용자가 이미지를 요청할 때마다 실시간으로 다운로드하는 대신, 이미지가 사전에 로드되어 빠르게 표시될 수 있습니다. 그래서 어떻게 쓰는건데? 기본적인 사용법은 아래와 같습니다.이미지를 사용.. 공감수 2 댓글수 2 2023. 12. 2.
[플러터] 플러터의 멀티스레드? Isolate! Isolate 가 뭐길래?Dart는 기본적으로 싱글 스레드를 기반으로 합니다.하지만 스트리밍, 백그라운드 작업을 지원합니다. 그 이유는 Dart의 모든 코드는 Isolate 기반으로 동작을 하기 떄문인데요싱글스레드가 격리된 메모리 공간에서 Isolate를 사용해 _이벤트 루프_를 실행시켜 멀티스레드 처럼 동작시킬 수 있습니다./// Event Roop는 Event Queue에 담겨 주어진 작업을 순서대로 처리해줍니다.이러한 Isolate를 코드에서 적절히 사용해주면 개인적으로 Flutter의 큰 단점중 하나라고 생각되는 화면의 버벅거림을 줄여 UX를 좋게 만들어 줄 수 있습니다.그렇다면 Isolate가 Thread 인가요??정확히는 아이솔레이트는 스레드를 감싸는 wrapper입니다! 스레드는 다른 스레드.. 공감수 3 댓글수 1 2023. 5. 7.
Open Ai) Flutter에서 Chat GPT 의 API를 사용해보자! 최근 chat gpt의 인기가 핫해지면서 chat gpt를 통한 외부 프로그램도 많이 생기고있다. 현재 내가 쓰는것만 해도 구글 검색시 오른쪽에 chat gpt의 답변을 같이 보여주는 확장프로그램, 외국어를 마우스로 드래그 하면 한국어로 번역해서 보여주는 확장프로그램을 사용하고있다. 따라서 이런 좋은 기능들을 만들 수 있게 open ai의 gpt api를 사용하는 방법을 알아보고자 한다. API 키 발급 사이트 OpenAI API An API for accessing new AI models developed by OpenAI platform.openai.com 우선 위 사이트에서 자신만의 api key를 발급받자, 주의해야할 점은 처음에 한번만 key를 복사해올 수 있다는 점이다. 위와 같은 화면을 볼.. 공감수 3 댓글수 0 2023. 3. 4.
[Flutter Flame] Flame 엔진을 사용한 게임 예제 만들어보기 (4. 完) 펫 넣어주기 ✍️ 이 포스팅은 노마드 개발자 글쓰기 스터디의 일환으로 자유 주제를 공부한 내용으로 포스팅 하고있습니다. 지난번 포스팅에서 바텀시트를 통해 게임에 객체를 추가해주는 부분을 진행했습니다. 이번 포스팅에서는 펫을 추가해 벽에 닿으면 자동으로 방향을 바꿔 움직이는 기능을 구현해보도록 하겠습니다. 1. 펫 이미지 추가 assets/image 하위에 pet_sheet.png 파일을 추가해 주었습니다. 저는 인터넷에서 아무거나 가져와 사용했고 글을 보시는 분들도 아무 sheet를 구해서 추가해주시면 됩니다. 그리고 나서 pet_component.dart 라는 이름으로 펫 객체로 사용할 클래스를 생성해줍니다. 2. 펫 코드 작성 import 'dart:math'; import 'package:flame/collis.. 공감수 6 댓글수 0 2022. 10. 22.
[Flutter Flame] Flame 엔진을 사용한 게임 예제 만들어보기 (3) 바텀시트를 통한 게임에 아이템 추가 ✍️ 이 포스팅은 노마드 개발자 글쓰기 스터디의 일환으로 자유 주제를 공부한 내용으로 포스팅 하고있습니다. 지난주 포스팅에서 화면의 캐릭터를 자동으로 움직이는 부분까지 구현했는데 이번에는 flutter의 바텀시트를 통해 배경인 벽지에 아이템을 놓는 작업을 해보겠습니다.(원래는 캐릭터 옷을 갈아입혀야 하지만 디자인 리소스를 직접 만들어야 할거같아서 바꿔 버렸습니다 😂😂😂) 1. 바텀시트 추가 우선 바텀시트로 사용할 sliding_up_panel 패키지를 추가해줍니다. henry_some_one/pubspec.yaml 파일에 추가해 주시면 됩니다. 그리고는 바텀시트에 해당하는 위젯과 그 내용물을 만들어줄 파일을 생성해 줍니다. 위와 같이 item_list_bottom_sheet.dart 파일과 item.da.. 공감수 4 댓글수 0 2022. 10. 22.
[Flutter Flame] Flame 엔진을 사용한 게임 예제 만들어보기 (2) 배경과 자동으로 움직이는 캐릭터 넣기 ✍️ 이 포스팅은 노마드 개발자 글쓰기 스터디의 일환으로 자유 주제를 공부한 내용으로 포스팅 하고있습니다. 지난번 포스팅에서는 프로젝트를 생성하는 데에서 끝냈는데 이번 포스팅에서는 실제로 게임 화면을 띄우고 배경을 넣고 게임 캐릭터를 움직여 보려고 한다. 1. 게임 화면 띄우기 우리는 앞서 게임 프로젝트를 패키지로 생성했기 때문에 example 에서 사용을 해보려면 export 과정을 거쳐야 할 필요가 있다. 따라서 패키지 프로젝트 하위에 lib/index.dart 파일을 생성하고 아래와 같이 원하는 파일을 export 해준다. 그리고 나서 실제 게임 화면에 보여질 부분을 만들어 준다. library henry_some_one; import 'package:flame/components.dart'; im.. 공감수 9 댓글수 1 2022. 10. 8.
[Flutter Flame] Flame 엔진을 사용한 게임 예제 만들어보기 (1) 프로젝트 생성 및 계획 ✍️ 이 포스팅은 노마드 개발자 글쓰기 스터디의 일환으로 자유 주제를 공부한 내용으로 포스팅 하고있습니다. 플러터 개발자로 첫 취직을 하고 1년 반정도가 지났다. 그동안 앱개발을 진행했고 때때로는 플러터 웹을 다뤄보기도 했다. 그러는 와중에 이 Flame 이라는 게임 엔진을 알게된지는 오래되었는데, 플러터로 게임을 만들 수 있다는 사실이 놀라웠고 공부해보고 싶었지만 현생이 바쁘고 다른 공부할게 쌓여있기 때문에 구석에 미뤄두고 잊고 살았었다. 하지만 이번 노마드 개발자 글쓰기 스터디에 참여하게 되면서 나만의 글쓰기 주제를 정해야 했는데 마침 이 주제가 생각나기도 했고 지금 일하고 있는 회사의 프로젝트에도 접목시킬 수 있지 않을까 하는 생각이 들어 공부하고 포스팅을 해보려 한다. 1. 프로젝트 구조 우선 이.. 공감수 3 댓글수 0 2022. 9. 29.
[플러터] 자식 높이를 몰라도 되는 위젯 확장 애니메이션 1. 사건의 발단최근 회사에서 버튼을 누르면 사라졌다 나타는 위젯을 만들어야 할 일이 있었다.그냥 뭐 간단하게 해결될 일이라고 생각을 했고 처음에는 AnimatedContainer 위젯을 사용해 구현을 하려했다.Column( children: [ _header(context), AnimatedContainer( height: _height, duration: const Duration(milliseconds: 300), child: _child, ), ], )대충 위와같이 _header 위젯에 있는 특정 버튼을 누르면 _height 의 크기가 변하면서 자식의 크기가.. 공감수 1 댓글수 0 2022. 9. 10.
[클린코드] 내 맘대로 클린코드 리뷰 01. 깨끗한 코드 사람이라면 다들 한번씩 아.. 해야하는데.. 라고 생각만하고 실천은 하지 못한 경험이 있을것이다. (설마 나만..?) 나에게도 그런 마음의 짐이 몇가지가 있는데 그중 하나가 바로 '클린코드' 읽기이다. 마침 회사 일정도 나름 여유롭기도 하고 더 늦기전에 독파를 하고싶어서 이번기회에 간단히 리뷰(라고 쓰고 요약)를 해보려고 한다. 첫번째 장에서는 깨끗한 코드가 얼마나 중요한지에 대해 설명해준다. 물론 코드가 깨끗해야 한다는것은 누구나 알고있지만 필자의 경우 한번씩 '아.. 이 정도는 괜찮겠지?' 하는 자기합리화에 빠져 코드르 오염시키는 경우가 있기에 상당히 찔리는 부분이었다. 앞으로 이 책을 읽으면서 여러모로 반성을 하게 될거같은 느낌이 들었다. 코드가 존재하리라 최근 AI가 코드를 대신 짜주는 세상이 왔.. 공감수 0 댓글수 1 2022. 9. 10.
[플러터] 플러터 애니메이션을 파헤쳐보자 나는 안드로이드 개발을 하다가 플러터로 넘어왔지만 항상 느끼는점은 화면 그리기가 너무너무 간단하다는 것이다.하지만 더 화려한 UI를 만들기 위해서는 화면이 동적으로 움직이는 애니메이션이 필수라고 생각한다.이번 포스팅에서는 기본적으로 애니메이션을 어떻게 그리고 어떤식으로 커스텀할 수 있는지에 대해 알아보려고 한다. 이번에 구현해볼 애니메이션은 위와 같다. 간단히 RUN 버튼을 누르면 화면의 위젯이 각 방향으로 사라지며, 아래의 리스트의 경우 하나씩 서서히 사라지게 하는 간단한 예제이다. 01. 기초 애니메이션 사용 방법1-1. AnimationController애니메이션의 기본요소중의 하나인 애니매이션 컨트롤러이다.모든 애니메이션은 이 컨트롤러를 통해 실행되고 상태를 얻어올 수 있다!late final A.. 공감수 0 댓글수 0 2022. 9. 10.
Flutter ) FileSystemException: Cannot create file, path = '/storage/emulated/0/Download/~' (OS Error: File exists, errno = 17) 에러해결 플러터 작업중 당황스러운 일이 있었다. 잘 작동되던 코드가 어느순간 오작동을 하고 있었다. dio.download()를 통해 파일을 다운로드 시 아래와 같은 에러가 뜬것 FileSystemException: Cannot create file, path = '/storage/emulated/0/Download/~' (OS Error: File exists, errno = 17) 인지하지 못한 코드상의 에러는 종종 있었으나 차근차근 되짚어 나가다 보면 문제가 되는 코드를 발견할 수 있는데 이번에는 아무리 코드를 확인하고 개발 문서를 뒤져봐도 코드상에는 문제가 없었다. 또한 모든 디바이스에서 나타나는 현상이 아니라 Android sdk 30 버전 디바이스에서만 나타나고 있었다. 일전에 안드로이드의 소프트웨어 .. 공감수 2 댓글수 1 2022. 1. 12.
Git) The unauthenticated git protocol on port 9418 is no longer supported 에러해결 플러터 작업을 하던 도중 flutter pub get 명령어를 입력하면 특정 브랜치에서만 위와 같은 에러가 뜨기 시작했다. 이상한건 우연인지는 모르겠으나 flutter dart 버전을 올려서 관리하던 브랜치에서만 에러가 났던것이다. 구글링을 통해 여러가지 시도를 해보았으나 해결책은 프로젝트 경로에서 아래와 같은 명령어를 입력하면 됐다. git config --global url."https://".insteadOf git:// 음,, 다른 노트북에서 git clone으로 받아서 flutter pub get 작업을 해도 마찬가지로 에러가 떳던것을 생각하면 git의 설정문제는 아니라고 생각했으나 git config쪽의 셋팅과 flutter 특정 브랜치들이 모종의 이유로 환경이 어긋났나보다.. 공감수 0 댓글수 0 2022. 1. 12.
Monthly-Study) 2021년 12월 새로운 해가 밝았습니다. ㅜ 또 한해가 지나 나이가 들었어요 30살을 향해 너무 성실하게 달려가고있네요 좀 게을러도 될거같은데,,! 크리스마스다 연말이다 이벤트가 많았던 달이어서 또 포스팅을 성실하게 못한거같아요.. 올리고싶은건 상당히 많은데 왜이렇게 시간이 안나는지 모르겠네요 그러고보니 요즘 플러터의 인기가 올라간건지 작년 연초에 올렸던 플러터 관련 포스팅의 조회수가 갑자기 늘어났어요 추측으로는 어딘가에 공유가 된거같은데 ㅎㅎ 크리스마스 이브에 139명이나 저글을 보다니 ,,! 아무튼 이번달에 공부한 내용들이자 언.젠.간 포스팅 할 내용들을 적어보자면 아래와 같습니다. 1. Flutter Marker Clustering 마커 클러스터링이란 기술은 지도위에 단순하게 마커를 찍는 기술과는 다르다. zoom.. 공감수 0 댓글수 0 2022. 1. 2.
Monthly-Study) 2021년 11월 지난번 월간공부를 끄적인 후 벌써 한달이 지나갔다.. 너무 순식간이라 오히려 당황스럽지만 이번달에 익힌것을 하나씩 적어보도록 하겠다. 1. Flutter Web(HummingBird)에 도전하다 정~~~말 의도치 않게 flutter로 웹을 만들었다. 그냥 만든것이 아니라 기존 회사에서 유지보수하던 앱을 마케팅을 위한 체험하기 용도로 사용하기 위하여 일부 기능을 제외한 후 그대로 포팅을 했기 때문에 작업량이 적지는 않았다. flutter로 포팅하면서 가장 HummingBird가 아직 시기상조라고 절실하게 느낀것은 session 처리가 원활하게 처리되지 않는다! 예를들어 서버와 통신을 할 때 requst를 보내고 response를 받을것이다. 이는 크롬 개발자 도구를 통해 확인이 가능한데 로그인 reques.. 공감수 0 댓글수 0 2021. 12. 1.
Monthly-Study) 2021년 10월 이번달은 여러가지 하자고 결심한 달이었고 생각만큼 실천을 하지는 않았지만 나름대로 일은 일대로 벌려놓은 한달이었다. 현재 Flutter와 Spring boot을 공부를 하고있기때문에 거의 이 두가지 기술 중심으로 공부를 했다. 우선 첫번째로 아래의 Spring boot 강의를 완강했다. 심화적인 부분을 다루는 강의는 아니었으나 Spring boot을 기본적으로 훑어볼 수 있는 좋은 강의였다고 생각한다. 실제로 우리 회사에서도 쓰이는 기술들이 많이 소개가 되었고 설명이 부족한 부분은 따로 찾아서 블로그에 정리해보는 등 기초를 단단히 하는 계기가 된것같다. https://www.inflearn.com/course/spring-boot-restful-web-services/dashboard Spring Boo.. 공감수 0 댓글수 0 2021. 11. 1.
Spring boot) 프로젝트 생성부터 CRUD 작성하기(2) 오늘은 귀찮음을 이겨내고 지난번에 작성한 Spring Boot 에서 CURD하기를 이어서 작성해보겠습니다. https://rlg1133.tistory.com/125 Spring boot) 프로젝트 생성부터 CRUD 작성하기(1) JAVA version : 1.8 IDE : STS4 이번 게시글에서는 스프링 부트 프로젝트를 생성하는 법을 기록해놓겠습니다. 프로젝트 생성 우선 가장먼저 프로젝트를 생성하는 법을 알아야 합니다. 1. Spring Initiolizr 에 rlg1133.tistory.com 지난번 포스팅에서는 프로젝트를 생성하고 실행시켜보는 부분까지 진행을 했습니다. 이번에는 직접 코드를 작성하고 포스트맨을 통해 잘 실행이 되는지 체크하는 부분을 진행해 보겠습니다. 우선 rest api는 GET,.. 공감수 0 댓글수 0 2021. 10. 17.
Spring boot) Swagger 를 통한 문서화 Swagger란? - Open Api Specification(OAS)를 위한 프레임워크이다. - API 서비스를 설계하고 문서화 할 수 있게 해준다. Swagger를 사용하는 이유 개발자들이 개발을 하면서 문서화에 신경을 쓴다는것은 당연히 해야하는것을 알지만 바쁜 일정이나 귀찮음 때문에 조금씩 미루게 되는 숙제같은 존재이다. Swagger는 Controller에 명시된 어노테이션을 스스로 해석해 API 문서를 자동으로 만들어줘 이러한 문서화 숙제에서 개발자들을 어느정도 자유롭게 풀어줄 수 있는 장점을 가진다. 아래 사이트를 통해 Swagger의 5가지 기능에 대해 알 수 있다. https://swagger.io/about/ 1. Design(설계) 표준 사양에 따라 API를 설계하고 모델링할 수 있다... 공감수 0 댓글수 0 2021. 10. 6.
REST API - Maturity Model Rechardson에 따르면 Rest api는 몇가지 레벨로 인해 구분된다. 사람에따라 Level 0 ~ 6 까지 나누는데 이 글에서는 Level 0 ~ 3 까지로 분류 한다. Level 0 : URI, 1 HTTP method 레벨 0은 하나의 endpoint를 통해 통신한다. 이는 매개변수를 통해 각 동작의 행위를 결정하기 때문에 HTTP method를 POST로 정의한다. 이를테면 아래와 같이 모든 CRUD 작업을 POST로 통일 한다는 의미이다. CREATE : POST /user READ : POST /user UPDATE : POST /user DELETE : POST /user 위와 같이 모든 작업을 POST와 같은 메소드로 매핑한다 그러나 각 작업에 대해 Body에 들어가는 값이 다르기 때.. 공감수 0 댓글수 0 2021. 10. 5.
Spring boot) 프로젝트 생성부터 CRUD 작성하기(1) JAVA version : 1.8 IDE : STS4 이번 게시글에서는 스프링 부트 프로젝트를 생성하는 법을 기록해놓겠습니다. 프로젝트 생성 우선 가장먼저 프로젝트를 생성하는 법을 알아야 합니다. 1. Spring Initiolizr 에서 생성 우선 IDE에 의존하지않고 Spring Initiolizr 사이트에 들어가 프로젝트를 생성해 받아오는 방식부터 설명하겠습니다. https://start.spring.io/ 위 사이트에 접속하게 되면 아래와 같은 화면을 볼 수 있습니다. 우리가 프로젝트를 생성하기 위해 셋팅해주어야 하는 부분들입니다. 하나씩 설명 하자면 아래와 같습니다. Project - Maven, Gradle 이라는 dependency관리 방법을 선택하는 부분이다. 외부 라이브러리를 의존하기 위.. 공감수 0 댓글수 0 2021. 9. 25.
Monthly-Study) 월간 공부 계획 기록을 시작하는 이유 개발자로 구직을하고 벌써 7달이 다되어간다. 스타트업 개발자로 취직을하고 처음에는 Flutter를 사용한 Android, IOS의 앱개발만을 주 업무로 진행을 했고 스타트업이다 보니 메인 잡 이외에도 Vertx를 사용한 채팅서버 개발, Spring Boot를 사용한 REST 서버 개발 과 같은 백엔드 업무도 도맡아 하게되었다. 그전에도 물론 Node.js나 Django와 같은 백엔드 프레임워크를 사용해 프로젝트를 진행해본적은 있지만 현업에서 어느정도 규모와 트래픽이 나오는 현업에서 프론트와 백엔드 작업을 하다보면 자연스럽게 개발을 바라보는 시선이 넓어지기 마련이다. 신입 개발자로서 이런 상황에서는 하고싶은 공부가 많아지게 된다. 우선 현재 사용하고 있는 Spring boot에 대해서.. 공감수 2 댓글수 0 2021. 9. 25.
Flutter) Flutter 와 SEO에 관한 이슈 안녕하세요 Gyeony입니다! Flutter 2.0 버전이 정식 릴리즈 한지도 벌써 5달이 다되어가고 있어요! 아직도 부족함이 많고 회사일이 생각보다 바쁘게 돌아가 시간은 많이 없지만 하나씩 정리해나가 보도록 하겠습니다. 이번 글에서는 Flutter와 SEO에 대해서 다루어 보도록 하겠습니다. Flutter 2.0 릴리즈 당시 사람들은 Flutter Web에 대해서 기대감을 품고 있었어요 모바일에서 보여주던 혁신적인 퍼포먼스를 웹에서도 잘 보여준다면 프론트 시장에서 영향력이 엄청나게 커질테니까요 ㅎㅎ 크로스 플랫폼 모바일 시장에서는 react native를 잘 따라가고 있고 웹마저 react나 vue 등을 따라가 준다면 정말 플러터로 프론트 정복이 가능할수도 있지 않나! 라는 부푼 꿈을 잠시 꿔보았습니다.. 공감수 3 댓글수 0 2021. 7. 29.
Flutter web(HummingBird) + Firebase Hosting, 파이어 베이스로 플러터 웹 호스팅 하기 지난달 2021년 3월 플러터 2.0이 나오면서 그동안 베타 버전으로만 나와있었던 Fluter Web(HummingBird)이 정식으로 지원하게되었다. 그동안 올릴건 많았지만 시간을 내서 따로 글을 작성해 올리기가 귀찮았던 나는 이번 기회에 다시 성실하게 블로그 포스팅을 해보려고 한다 ㅎㅎ.. 이번에 작성할 주제는 새로 지원하는 플러터 웹 프로젝트를 만들고 그것을 파이어베이스로 호스팅해보는것을 진행 할 것이다. 플러터와 IDE가 깔려있지 않다면 설치 한 후 진행 해주길 바란다. (본인은 Intellij를 사용하지만 중요하지 않고 Android Studio 혹은 VScode 등의 Flutter를 지원하는 IDE를 설치하면 된다.) 우선 우리는 프로젝트를 생성해야한다. IDE에서 바로 생성해도 되고 아래와 .. 공감수 2 댓글수 0 2021. 4. 6.
Android) M1 맥북(Apple Silicon)에서 에뮬레이터 생성하기 약 2-3주쯤 전에 회사에서 지급 받은 맥북은 최근에 새로 출시한 M1 맥북 에어였다. 평소 집에서는 2017년형 맥북프로를 사용해서 설레는 마음으로 사용하는 중인데 이게,, 참,,, 개발하면서 개발환경을 셋팅한다거나 특정 기능을 사용할때 "arm64 지원 안함! ^오^!!" 라는 에러를 내뱉는다... 실제로 이런식으로 직관적으로 알려주는 것도 아니고 듣도보도 못한 에러를 보고 서치를 열심히 한 결과 알아내는 경우가 많다. 나는 플러터 개발을 하고 있고 빌드 테스트도 가지고있는 안드로이드 기기와 IOS기기를 사용해서 테스트를 하기 때문에 에뮬레이터를 사용할 일이 없었다. 그러나 최근에 회사에서 서비스하는 어플에서 파일 업로드가 잘 안된다는 문의가 있었고 떨리는 마음으로 가지고있는 기기들을 사용해 테스트를.. 공감수 4 댓글수 0 2021. 3. 30.
Flutter) BLoC 패턴과 Provider패턴 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 3. 29.
Flutter) 위젯의 생명주기 플러터도 스택구조 플러터를 공부하면서 앱개발은 다 똑같구나라고 느낀건 네이티브 안드로이드의 Activity Stack과 비슷한 Navigator를 사용해보고 난 후였다. 그러나 네이티브 안드로이드보다 좀 더 직관적으로 Navigator.push(...) , Navigator.pop() 이런 식으로 실제 자료구조에서 사용하는 표현을 사용한다는 점에서 달랐고 처음 플러터를 접하는 사람중에 알고리즘의 기본정도를 숙지한 사람이라면 다들 어렵지 않게 이해할 수 있을것 같다는 생각이 들었다. 1. Stateless Widget의 생명주기 Stateless Widget의 경우 한번 생성이 되고나면 바꿀 수 없는 위젯이다. 이를 수정하기 위해서는 Destroy했다가 다시 빌드하는 수 밖에 없는데 따라서 build me.. 공감수 1 댓글수 0 2021. 3. 1.
Flutter) Unhandled Exception: MissingPluginException(No implementation found for method showToast on channel PonnamKarthik/fluttertoast 에러해결 플러터 공부를 하는 도중 제목과 같은 에러가 발생했다. 구글링을 통해 원인을 알아보니 플러터가 불안정해서 나는 에러인것 같았다. 해결방법은 간단하며 아래와 같다. 에뮬레이터 재실행 -> Hot Run이 아닌 Nomal Run으로 프로젝트 다시 런 시키기 공감수 3 댓글수 0 2021. 2. 22.
Flutter) Widget이란? Widget? 나는 위젯을 처음 들었을 때 드는 생각은 평상시 안드로이드기반 핸드폰이나 아이폰을 사용할 때 각종 위젯들을 사용해 캘린터나 날씨 등의 위젯을 상상했다. 네이버 사전 기준으로 위젯의 의미는 PC, 휴대폰, 블로그·카페 등에서 웹브라우저를 통하지 않고 날씨·달력·계산기 등의 기능과 뉴스·게임·주식정보 등을 바로 이용할 수 있도록 만든 미니 응용프로그램이다. 위젯(widget)의 사전적 의미는 ‘소형 장치’ 또는 ‘부품’이다. 이러한 의미들이 있는데 그렇다면 플러터에서 위젯이란 무엇일까? 1. UI를 구성하는 모든 기본 단위요소 위와 같은 정의는 네이티브 안드로이드 개발을 할때 View라고 생각하면 편할것 같았다. 2. 눈에 보이지 않는 요소(padding, center 등) 네이티브 안드로이드.. 공감수 1 댓글수 0 2021. 2. 17.

문의안내

티스토리
로그인
고객센터

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