VScode로 플러터 개발환경 구축하기

나는 현재 데스크탑 앱을 개발하고 있고, 웹 개발에는 큰 관심이 없는 데스크탑 앱 개발자이다.

(어릴 때 부터 모바일앱/웹 개발은 왠지 모르게 끌리지 않는다.)

 

새로운 데스크탑 GUI 프레임워크를 찾아보던 중, 그저 앱 개발 프레임워크인 줄 만 알았던 플러터가 데스크탑 앱 까지 대응된다는 소식을 들었다.

 

플러터 출시 초기엔 불확실성과 함께 이래저래 잡음이 많이 들리길래 큰 관심은 없었지만, 2022년에 플러터 3.0으로 업데이트 되면서, 윈도우/맥/리눅스 환경의 모든 데스크탑 앱을 만들 수 있게 되었고, 이젠 웹/모바일/데스크탑 환경에 모두 대응 가능한 프레임워크가 되었다..!

 

마침 새롭게 공부해보고 싶었던 후보 중에 하나였기에, 한번 찍먹해보기로 하였다.

(원래 내 주력분야는 C/C++이고, 선언형 언어는 처음 접해보기 때문에, 금방 때려치고 rust로 넘어갈 수 도 있다.)

 

개발환경 - M1 맥북(OS : 현재 최신버전의 소노마)

IDE - VScode

 

 

0. VScode

Download Visual Studio Code - Mac, Linux, Windows

 

플러터의 장점 중에 하나로 꼽히는 자체IDE가 있지만, 단축키나 여러 편의세팅이 되어있는 vsocde로 개발해볼 것이다.

 

 

1. Flutter 설치 (VScode extension)

 

vscode 익스텐션에 검색하면 나오는 플러터와 다트를 모두 설치 해 준다.

 

command + shift + p를 눌러 flutter doctor를 검색 후 실행하면, 오른쪽 밑에 경고창이 뜰텐데 Download SDK를 눌러 플러터SDK를 다운 받아주면된다. (다운로드하는 경로 알아두기)

 

다운로드가 끝나면 아래의 환경변수를 ~/.zshrc (or ~/.bashrc)에 추가 해 주면 된다. (zshrc나 bashrc 중 본인 환경에 맞는 파일에 넣어서 등록하면된다.)

(윈도우는 환경변수 편집 들어가서 PATH에 추가)

 

export PATH=아까다운받은경로:$PATH

 

 

환경변수를 추가하고 source로 적용해주면,

 

source ~/.zshrc (or ~/.bashrc)

 

 

다시 flutter doctor를 실행하면 실행결과에 뭔가 엄청나게 설치가 안되었다고 뜬다.

 

전부 설치 할 필요는 없고, 본인이 개발할 플랫폼에 맞춰서 다운로드 해주면되는데, 나는 macos와 ios만 다운로드 하겠다.

 

2. Xcode

 

결국 플러터도 만능 컴파일러를 사용해서 빌드하는 것이 아닌, 개발 플랫폼 환경에 맞춰서 컴파일러를 따로 돌리기 때문에, macos앱을 빌드하려면 기존의 macos 앱을 만드는 컴파일러가 필요하다. 즉 애플의 Xcode를 설치해 주어야 한다. 

 

 

 

 

예전에 잠깐 써보고 vscode가 더 편해서 지웠었는데, 컴파일러 용도로 다시 받게되었다..

 

xcode설치는 조금 오래걸린다.

 

3. Cocoapod

 

Xcode설치가 끝나고 Flutter doctor를 돌리면 Cocoapod이라는 라이브러리?만 하나 설치하면 되는데, 간단하게 설치될 줄 알았는데 몇개 오류가 떠서 앞쪽설치보다 시간이 좀 걸렸다...

 

공식 설치 페이지

CocoaPods Guides

 

flutter doctor가 알려주는 방법과, 위 사이트를 참고하면 그렇게 어렵진 않겠지만, 

 

귀찮으신 분은 걍 아래 코드를 한줄씩 터미널에서 실행하면된다.

 

이 순서로 실행하면 왠만한 오류는 없을듯..?

 

brew update
brew install rbenv ruby-build
sudo gem install drb -v 2.0.6
sudo gem install activesupport -v 6.1.7.7

# 이거 한줄이면 될줄 알았는데,,,
sudo gem install cocoapods

 

 

 

4. 끝

flutter doctor를 실행 해 보면 사용하지 않을 환경빼고는 [✓] 표시가 되어있을 것이다.

(안되어있다면 유감.. flutter doctor에서 시키는 대로 하면됨.)

 

환경이 모두 구축되었다면 command + shift + p에서 device를 개발하고 싶은 플랫폼으로 설정해주고, 

 

 

command + shift + p에서 새로운 프로젝트를 아무거나 하나 생성하고, 실행시켜보자.

 

 

아래처럼 창이 뜨고, 잘 실행되면 환경구축은 끝이다.

 

 

+. 추가 extension

 

요거는 개인적으로 요긴하게 쓰고있는 익스텐션이다. 한줄한줄 껍데기 씌우고 해야하는 작업을, 템플릿으로 한번에 생성하면 왠지 기분이 좋다.

 

 

++ 이제 생각해보니, 회사에서는 윈도우로 개발하고 집에서는 맥으로 작업하는 괴랄한 작업환경의 나에겐, 크로스플랫폼 지원 여부는 중요한 요소였다..!