brunch

You can make anything
by writing

C.S.Lewis

by Bobby Oct 19. 2022

Flutter Series 3 : 버전 관리

Flutter SDK 버전 관리(Sidekick + VScode)

Flutter는 2018년 v1.0.0이 출시된 이후, 최근 v3.3.3에 이르기까지 여러 번의 업데이트를 진행해 왔습니다. 4년간 메이저 버전이 2번이나 바뀐 것으로 보아 업데이트 속도가 꽤나 빠르다고 할 수 있습니다.


Flutter는 업데이트될 때마다 많은 성능 개선을 이루고 있기 때문에 항상 최신 버전으로 유지하고 싶은 욕심이 들게 됩니다. 하지만 호환성 문제가 발생할 수 있기 때문에 여러 Dependency가 걸려있는 프로젝트의 Flutter 버전을 쉽사리 올릴 순 없었습니다. 그리고 당연히 그때마다 flutter upgrade, flutter downgrade x.x.x 명령어를 반복해가며 여러 버전을 오가게 됩니다. 상당히 귀찮은 과정이라고 할 수 있죠!


그래서 오늘은 Flutter의 여러 버전을 손쉽게 적용해 볼 수 있는 FVM 설정법에 대해 정리해 볼까 합니다.

FVM(Flutter Version Management)은 여러 버전의 SDK를 미리 설치한 후, 간단한 설정을 통해 전역 환경(Global) 혹은 각 프로젝트에 다양한 SDK를 적용할 수 있도록 도와주는 툴이라고 생각하시면 됩니다.

아래 순서대로 차근차근 따라오시면 어렵지 않게 설정하실 수 있을 겁니다. ( Mac + VSCode 환경에 대한 설정법입니다)


1. FVM 설치

brew 명령어를 통해 FVM을 설치해 줍니다.

    brew tap leoafarias/fvm 

    brew install fvm

성공적으로  FVM을 설치했다면, 아래와 같이 설치된 FVM의 버전을 확인할 수 있습니다.

2. Sidekick 설치

FVM은 터미널에서 커맨드를 통해 사용할 수도 있지만 GUI 도구로 사용하는 편이 훨씬 사용성이 좋다고 생각하여 Sidekick이라는 프로그램을 사용해 보려고 합니다.

먼저 링크로 접속하여 Sidekick을 설치합니다.


3. Sidekick에서 Flutter SDK 설치

Sidekick의 Releases 탭에서 다양한 버전의 SDK를 살펴볼 수 있고, 원하는 버전을 설치합니다. 저의 경우 2.10.5와 stable(3.3.3) 버전을 설치했습니다. 

여기까지 잘 따라오셨다면, PC에

기존 Flutter 환경 → 하나의 Flutter SDK 설치됨

FVM을 통해 관리되는 Flutter 환경 → 여러 개의 Flutter SDK 설치됨


두 가지가 동시에 존재하게 됩니다. 이후의 과정을 통해 IDE가 FVM의 Flutter 환경을 바라보도록 설정하고 다양한 SDK 버전을 사용해 볼 것입니다.


4. FVM Flutter SDK 적용

FVM의 Flutter 환경에는 위에서 다운로드한 다양한 버전의 SDK가 존재하기 때문에, FVM Flutter 환경을 바라보는 모든 프로젝트에 적용될 하나의 버전을 선정해야 합니다. 이를 ‘Global로 설정한다’라고  표현합니다.


Sidekick의 Installed 탭에서 각 버전의 우측 메뉴 버튼을 누르면 ‘Set as Global’ 메뉴를 확인할 수 있고 클릭 한 번으로 쉽게 Global 설정이 완료됩니다.

stable 버전을 global로 적용한 모습

위와 같이 Global 설정을 마치면 FVM 디렉터리 하위에 default라는 심볼릭 링크가 생성됩니다. default는 위에서 우리가 Global로 설정한 버전의 경로를 가리킵니다(…/versions/x.x.x or …/versions/stable). 즉, 우리가 어떤 버전을 Global로 설정하든 default 심볼릭 링크 하나로 접근하게 되는 구조인 거죠!

