개발 그리고 육아 Overflow

모바일 서비스를 개발할때 디자이너가 기본적으로 가로 360px 정도의 화면에서 디자인 기본사이즈를 맞춰서 진행을 하는 경우가 많은 거 같습니다. 크롬의 개발자 도구에서도 보면 가로 360px 정도의 화면 사이즈 이하를 잘 보긴 힘들기 때문에 이 정도를 최소 사이즈로 잡고 진행해도 문제가 없었다. 하지만, 갤럭시 폴드 폰이 나오면서 360px기준으로 화면을 만들다보면 360기준으로 빡빡한 사이즈에서는 원하는 화면을 나올 수가 없게 된다. 여기에 집착하는 이유는 갤럭시폴드가 바로 제 폰이기 때문이다.. 그러다보니 저는 제폰에 맞춰서 토이프로젝트를 진행할 뿐이고, 여러가지 다른 문제도 복합적으로 있지만, 화면이 커지지만 화면의 사용은 280px정도밖에 사용을 못하고 있는 문제가 있습니다. 그래서 css에서는 ..

Svelte에서 라우팅을 하는 방법에 대해서 간단한 수준에서 포스팅 해보려고 합니다. 일단 간단하게 탐색을 해본 결과, 많은 분들이 사용하시는 svelte-spa-router 존재에 대해서 알게 되었고. (이것이 거의 반을 한것이다) 링크는 아래와 같습니다. https://github.com/ItalyPaleAle/svelte-spa-router GitHub - ItalyPaleAle/svelte-spa-router: Router for SPAs using Svelte 3 Router for SPAs using Svelte 3. Contribute to ItalyPaleAle/svelte-spa-router development by creating an account on GitHub. github.c..

플러터로 개발시에 라우팅을 AutoRoute에게 맡기고 있다. https://pub.dev/packages/auto_route auto_route | Flutter Package AutoRoute is a declarative routing solution, where everything needed for navigation is automatically generated for you. pub.dev AutoRoute에 대해서는 기회가 되면 다음에 포스팅을 해보는걸로 하고, 지금은 AutoRoute를 사용하다가 Firebase 설정시에 문제가 되었던 것에 대한 해답지를 적어볼려한다. AutoRoute를 사용하게 되면, 기존에 App()에 MaterialApp을 사용할 수가 없고 MaterialApp...

최근에 Vite에 대한 장점들을 보고, 한번 사용해보기로 해서 기존에 시작한 Webpack으로 사용한 프로젝트를 Vite로 옮겨보기로 했다. 그냥 Vite로 최초로 프로젝트를 생성하면 아래와 같이 생성하면 끝이다. npm create vite@latest '프로젝트 이름' --options // create-vite 섹션에서는 더욱 다양한 템플릿들에 대해 다루고 있습니다 vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts 우리가 원하는것은 React + TS > npm create vite@latest vite-react-ts --react-ts > cd vite-react-ts # yarn yarn install..

안녕하세요. 개발아빠입니다. 오늘은 화면마다 많이 쓰이는 AppBar를 재사용이 편하게 공통으로 한번 만들어 볼려고합니다. 페이지별로 특이하지는 않지만, 매번 AppBar를 만들던 비효율에서 이제는 청산해 볼려고 합니다. AppBar 지옥 안녕.! @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: IconButton( icon: Image.asset("assets/images/ic_chevron_30_back.png", width: 24, height: 24,), onPressed: () => Navigator.of(context).pop(), ), centerTitle: center, title..

안녕하세요. 개발아빠입니다. 오늘은 텍스트필드 Counter에 위치를 변경하는 방법에 대해서 알아볼려고 합니다. 텍스트 필드에 Counter는 기본적으로 maxLength를 지정하게 되면 자동적으로 텍스트필드 아래에 기본적으로 Couter가 생기게 됩니다. 아래를 보시면 더 이해가 잘되실 거에요. TextField( decoration: InputDecoration( hintText: "전화번호", ), maxLength: 11, ), 그냥 TextField() 이렇게만 선언에도 텍스트 필드가 나오는데 현재 hintText와 maxLength를 추가한 상태입니다. 여기서 maxLength를 추가하면 자동적으로 아래에 counter가 생성되는것을 볼 수 있는데요. 그런데 여기서 디자이너 분이 공유해주신 앱..

