웹 개발
-
[Flutter web] [cloud_firestore/unknown] NoSuchMethodError: invalid member on null: 'includeMetadataChanges'웹 개발/에러 2021. 2. 14. 21:46
Flutter web 상에서 Streambuilder로 firestore의 데이터를 가져오려했는데 stream으로 데이터를 받아오지 못한다는 것을 알게 되었다. get function으로는 firestore 데이터값을 가져올 수 있는걸 보니 연결이 안된 것은 아니고 데이터를 받아온 후 상태를 변화시키지 못하는 문제이지 않을까 추측했다. 아래의 코드로 error를 확인해보니 [cloud_firestore/unknown] NoSuchMethodError: invalid member on null: 'includeMetadataChanges' 에러가 나왔다. if(snapshot.hasError){ print(snapshot.error); } 구글링해본 결과 JavaScript SDK 버전 문제 때문이며 fi..
-
[Flutter Web] Fluro 패키지로 네비게이션 라우팅하기 ( Deep link / Transitions)웹 개발/Flutter 2021. 2. 11. 16:48
flutter web routing을 위해 get it package를 사용했었는데 현재 어플리케이션 상태를 나타내는 url이 수정되지 않아 주소를 직접 수정해 페이지 이동을 하지 못하는 문제가 있다는 것을 알게 되었다. Fluro package를 사용해 딥링크 문제를 해결했다. 딥링크 특정 페이지에 도달 할 수 있는 링크 pub.dev/packages/fluro fluro | Flutter Package Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions. pub.dev 1) Fluro package 가져오기 depende..
-
[Web] 안드로이드 스튜디오에서 웹 실행시 포트 지정(설정) 하는 법웹 개발/Flutter 2021. 2. 7. 01:03
특정 포트로 웹을 실행해야하는데 기존에 설정되어있던 chrome(web)으로 실행하다보니 명령어로 따로 입력하지 않는 이상 포트 설정을 할 수가 없어서 방법을 찾아보았다. 1) 명령어를 통해 포트(port) 지정하는 법 flutter run -d chrome --web-hostname localhost --web-port 5000 2) 안드로이드 스튜디오에서 웹을 실행할 때 일일히 명령어를 입력하지 않고 port 지정하는 방법은 아래와 같다.
-
[Flutter] Service locator pattern을 사용해 build context 없이 navigate 하기웹 개발/Flutter 2021. 1. 31. 01:01
아래의 flutter web의 routing을 배우기 전에 get it package의 Service locator을 사용한 navigation 방법에 대해 익혀보려고 한다. Service locator pattern 서비스 중개자(Service locator) 는 서비스 제공자를 등록하고, 서비스를 사용하는 측에서 이 서비스에 접근할 수 있도록 중개해준다. 서비스 제공자의 실제 자료형과 이를 등록하는 과정은 숨긴다. 출처 : http://hajeonghyeon.blogspot.com/2017/06/service-locator-pattern.html www.filledstacks.com/post/navigate-without-build-context-in-flutter-using-a-navigation-..
-
[Flutter] 플러터 종속성 주입 (InheritedWidgets/ get_it / provider)웹 개발/Flutter 2021. 1. 28. 19:02
개발을 하다보면 들어갈 데이터는 다르지만 UI가 같은 객체를 서로 다른 클래스에 넣어야할 때가 있다. 클래스마다 데이터만 다른 같은 객체를 일일히 추가하다보면 코드가 길어지고 수정사항이 생길 때는 객체별로 코드를 수정해야하기 때문에 매우 번거로워 진다. 이러한 불편함을 해결하기 위해 Dependency Injection (종속성 주입) 기술이 필요하다. DI는 코드의 재사용성을 높이는 데 사용되는 기술이며 해당 객체를 클래스마다 인스턴스화 즉 생성하는 대신 클래스에 종속 객체를 주입한다. 클래스로부터 객체를 만드는 과정을 클래스의 인스턴스화라고 하며, 어떤 클래스로부터 만들어진 객체를 그 클래스의 인스턴스라고 한다. 결국 인스턴스는 객체와 같은 의미이지만, 객체는 모든 인스턴스를 대표하는 포괄적인 의미를..
-
[Flutter] 플러터 웹 사이트 반응형으로 생성하기웹 개발/Flutter 2021. 1. 23. 22:30
기존에 만들었던 웹사이트는 반응형 웹을 위한 설정이 적용되어있지 않기 때문에 웹 화면을 조절했을 때 아래와 같이 overflow가 발생하거나 웹사이트의 UI가 유지되지 않는다. 1) responsive builder 반응형 웹 사이트를 구축하기 위해 responsive builder 패키지를 사용한다. responsive_builder: ^0.1.2 웹을 실행하는데 사용되는 디바이스에 맞는 페이지를 설정하면 디바이스에 맞는 반응형 웹을 생성해준다. 디바이스 크기를 일일히 설정해줘야할 필요를 줄여주는 패키지라고 생각한다. watch, mobile, tablet, desktop void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @o..
-
[Flutter] 플러터 웹 프로젝트 생성웹 개발/Flutter 2021. 1. 23. 17:04
지난 2일동안 flutter web을 이용해 웹 사이트 1.0을 만들었는데 앱 개발하듯이 만들다보니 웹이 너무 앱 스럽다는 생각이 들었다. 쉬는 동안 flutter web에 대한 기본을 쌓아야겠다는 생각이 들어서 하나씩 정리해보려 한다. 1. Flutter web 프로젝트 생성 1) 채널을 마스터로 변경한다. flutter channel master 플러터는 stable, beta, dev, master 4개의 릴리즈 채널(release channel)들을 가지고 있는데 가장 최신 버전을 원하는 것이 아니라면 stable을 사용하기를 추천한다. 2) 마스터로부터 가장 최근 버전으로 업데이트한다. flutter upgrade 3) web 지원이 가능하도록 환경설정 한다. flutter config --en..
-
[CSS] CSS 속성 예시웹 개발/HTML & CSS 2020. 6. 30. 21:07
width : 가로너비 height : 세로 너비 margin : 요소 바깥 쪽 여백 padding : 요소 안 쪽 여백 *margin과 padding 모두 top, left, right, bottom 개별 설정 가능 color : 글자 색상 background-color : 요소 배경 색상 *background는 배경에 대한 단축속성 아래와 같은 폰트 하나와 상자 2개를 생성해보자 CSS 파일을 생성하여 색상과 너비를 지정해주었다. 가로너비 : 300px 세로너비 : 200px 폰트사이즈 : 60px margin을 각각 다르게 적용해보자 font : 20px box1 : 50px box2 : 80px box2에 padding을 적용해보자 box2에 안 쪽 여백이 60px만큼 적용된 것을 알 수 있다.