Name Routing Name Routing은 web과 같이, 경로를 이용하여 라우팅 될 위젯(widget)을 정의하는 routing 방법입니다. 예시를 들면 아래와 같습니다. @override Widget build(BuildContext context) { return MaterialApp( routes: { '/': (context) => HomeScreen(), '/details': (context) => DetailScreen(), }, ); } 실제로 간단하게 구현을 해보겠습니다. 우선 flutter 프로젝트를 만들고, HomeScreen과 SettingScreen 2개의 스크린 위젯을 생성하겠습니다. // home_screen.dart import 'package:flutter/materi..

Flutter 설치 플러터 설치 요구 스펙 운영 체제(Operation System): macOS 10.14(Mojave) 이상 디스크 공간: 2.8GB (IDE/도구용 디스크 공간은 포함되지 않음) Rosetta 설치 (Apple 실리콘 Mac 만 설치) flutter를 설치하기 전에 Apple 실리콘이 탑재된 mac의 경우는 Rosetta를 설치해줘야 합니다. 만약 Intel 칩을 사용하는 Mac은 설치하지 않아도 됩니다. 설치는 아래 명령어를 사용해서 설치할 수 있습니다. sudo softwareupdate --install-rosetta --agree-to-license Rosetta 사용하면 Intel 칩이 탑재된 Mac용으로 만들어진 Application을 Apple Silicon이 장착된 M..

webpack이란? 웹팩(Webpack)은 모던 웹 개발에서 매우 중요한 도구 중 하나입니다. React나 Vue 등 요즘 대세인 javascript 프레임워크로 개발을 할때도 사용합니다. 간단하게 설명하면 javascript 기반의 프로젝트 번들링하기 위해 사용합니다. 번들링이라고 하면, 여러개의 나눠진 파일들을 하나의 파일로 묶어주는 역할을 합니다. (물론 html, scss 등 javascript가 아닌 파일들도 번들링이 가능합니다) pug란? html 코드를 좀 더 간략하게 작성할 수 있도록 도와줍니다. 파이썬과 같이 indent를 사용하여 depth를 구분하기 때문에 꺽새를 사용하는 html 코드에 비해 더 간략합니다. 코드로 예를들면, Google 위 html 을 pug로 작성하면, 아래와 같..

폰트의 굵기 웹 개발을 하면서, css로 자주 사용하는 폰트의 굵기는 normal, bold 가 있습니다. 거의 2가지 정도만 사용하지만 때때로는 수치를 입력하거나 lighter, bolder 등 부모의 상대 굵기를 사용할 수도 있습니다. 본 글에서는 굵기의 종류가 어떤게 있는지 살펴봅니다. css font-weight 기본 두께 폰트의 굵기를 표현할 때는 font-weight 속성을 사용합니다. normal 과 bold 는 아마 자주 사용하여 다들 아는 속성 값일 것입니다. font-weight: normal; font-weight: bold; 부모 요소에 대한 상대 두께 자주 사용하지는 않지만 lighter와 bolder가 있습니다. 이 2개는 부모 요소(element)에 대한 상대적인 두께를 표현할..

Gatsby 블로그에 Adsense 적용 자신의 블로그에 광고를 게시하기 위해서는 구글의 애드센스(Adsense)를 사용해야 합니다. html 코드를 에 직접 넣는 방법도 있으나 gatsby 플러그인을 사용하면 더 간단하게 적용할 수 있고, 매번 페이지를 생성할때마다 head에 넣어줄 필요가 없어서 적용 및 관리가 편하다는 장점이 있습니다. 방법 1. 개츠비 애드센스 플러그인 적용 우선 플러그인을 설치해봅시다. 아래 명령어와 같이 gatsby-plugin-google-adsense 플러그인을 npm 또는 yarn 통해 설치를 합니다. # npm npm install --save gatsby-plugin-google-adsense # 또는 yarn yarn add gatsby-plugin-google-ad..

permission_hanlder 라이브러리 flutter 에서 카메라와 같이 기기 권한 획득을 위해 편리하게 사용할 수 있는 라이브러리가 있습니다. 본 글에서는 permission_hanlder 라이브러리를 사용하면 쉽게 권한 획득을 할 수 있기 때문에, 해당 라이브러리를 사용해서 권한 획득하는 방법에 대해 소개합니다. 우선 아래 명령어를 통해 설치합니다. flutter pub add permission_handler 권한 획득하기 가이드 문서에도 설명이 잘되어 있으나 간단하게 정리하면, 아래와 같이 권한 획득 요청을 할 수 있습니다. if (await Permission.camera.request().isGranted) { // 권한 획득에 성공했을때에 대한 처리 로직 } else { // 실패한 경..

Intersection Observer API 이전에는 스크롤 위치에 따라 화면을 변화시키기 위해, 아래와 같이 scroll event listener 를 추가하여 사용했습니다. document.addEventListener("scroll", callback); 이렇게 스크롤로 화면 내의 요소(element)의 변화를 감지하는 일은, 스크롤을 조금만 움직여도 이벤트가 발생하며 사이트에 부하를 줄 수 있기 때문에 비효율적이었습니다. 비교적 최근 브라우저에서는 Intersection Observer 라는 API를 지원해주기 때문에 이전 방법(스크롤 이벤트를 이용한 방법)보다 효율적이고, 쉽게 컨트롤 할 수 있게 됐습니다. Intersection Observer 사용하기 사용하는 방법은 관찰자(Observer..

플러터 프로젝트에 원하는 프로젝트 적용하기 본 글에서는 네이버 나눔글꼴을 플러터(flutter) 프로젝트에 적용하는 방법에 대해 소개합니다. https://hangeul.naver.com/font/nanum 네이버 글꼴 모음 네이버가 만든 150여종의 글꼴을 한번에 만나보세요 hangeul.naver.com 물론 어떤 폰트를 사용하더라도 적용하는 방법은 동일합니다. 우선, 적용할 폰트를 다운로드 받은 뒤에 프로젝트에 옮깁니다. 본 글에서는 프로젝트 root에 assets/fonts 라는 디렉토리를 생성하도록 하겠습니다. 그리고, 해당 폴더에 다운로드 받은 폰트를 넣습니다. pubspec.yaml 폰트 설정 이미지든 폰트든 리소스 파일을 사용하려면 pubspec.yaml 파일에 정의해햐 합니다. 플러터 프..

WebView 웹뷰(webview)는 네이티브 앱에서 웹 컨텐츠를 띄우기 위해 사용하는 기술입니다. 예시를 들면, 모바일 앱 내에서 결제를 진행할 때, 결제 창을 별도의 브라우저를 띄울 필요 없이 앱 내부에서 바로 웹 화면을 띄울 수 있습니다. 위와 같은 방법으로도 사용할 수 있지만, 스타트 업과 같이 작은 규모의 회사에서는 안드로이드와 iOS 개발, 2개 플랫폼에 대해 모두 개발하기에 리소스가 많이 들기 때문에 웹 개발을 한 뒤 네이티브 앱에 웹 뷰를 띄어서 서비스를 제공하기도 합니다. Flutter에서 Webview 띄우기 flutter에서 손쉽게 웹 뷰를 사용 할 수 있도록 도와주는 라이브러리가 있습니다. 본 글에서는 flutter 개발 팀에서 만든 라이브러리인 webview_flutter 를 사용..

tailwindcss tailwindcss는 자주 사용하는 css를 모아놓은 라이브러리로 편리한 유틸리티 css 라이브러리입니다. tailwindcss에는 정말 많은 스타일들이 이미 정의가 되어있어서, 따로 css를 작성할 필요없이 class(className)에만 추가를 하면 스타일이 입혀집니다. 예를 들어, 둥근 사각형을 만든다고 했을때 아래와 같이 html 코드에 class 속성을 추가하고, border-radius 값을 정의해줘야 합니다. .rounded-rectangle { width: 50px; height: 50px; border-radius: 0.25rem; } 만약, tailwindcss 를 사용하게 된다면 훨씬 간단해집니다. (사용하지 않았을때 코드와 비교했을때, 훨씬 간단하게 작성할 ..