안녕하세요. 개발아빠입니다. 오늘은 Flutter에서 Fluro 라이브러리를 사용해서 라우터를 설정하여 화면을 이동하는 것을 간단하게 진행해보려고합니다. 기본적으로 Router설정에 대해서 모르시는 분들은 아래 글을 먼저 보고 와주세요. 2020/09/28 - [개발아빠/Flutter] - 플러터(Flutter) 화면 이동을 위한 Router(라우터) 설정 하기 2020/09/29 - [개발아빠/Flutter] - 플러터(Flutter) 화면 이동 시 데이터 넘기기 먼저 이것을 진행하게 된 이유에 대해서 먼저 간단히 살펴보면요. (말이 길어질꺼같지만요) 네이티브 앱에서는 크게 이슈가 없었는데 플러터로 웹까지 같이 하고 있다보니 문제가 되는 것이 생기더라구요. 웹에서는 앱과는 다르게 브라우저의 주소창을 통..

안녕하세요. 개발아빠입니다. 오늘은 제가 계속적으로 공부하면서 만드는 PWA / 안드로이드앱 - 아이가 자란다 에서 가격을 보여주는 기능을 개발을 하다가, 가격을 표시해주기 위해서 처리했던 내용을 공유해드릴까 합니다. 오늘은 간단하니 잠시만 봐주세요~ 상품상세 페이지를 만들고 있는데, 아래와 같이 금액표시가 일반적이지 않게 되고 있네요~ 이걸 간단하게 처리해보겠습니다~ 먼저 pubspec.yaml 에 추가해줍니다. intl: ^0.16.1 위에 라이브러리는 날짜나 단위들을 포맷팅하는데 자주 사용되는 거의 필수적인 라이브러리 입니다. Intl This package provides internationalization and localization facilities, including message tr..

안녕하세요. 개발아빠입니다. 이전 포스팅에서 안드로이드, iOS에 웹뷰를 붙이고, 이걸 웹으로 띄워봤을때 빨간(?) 화면이 나오면서 실행이 안된거를 다들 기억하시나요? 혹시 안보고 오셨다면 아래를 방문해주고 와주세요~ 플러터(Flutter) WebView 사용 및 History 제어 기능 추가 안녕하세요. 육아개발아빠입니다. 오늘도 개발아빠의 플러터 이야기는 계속 됩니다. 오늘은 WebView에 대해서 이야기 해보겠습니다. 안드로이드, 아이폰 어플리케이션 개발때 익숙하게 사용하는 childcare-daddy.tistory.com 오늘은 이 부분을 처리하는 방법에 대해서 포스팅 해보려고 합니다. 어쩌면 웹에다가 웹뷰를 넣는다는 말 자체가 이상 할수 도있고 해서 그렇게 넣는 일 자체가 없기 때문에 라이브러리..

안녕하세요. 육아개발아빠입니다. 오늘도 개발아빠의 플러터 이야기는 계속 됩니다. 오늘은 WebView에 대해서 이야기 해보겠습니다. 안드로이드, 아이폰 어플리케이션 개발때 익숙하게 사용하는 것이 WebView입니다. 하이브리드앱도 있듯이요~ 플러터에서도 당연히 웹뷰를 이용할일이 있겠죠~ 먼저 WebView를 추가해보겠습니다~ WebView는 플러터 기본적인 위젯에는 없고, 추가해야합니다. pubspec.yaml 에 dependencies: 에 webview_flutter: ^0.3.24 추가합니다. 버전은 현재 플러터 버전에 따라서 조금씩 다를수 있습니다. 자세한 내용은 여기에서 확인하세요. https://pub.dev/packages/webview_flutter dependencies: flutter:..