Henry Tutorial

Flutter는 크로스 플랫폼을 지원하는 프레임워크이며 많은 개발자들이 Andorid, IOS 모바일 앱을 만들기 위해 사용하지만 데스크탑 앱과 웹에서도 꽤 괜찮은 성능으로 동작합니다. 하지만 익숙한 모바일앱과는 달리 플러터를 웹으로 빌드하고 또 그 웹사이트를 모바일앱에서 확인해야 한다고 했을때 어떻게 하면 좋을까요?  아시다시피 Flutter 에는 웹을 렌더링하는 두가지 방식이 존재합니다. 1. HTML : HTML/CSS를 기반으로 위젯 트리를 렌더링2. CanvasKit : Flutter의 기본 렌더링 엔진인 skia와 WebGL을 사용하여 렌더링 이렇게 봤을때 HTML 렌더링을 통해 보통 웹처럼 디버깅 해볼 수 있지 않을까? 하는 생각이 들지만 말만 HTML 렌더링이지 생각보다 쓸만한 디버깅을 하..

실무에서 앱을 개발하다보면 외국인을 대상으로 서비스를 운영하기도 합니다.  외국인 클라이언트들에게 한국어를 강요할 수는 없기때문에 우리 개발자들은 정해진 locale 에 따라서 언어를 분기해주어야 하죠 제가 소속된 팀에서는 GetX를 사용하는데 이 상태관리툴에는 기본적으로 다국어를 지원할 수 있끔 기능이 포함되어있습니다. 아래 예시를 보시죠  위 내용은 Getx 패키지 Readme에 작성 되어있는 다국어의 예시입니다.각 국가별 구분을 최상위 key로 가지고 value 로는 같은 하위 key에 다른 하위 value 를 가진 json 형태로 만들어져 있죠그리고 이렇게 정해준 내용들을 가지고  아래와 같은 형태로 사용을 하게 되는겁니다.Text('title'.tr); 하지만 위와 같은 방식으로 사용하게 되면 ..

약 2달 전쯤 친구들이 모여있는 단톡방에서 포스텍 박사과정을 진행중인 친구가 여느때와 같이 우는소리를 하기 시작했습니다. 얘기를 들어보니 자기가 하는 연구가 대충 단백질 만드는거라는데 만들어진 단백질의 분자량만 가지고 그 단백질을 구성하는 아미노산들의 조합을 뽑아보고 싶다는겁니다. 저런 화학지식에 대해 아는게 전혀없는 저에게는 뭔소린가 싶었지만 설명을 듣다보니 생각보다 할만하다? 라는 느낌이 들었습니다. (물론 처음에 말한 조건과 나중에 말한 조건이 달라서 낭패를 보긴했습니다.. ) 조건은?처음에 저한테말해줬던 조건은 1. 단백질 분자량 약 500~ 10000 정도의 값을 입력할 수 있어야한다. (double 값) 2. 아미노산의 종류와 각 분자량은 이미 20개 정도로 정해져있다. 3. 필수로 들어가는 ..

앱의 성능을 올려볼 방법이 없을까? 최근 작업을 하면서 성능을 올릴만한게 뭐 없을까? 라는 고민을 하며 회사에서 작업을 하던중 앱의 화면에 asset이 많이 들어가면 화면이 버벅이는거 같은 느낌을 받았습니다. 이 느낌은 아이폰에서 특히 더 많이 느껴지는거같았고 어떻게 해결할 수 있는 방법이 없을지 찾아보던 중 이미지를 precache 할 수 있다는것을 알아냈습니다. 이미지 Precache는 Flutter에서 제공하는 기능 중 하나로, 화면에 표시되기 전에 이미지를 미리 로드하여 캐시에 저장하는 과정입니다. 이를 통해 사용자가 이미지를 요청할 때마다 실시간으로 다운로드하는 대신, 이미지가 사전에 로드되어 빠르게 표시될 수 있습니다. 그래서 어떻게 쓰는건데? 기본적인 사용법은 아래와 같습니다. 이미지를 사용..

Isolate 가 뭐길래? Dart는 기본적으로 싱글 스레드를 기반으로 합니다. 하지만 스트리밍, 백그라운드 작업을 지원합니다. 그 이유는 Dart의 모든 코드는 Isolate 기반으로 동작을 하기 떄문인데요 싱글스레드가 격리된 메모리 공간에서 Isolate를 사용해 _이벤트 루프_를 실행시켜 멀티스레드 처럼 동작시킬 수 있습니다. /// Event Roop는 Event Queue에 담겨 주어진 작업을 순서대로 처리해줍니다. 이러한 Isolate를 코드에서 적절히 사용해주면 개인적으로 Flutter의 큰 단점중 하나라고 생각되는 화면의 버벅거림을 줄여 UX를 좋게 만들어 줄 수 있습니다. 그렇다면 Isolate가 Thread 인가요?? 정확히는 아이솔레이트는 스레드를 감싸는 wrapper입니다! 스레드는..

최근 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를 복사해올 수 있다는 점이다. 위와 같은 화면을 볼..

✍️ 이 포스팅은 노마드 개발자 글쓰기 스터디의 일환으로 자유 주제를 공부한 내용으로 포스팅 하고있습니다. 지난번 포스팅에서 바텀시트를 통해 게임에 객체를 추가해주는 부분을 진행했습니다. 이번 포스팅에서는 펫을 추가해 벽에 닿으면 자동으로 방향을 바꿔 움직이는 기능을 구현해보도록 하겠습니다. 1. 펫 이미지 추가 assets/image 하위에 pet_sheet.png 파일을 추가해 주었습니다. 저는 인터넷에서 아무거나 가져와 사용했고 글을 보시는 분들도 아무 sheet를 구해서 추가해주시면 됩니다. 그리고 나서 pet_component.dart 라는 이름으로 펫 객체로 사용할 클래스를 생성해줍니다. 2. 펫 코드 작성 import 'dart:math'; import 'package:flame/collis..

✍️ 이 포스팅은 노마드 개발자 글쓰기 스터디의 일환으로 자유 주제를 공부한 내용으로 포스팅 하고있습니다. 지난주 포스팅에서 화면의 캐릭터를 자동으로 움직이는 부분까지 구현했는데 이번에는 flutter의 바텀시트를 통해 배경인 벽지에 아이템을 놓는 작업을 해보겠습니다.(원래는 캐릭터 옷을 갈아입혀야 하지만 디자인 리소스를 직접 만들어야 할거같아서 바꿔 버렸습니다 😂😂😂) 1. 바텀시트 추가 우선 바텀시트로 사용할 sliding_up_panel 패키지를 추가해줍니다. henry_some_one/pubspec.yaml 파일에 추가해 주시면 됩니다. 그리고는 바텀시트에 해당하는 위젯과 그 내용물을 만들어줄 파일을 생성해 줍니다. 위와 같이 item_list_bottom_sheet.dart 파일과 item.da..

✍️ 이 포스팅은 노마드 개발자 글쓰기 스터디의 일환으로 자유 주제를 공부한 내용으로 포스팅 하고있습니다. 지난번 포스팅에서는 프로젝트를 생성하는 데에서 끝냈는데 이번 포스팅에서는 실제로 게임 화면을 띄우고 배경을 넣고 게임 캐릭터를 움직여 보려고 한다. 1. 게임 화면 띄우기 우리는 앞서 게임 프로젝트를 패키지로 생성했기 때문에 example 에서 사용을 해보려면 export 과정을 거쳐야 할 필요가 있다. 따라서 패키지 프로젝트 하위에 lib/index.dart 파일을 생성하고 아래와 같이 원하는 파일을 export 해준다. 그리고 나서 실제 게임 화면에 보여질 부분을 만들어 준다. library henry_some_one; import 'package:flame/components.dart'; im..

✍️ 이 포스팅은 노마드 개발자 글쓰기 스터디의 일환으로 자유 주제를 공부한 내용으로 포스팅 하고있습니다. 플러터 개발자로 첫 취직을 하고 1년 반정도가 지났다. 그동안 앱개발을 진행했고 때때로는 플러터 웹을 다뤄보기도 했다. 그러는 와중에 이 Flame 이라는 게임 엔진을 알게된지는 오래되었는데, 플러터로 게임을 만들 수 있다는 사실이 놀라웠고 공부해보고 싶었지만 현생이 바쁘고 다른 공부할게 쌓여있기 때문에 구석에 미뤄두고 잊고 살았었다. 하지만 이번 노마드 개발자 글쓰기 스터디에 참여하게 되면서 나만의 글쓰기 주제를 정해야 했는데 마침 이 주제가 생각나기도 했고 지금 일하고 있는 회사의 프로젝트에도 접목시킬 수 있지 않을까 하는 생각이 들어 공부하고 포스팅을 해보려 한다. 1. 프로젝트 구조 우선 이..