🫧

플러터 시작하기

플러터 설치 및 VSCode 세팅 가이드입니다.읽는데 14분 정도 걸려요.

들어가며...

이 포스트에선 플러터(Flutter) 개발을 시작할 때 세팅해야할 전 과정에 대해 설명합니다.
Flutter SDK 설치부터 에뮬레이터 세팅, VSCode 세팅, 추가로 유용한 단축키에 대해서 알아봅니다.
다만, 단축키는 운영체제, 에디터 환경, 설정에 따라 다를 수 있으니 이점 참고 바랍니다.

이미 설치를 완료하신 분들도 시간 내셔서 VSCode 세팅부터 읽어보시는 것을 강력 추천드립니다.

블로그 주인장은 M1 Mac 환경에서 세팅하였기에 리눅스 계열 세팅방법을 기준으로 다뤄봅니다만,
윈도우 머신에서의 세팅도 다뤄볼 겁니다. (다만, 실제 테스트는 하지 않았기에 오류가 있을지도 모릅니다)

참고로 아래의 모든 설치과정은 노마드코더의 강좌를 정리한 자료입니다.

Flutter SDK 설치

Flutter SDK를 설치할 때 방법이 크게 두 가지로 나뉩니다.
첫 번째는 Flutter 공식 사이트에서 제공하는 방식을 따라가는 방법
두 번째는 패키지 매니저를 이용해서 설치하는 방법

제 개인적인 생각에는 패키지 매니저를 이용하는 방법이 더 간단해 보입니다.
첫 번째 방법을 따라하려면 환경 PATH도 설정해야 하기에 좀 무서워 보이기 때문이죠...
(그리고 제가 이 방법밖에 안해보기도 했구요...)

그래도 일단은 두 방법 모두 소개해 드리겠습니다.

공식 사이트

  1. 플러터 공식 페이지로 접속합니다.

  2. Get started로 들어갑니다.
    230913-211858

  3. 본인 운영체제에 맞는 Flutter SDK를 설치합니다.
    230913-212121

    이후에는 공식 사이트에서 제공하는 문서를 천천히 따라하시면 됩니다.

패키지 매니저 (MacOS)

  1. Homebrew에 들어갑니다.
    230913-214251

참고로 Homebrew는 MacOS에서 사용할 수 있는 대부분의 개발자도구를 터미널로 설치할 수 있는 강력한 도구입니다.
Flutter가 아니더라도 반드시 설치하는게 정신건강에 이롭습니다.

  1. 터미널을 열어줍니다.

  2. 아래의 명령어를 입력하여 Homebrew를 설치합니다.
    (공식 사이트에서 복사하는 것을 권장합니다)

Terminal
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. 아래의 명령어로 Flutter SDK를 설치합니다.
Terminal
brew install --cask flutter

패키지 매니저 (Windows)

  1. Chocolatey - individual에 들어갑니다.
    230913-213419

  2. PowerShell을 관리자 권한으로 실행합니다.

  3. 아래의 명령어를 입력하여 Chocolatey를 설치합니다.

PowerShell
Get-ExecutionPolicy

만약 Restricted 라고 뜬다면 아래의 명령어 중 하나를 입력하면 됩니다.

PowerShell
Set-ExecutionPolicy AllSigned
또는
Set-ExecutionPolicy Bypass -Scope Process

그 이후에 아래의 긴- 명령어를 입력합니다.
(공식 사이트에서 복사하는 것을 권장합니다)

PowerShell
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Chocolatey 설치가 완료되었다면 choco 라는 명령어가 실행 가능할 겁니다.

  1. 아래의 명령어로 Flutter SDK를 설치합니다.
PowerShell
choco install flutter

설치 확인 방법 (1)

터미널 창에 flutter 를 입력해봅시다.
Command not found 와 같은 에러를 제외하고 뭐라도 뜬다면 설치가 완료된 것입니다.

애뮬레이터 설치

아래의 공식 문서를 통해 설치하는 것이 가장 바람직합니다.
설명도 친절해서 왠만하면 설치하는데 문제가 없을겁니다. (아예 없진 않음...)
관련 링크를 아래에 정리합니다.

🫧MacOS - ios setup
🫧MacOS - android setup

🫧Windows - android setup

설치 확인 방법 (2)

터미널 창에 flutter doctor 를 입력해봅시다.
230913-220216

SDK, 애뮬레이터, 에디터까지 발생하는 문제사항을 한 눈에 파악할 수 있습니다.

참고로 최초 실행시 안드로이드 라이센스에 동의하라는 에러 혹은 경고가 나타날 수 있습니다.
그럴 땐 당황하지 마시고 아래의 명령어를 입력하면 됩니다.
(설치할 때 꼼꼼히 읽어보면 이런 내용도 있다는 걸 확인할 수 있죠...)


Terminal
flutter doctor --android-licenses

Troubleshooting

간혹가다 Xcode command line tools에서 문제가 발생하는 경우가 있습니다.
명령어 라인 도구는 Xcode를 설치할 때 자동적으로 설치됩니다.

하지만 제 경우에는 Xcode를 설치하기 전에 아래의 명령어로 미리 설치한 적이 있었습니다.

Terminal
xcode-select --install

명령어 라인 도구를 먼저 설치하고 Xcode를 설치하면 가끔 정상동작하지 않는 에러가 발생하는 거 같습니다.
이런 경우에는 명령어 라인 도구를 제거하고 다시 설치하면 해결됩니다.

VSCode 세팅

사실 마켓플레이스에서 Flutter, Dart 확장을 설치하기만 하면 개발할 준비가 끝나긴 합니다.
하지만, 개발 편의성과 코드 통일을 위해서 필요한, 혹은 유용한 확장과 setting.json을 공유할까 합니다.

setting.json

아래와 같은 키값을 추가하면 개발에 있어 편의성이 증진됩니다.
하지만, 설정을 건드릴 땐, 본인의 설정과 충돌이 생기는지 반드시 확인한 후에 추가하시는 것을 권장합니다.

참고로, setting.json은 명령 팔레트를 열고 settings.json을 검색하면 바로 나옵니다.
또 참고로, 명령 팔레트는 Command(Window) + Shift + P 명령어 조합으로 열 수 있습니다.

settings.json
{
  ...
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "dart.previewFlutterUiGuides": true,
}

Line 3-5의 설정은 자동으로 필요한 모든 곳에 const 키워드를 삽입해주는 설정입니다.
flutter에서 const를 사용하는 것은 매우 중요한데 그 이유에 대해서는 다음에 설명하도록 하겠습니다.
일단은 가능하다면 반드시 const를 붙이는게 좋고, 이를 자동으로 붙여줄 수 있다는 것만 기억합니다.

Line 6의 설정은 flutter 위젯을 트리 구조로 선으로 연결해주는 설정입니다.
230913-222546

flutter은 위젯의 depth가 깊어지는 단점이 있는데 이를 어느정도 극복하게 해주는 유용한 설정입니다.

Error Lens

230913-223129

Error Lens는 코드 문제의 원인을 에디터상에 바로 띄워주는 확장입니다.
실시간으로 무슨 에러가 있는지 한 눈에 확인할 수 있는게 개인적으로 매우 만족하면서 사용하고 있습니다.

230913-223528

개인적으로 눈뽕(?) 방지를 위해 line 이 아닌, message 로 설정하는 것을 추천드립니다.

230913-224036

또한, 분석 레벨에서 info 는 제거해주시는 것을 추천 드립니다.

flutter의 경우 info가 중첩되서 뜨는 경우가 많기에 위 두 세팅을 바꾸지 않으면 아래와 같은 눈뽕(?)을 자주 겪게 될 지도 모릅니다...
230913-223954

Image preview

230913-224456

Image preview는 로컬, 네트워크 이미지를 미리보기 형식으로 띄워주는 확장입니다.
FE 개발 입장에서 이미지나 svg, icon을 사용할 일이 많은데, 이를 미리볼 수 있다는 것 만으로도 많은 시간을 절약할 수 있습니다.

VSCode 단축키

개발 시간을 줄여주는 유용한 단축키 및 snippets 를 소개합니다.

Code Action

230913-224956

flutter 개발을 하다보면 중간에 위젯을 다른 위젯으로 감싸거나, 부모 위젯을 통째로 드러내야 하는 경우가 잦은데,
이를 일일이 코드를 잘라내고 붙여넣기 하는건 매우 귀찮은 작업입니다.

하지만 이 기능을 수행하는데 있어 Code Action은 매우 유용한 도구들을 제공합니다.

기능을 수행하고자 하는 위젯의 좌측에 💡(전구) 모양 아이콘을 클릭하면 해당 위젯에서 수행할 수 있는 여러 기능들을 보여줍니다.

또는 Command(Window) + . 단축키로 빠르게 Code Action에 접근할 수 있습니다.
매우매우 자주쓰는 기능이니 본인 에디터 환경에 맞는 단축키를 외우도록 합시다.
(사실 외울 필요도 없이 쓰다보면 손가락이 알아서 움직이게 된다는...)

Intellisense

쉽게 말하면 코드 추천 + 자동완성 기능입니다.

코드를 입력하다 보면 자동으로 코드를 추천해줄텐데, 실수로 이를 꺼버리는 일이 발생합니다.
이 경우 코드를 지웠다가 다시 치는 것 보단, Option(Alt) + Space로 다시 활성화 시키는 것이 더 유용합니다.

st + (intellisense)

230913-230035

플러터의 위젯의 대부분은 Stateful, Stateless 위젯을 상속 받습니다.
그에 따라 여러 메서드를 override해서 사용해야만 하는데요,
이 모든 코드를 일일이 입력하는 것도, 기억하는 것도 쉽지 않습니다.

이 경우에는 st를 입력하고 intellisense 기능을 이용하면 VSCode가 알아서
Stateful, Stateless 위젯의 필수 부분을 알아서 완성해주고,
클래스 이름과 관련한 부분 모두를 선택한 상태로 사용자의 입력을 기다리게 됩니다.

따라서 사용자는 아래의 절차를 밟으면 간단하게 위젯 하나를 생성할 수 있게 됩니다.

  1. st + (intellisense)
  2. 원하는 부모위젯(Stateful, Stateless) 선택
  3. 원하는 클래스 이름 입력

마무리

지금까지 Flutter SDK 설치부터 VSCode 단축키까지 개발에 앞서 필요한 모든 준비단계를 알아봤습니다.
추가로 필요한 설정이나 기능은 알아보시고 추가하여 사용하신다면, 개발이 조금이라도 더 즐거워지리라 생각됩니다.

긴 글 읽어주셔서 감사드리고, 모두 알찬 Flutt-er 생활 되시길 바랍니다!