5. VSCode 설정

마지막 단계입니다!

이제 우리의 IDE가, 기존 설치된 Flutter 환경이 아니라 FVM의 Flutter 환경을 바라보도록 해주어야 합니다.


먼저 Sidekick을 열어 각자 Global로 설정한 버전에서, 아래 빨간 박스로 표시된 ‘Global’ 버튼을 클릭합니다.

위와 같은 창이 뜨게 되면, 빨간 박스 내부에 표시된 FVM 경로를 복사합니다.


VSCode를 열고, Code → Preference → Setting 순으로 메뉴에 접근하여 ‘flutter sdk path’를 검색해 줍니다. 아래와 같은 화면이 뜨면 ‘Edit in settings.json’을 누릅니다.

(빨간 박스의 내용처럼 ‘User’ 대상으로 설정을 해주어야 전체 프로젝트에 적용됩니다!)

json 파일이 열리면, 위에서 복사한 FVM 경로를  붙여 넣기 하여 아래와 같이 설정해 줍니다.

    "dart.flutterSdkPath": "/Users/admin/fvm/default/bin",

이후 VSCode를 재실행하면, FVM에 Global로 설정한 SDK 버전이 적용된 것을 확인할 수 있습니다.

FVM 설정 전
FVM 설정 후


6. 프로젝트 별 버전 설정

Sidekick을 사용하면 각 프로젝트마다 다른 SDK 버전을 쉽게 적용할 수 있습니다.

Project 탭에 들어간 후 원하는 프로젝트 폴더를 추가한 후, 프로젝트의 우측 하단 버튼을 눌러 원하는 버전을 선택합니다.

프로젝트에 특정 SDK 버전을 선택하게 되면 해당 프로젝트 하위에. fvm이라는 디렉터리가 생기는 것을 확인할 수 있습니다.

마지막으로 해당 프로젝트의 SDK Path 설정을 해주어야 합니다. 5번 과정에서 한 것처럼 

Code → Preference → Setting 순으로 메뉴에 접근한 후, 상단 탭에 해당 프로젝트의 이름을 클릭하고 ‘flutter sdk path’를 검색해 줍니다.

‘Edit in settins.json’ 버튼을 클릭하게 되면 해당 프로젝트 하위에 .vscode 디렉터리와 settings.json 파일이 생성되고, json 파일에 아래와 같은 설정을 추가해 주면 됩니다.

     "dart.flutterSdkPath": ".fvm/flutter_sdk",

(Sidekick 설정으로 .fvm/flutter_sdk에 기록된 SDK 버전을 바라보도록 설정하는 과정인 것 같습니다)

이 과정을 수행한 후 VSCode를 재실행해주면, 각 프로젝트에 설정한 SDK 버전이 적용된 것을 확인할 수 있습니다.


위 과정을 잘 따라오셨다면, FVM & Sidekick으로 설정한 다양한 Flutter SDK 버전을 별도의 flutter upgrade & downgrade 없이 바로 적용할 수 있습니다.


어떠셨나요? 글로 정리하고 나니 조금 길고 복잡해 보이네요.


한 번의 귀찮음만 잘 넘기면 Flutter SDK 버전 업데이트에 대한 대응과 프로젝트 별 SDK 버전 적용을 아주아주 수월하게 할 수 있을 겁니다. 꾹 참고 시도해 보시길 추천드립니다. 화이팅!


참고   

https://cshanjib.medium.com/setting-up-fvm-flutter-version-management-properly-ab45ade0dd55

https://sudarlife.tistory.com/entry/flutter-20-fvm을-이용해서-충돌없이-플러터-20-세팅하기-VSCode



작가의 이전글 Flutter Series 1: 좋은 벽돌 고르는 법
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari