flutter web

개요이번 주제는 Flutter web을 빌드할 때 사용하는 --web-renderer의 대표적인 두 가지 옵션 html, canvaskit에 대해 알아보려고 한다.이번 주제에서는 가장 많이 사용되는 렌더러를 제외한 wasm은 보통 렌더러라고 하지 않아 이번 글에서는 논하지 않도록 하겠다.얼마 전에 플러터의 애니메이션을 최대한 활용한 플러터 웹을 만들고 있었다.개발용 PC의 성능이 좋아 최대한의 기능을 활용하여 몹시 아름다운 동적 웹사이트를 만드려고 했다.그리고 중간정도 완성을 한 후 배포 테스트를 위해 서버 PC에 있는 Nginx를 이용해 배포를 했다. 예상대로 내가 주로 사용하는 맥미니에서 배포된 웹사이트로 접근했을 때 개발할 때와 같은 모습으로 잘 렌더링이 되었다.하지만 내가 가지고 있던 기기 중 성..

개요서버용 라즈베리파이에 Code-Server를 설치한 후 코딩에 대한 제약 사항이 많이 개선되었다.아이패드에서 내 개인 Code-Server로 접속하여 NodeJS API 구현을 하는 등, 개발 취미에 대한 자유도가 많이 높아졌다. (디스코드 봇도 code-server를 통해 성공적으로 구현 완료). Code-Server 만세!!!!요즘에 Flutter Web을 통해 이런저런 실험을 진행하고 있는데, Flutter Web도 Headless-server를 근본으로 포트를 구성하여 Chrome이나 기타 브라우저에서 디버그가 가능하게 구현이 되어있는 듯했다.근데 이 녀석, 만약 외부에 접근할 수 있는 환경이라면, Code-Server를 통해서도 충분히 Flutter 개발이 가능하다면 어떨까?라는 생각이 들어..

최근에 토이프로젝트로 진행 중인 Flutter Web 사이트의 버전을 바꾸게 될 일이 생겨 업데이트를 하려 하는데 문제가 생겼다. 최신버전을 반영한 이후 Flutter web의 빌드파일을 서버에 적용을 한 후 접속을 해보는데 캐시 된 이전 페이지가 그대로 보이는 것이다. 문제를 확인해 보니 플러터 웹은 main.dart.js를 가져오게 되는데 이 파일은 자바스크립트 파일이다 보니 갱신을 하려면 쿼리를 파라미터를 추가하여 버전을 올려줘야 신규 main.dart.js를 웹브라우저에서 인식을 하고 가져오는 것이다. 그럼 해결방법을 적어보도록 하겠다. 1.Flutter Web을 빌드한다 (flutter build web --web-renderer canvaskit --release) 2. 이후 빌드된 폴더에 이..

요즘 앉아서 먹기만 하는 빈도가 증가하다보니 몸에 타이어가 2센치가량 늘어나게 되었다. 여름도 오고 슬슬 다이어트 시작을 해야될 듯 하다. 이번 포스팅에서는 Linux기반 서버에서 Flutter로 작성한 Web어플리케이션을 호스팅하는 법을 알아가 보도록 하겠다. 우선 우리가 준비해야할 사항들은 1. Flutter로 작성된 프로젝트 (2.0 이상) 2. 리눅스 기반 서버 (ubuntu, debian, centOS 포함) 이게 끝이다. 자 그러면 먼저 Flutter 로 작성된 프로젝트를 웹 앱으로 빌드해주도록 해하자 프로젝트 콘솔에 flutter build web 을 입력하도록 하자. flutter build web 그러면 이런 모습으로 웹버전으로 빌드가 완료된다. 그리고 빌드된 폴더로 이동하자. 프로젝트 ..