본문 바로가기

프론트엔드

(20)
[Flutter] Pub.dev 접속 불가일 때 해결했던 방법 안녕하세요, 황대성입니다. 몇 주 전에 Pub.dev가 터져서 접속이 불가능했었습니다. 그래서 그 때 Pub.dev에 접속하기 위해 사용했던 방법을 공유하려고 합니다. (혹시나 다시 이런일이 발생할까, 작성합니다..ㅎㅎ) 첫번째 방법은 flutter pub get을 통하여 특정 packages를 get 할 때 사용하는 방법입니다. 현재 작업하고있는 directory에서 아래의 명령어를 사용하여 Pub host의 url을 변경해주는 것 입니다. 해당 방법은 현재 directory에서 pub.dev가 연결이 되지 않아 flutter pub get 명령어가 통하지 않을 때 사용했습니다. export PUB_HOSTED_URL=https://pub.flutter-io.cn export PUB_HOSTED_URL..
[Flutter] Flutter pub.cache path 위치 안녕하세요, 황대성입니다. 이번 글에서는 pub.cache의 path를 포스팅 하려 합니다. 생각보다 Flutter로 개발을 하면서 pub.cache에 접근해야 할 일들이 있더라구요.. 각설하고 바로 알려드리겠습니다! pub-cache는 Home directory에 위치하고 있습니다. Home directory에서 ls -a 명령어를 입력하면 숨어있는 pub-cache를 찾을 수 있습니다! 이 글이 도움이 되었으면 좋겠습니다 : ) 오늘도 제 글을 읽어주셔서 감사합니다! 참고 사이트 Dart - dart.dev/tools/pub/environment-variables Configuring pub environment variables How to configure your environment for D..
[Flutter] Flutter 2.0 & Stable Flutter WEB 안녕하세요, 황대성입니다 :) 오랜만에 작성하는 포스팅인 것 같네요! 이번 글에서는 Flutter 2.0과 Stable이 된 Flutter WEB에 관해 정리한 사항을 공유하려합니다! Flutter 2.0에서 Flutter 앱을 브라우저에서 기본적으로 실행할 수 있습니다. Flutter 2.0에서 가장 큰 사항은 웹에 대한 프로덕션 품질 지원입니다. How? WebAssemby로 빌드 된 새로운 CanvasKit 기반 렌더링 엔진을 추가하여 성능 최적화에 대한 많은 진전을 이루었다. 이번 릴리즈에서는 특히 아래의 세 가지 앱 시나리오에 중점을 둡니다. PWA SPA 기존 Flutter 모바일 앱을 웹에서 지원 Flutter Web에서는 dartdevc or dart2js 컴파일러를 통해 JavaScrip..
[Flutter] Client Post 통신 시 body에 json값 사용하는 방법 안녕하세요, 황대성입니다. 이번 글에서는 Flutter에서 Client를 사용하여 API 통신을 할 때 POST에서 body에 json값을 넣는 방법에 대해 포스팅하려 합니다! 제가 개발하다가 이건 공유하면 좋다고 생각이 들어 글을 작성합니다! 도움이 되었으면 좋겠습니다. 풀 코드를 통해 한 번에 설명해드리겠습니다! import 'dart:convert'; import 'package:http/http.dart' show Client; import 'package:http/http.dart'; Future getApiTest(List data, String name) async { var url = "api url"; try { Map data = {"harbor": harbor, "dock": dock..
[Flutter] Flutter_map package를 사용해 지도 구현하기 안녕하세요, 황대성입니다. 이번 글에서는 Flutter_map package를 사용하여 지도를 구현하는 방법에 대해 포스팅하려합니다. 준비물 Flutter Map Package: pub.dev/packages/flutter_map Geolocator Package: pub.dev/packages/geolocator 위 두 Package를 설치합니다. Flutter Map은 leaflet기반으로 구성되어있는 지도를 그려주는 라이브러리입니다. Geolocator는 현재 사용자의 위치를 받아오기 위해 사용하는 라이브러리입니다. 제일 먼저 현재 위치를 받아오는 코드를 구현해봅시다. import 'package:geolocator/geolocator.dart'; class Map extends StatefulWi..
[Flutter] Flutter 화면 세로, 가로 고정 방법 안녕하세요, 황대성입니다. 이번 글에서는 Flutter에서 가로, 세로 화면 고정하는 방법을 포스팅하려 합니다. (How to fix screen direction in Flutter) 1. import 'package:flutter/services.dart'; 를 임포트 해줍니다. 2. StatefulWidget을 사용한다면 아래와 같은 방법을 사용하세요! import 'package:flutter/services.dart'; import 'package:flutter/material.dart'; class Test extends StatefulWidget{ _Test createState() => _Test(); } class _Test extends State { @override void init..
[React] Chrome에서 video tag autoplay 오류 해결 안녕하세요, 황대성입니다! 이 포스팅은 다음과 같은 순서로 진행됩니다. 목차 발생한 오류 해결 방법 발생한 오류 영상을 자동으로 재생하기 위해 video tag에 autoplay를 준 코드를 작성하였다. 이렇게 코드를 작성해서 다양한 환경에서 테스트를 해보았다. 사파리, 엣지, 파이어폭스에서 정상적으로 잘 작동되었다. 하지만 Chrome(크롬) 브라우저에서만 자동으로 재생이 되지 않았다. 해결 방법 재생하려는 비디오를 음소거하거나, 재생하려는 비디오의 음량이 0이여야합니다. 그래서 위의 코드를 아래와 같이 변경하였습니다. 해결 방법은 굉장히 간단하지만, 원인을 모르면 정말 답답한 오류라서 포스팅 해보았습니다. 모두 즐코합시다~ 참고한 사이트 video 태그 autoplay 재생이 안될때 (Chrome /..
[Flutter] Flutter에서 Hex값을 사용해 색상 설정 방법 안녕하세요, 황대성입니다! 이번 포스팅에서는 Flutter에서 제공하는 Colors에 있는 색상이 아닌, 개발자가 원하는 색상 (Hex, RGB...)을 사용하는 방법에 대해 포스팅해보려고 합니다! 엄청 쉬울 것 같지만 제가 개발하면서 막혔던 부분이었기에, 저와 같으신 분들이 조금이라도 더 도움이 되었으면 하여 글을 작성합니다!! Flutter에서 색상을 지정하는 다양한 방법들이 있습니다. // 가장 기본적인, Colors를 사용하는 방법 color: Colors.red; // ARGB 혹은 RGBO를 사용하는 방법 color: const Color.fromARGB(); color: const Color.fromRGBO(); // Hex값을 정수로 바꾸어 사용하는 방법 color: const Color(..