Cloud Computing On Demand

개발자의 컴퓨터는 항상 좋은 퍼포먼스를 내는 장비여야 합니다. 개발 도구도 나날이 무거워지고 언어나 런타임시에 사용하는 가상환경도 많은 리소스를 요구하기 때문입니다. 다만 좋은 장비를 새로 지급받거나 구매해서 쓰게되면 손에 착착~ 감기게 맞추어둔 개발 환경을 동일하게 맞추는 스트레스가 발생하기 마련입니다.

제가 주력 개발도구로 사용하고 있는 것은 비주얼 스튜디오 코드 Visual Studio Code 입니다. 상용 개발도구가 아닌 부문에서는 이미 압도적인 사용 점유율을 보이고 있는데요, 워낙 이사람, 저사람, 이 글, 저 글을 통해 얻은 정보들로 환경을 셋업해둔 탓에 새로 받은 장비에 설치하기가 겁나더군요.

하지만, 우리의 사랑 마이크로소프트는 비주얼 스튜디오 코드의 개발 환경을 동일하게 맞추어주는 도구를 내장해 두었습니다. 이름하여 <Setting Sync> 기능입니다. 이 기능은 원격지에 비주얼 스튜디오 코드의 환경 정보를 저장하고, 동일한 계정으로 로그인하는 비주얼 스튜디오 코드들에 대하여 환경 정보를 동기화 하도록 합니다.

1단계 - 원본 컴퓨터에서의 작업

당연하겠지만 우리가 제일 먼저 해야 할일은 원본 컴퓨터 혹은 환경 셋업이 되어 있는 컴퓨터에서 개발 환경 정보를 <Setting Sync> 기능을 통해 원격지에 저장하는 것입니다. 비주얼 스튜디오 코드를 실행하고 아래의 단계를 따라하면 손쉽게 설정할 수 있습니다. 

<Settings Sync> 기능 활성화하기

우선 <Settings Sync> 기능을 활성화 해보겠습니다. 비주얼 스튜디오 코드의 좌측 하단의 프로필 이미지를 누르면 <Turn on Settings Sync...> 메뉴가 있습니다. 선택해보겠습니다.

잘 동작하는 기능입니다만 아직 프리뷰 Preview 단계이기 때문에 간단한 동의 절차를 거쳐야 합니다. 문서를 읽어 보시거나 <Turn On> 버튼을 눌러 동기화 기능을 활성화 합니다. 

<Turn On> 을 누르면 <Settings Sync> 커맨드 팝업이 뜹니다. 동기화할 항목을 선택할 수 있으며 저는 완전히 동일한 환경을 만들기 위해 모든 항목을 선택된 상태 그대로 두었습니다. 로그인 되어 있지 않기 때문에 <Sign in & Turn on>를 눌러 로그인을 하고 동기화 기능을 활성화 하겠습니다. 

사용할 수 있는 로그인 방법은 두가지 입니다. 마이크로소프트 계정이나 깃헙 계정을 이용할 수 있습니다. 개발자라면 깃헙 계정을 대부분 가지고 계실테니 저도 깃헙 계정으로 해보겠습니다. 깃헙에서 종종 보셨을 권한 승인 절차를 거치면 연동이 완료됩니다. 

승인 절차가 완료되면 비주얼 스튜디오 코드는 선택된 환경 설정에 대한 동기화 작업을 시작합니다. 동기화가 완료되면 비주얼 스튜디오 코드 우측 하단에 알림이 표시되며 <Show log> 링크를 눌러 상세한 동기화 내용을 확인할 수 있습니다. 

최초 한번은 이렇게 동기화가 되고 이후 동기화에 대한 설정을 하려면 Mac 기준으로 <shift>+<command>+<p>를 눌러 커맨드 팔레트를 열어 <Settings Sync> 기능을 열어야 합니다. 아래 화면에서 <Show Settings>를 눌러보겠습니다. 

사이드바가 열리며 현재 동기화 된 설정의 내용을 확인할 수 있습니다. 이제 원래의 컴퓨터에서 해야 하는 작업은 마무리가 되었습니다. 항상 동기화가 되기 때문에 언제든 원래 컴퓨터에서 환경 설정을 바꾸면 원격지에 동기화되어 다른 컴퓨터에도 변경된 내용이 반영되게 됩니다. 

2단계 - 새로운 컴퓨터에서의 작업

새로운 컴퓨터에서의 작업도 크게 다르지 않습니다. 비주얼 스튜디오 코드를 실행하고 깃헙 계정으로 로그인하여 동기화된 환경 설정을 가져오도록 해보겠습니다. 원본 컴퓨터에서 했던 작업과 마찬가지로 프로필 이미지를 눌러 <Turn on Settings Sync...> 메뉴를 실행합니다.

꼼꼼하고 친절한 마이크로소프트는 이번에도 기능이 프리뷰라는 것을 알려주고 정말로 켤 것인지를 한 번 더 확인하게 합니다. 우리는 과감하게 <Turn On>을 눌러 동기화 작업을 하겠습니다. 네, 모든 것이 완전히 동일하니 따로 설명하지 않고 스크린 샷으로 대치하겠습니다. 

계정으로 로그인 하고 동기화가 완료되면 원본 컴퓨터에서와 마찬가지로 <shift>+<command>+<p>를 눌러 <Settings Sync> 기능을 열어봅니다. 재미있는 것은 커맨드 팔레트에서 사용했던 히스토리까지 넘어와 있는게 보입니다. 바로 설치한 비주얼 스튜디오 코드인데도 말이죠!

<Settings Sync> 내용을 보면 각 항목이 여러개 나와 있는 것이 보입니다. 같은 항목에 대하여 여러번 동기화가 된 경우 히스토리 성으로 그 내역이 동기화 되고 리스트화 되어 보이는 것으로 추정됩니다 -_-;; (네, 프리뷰입니다 여러분! 오류일수도 있지만 저는 마이크로소프트를 믿습니다!!) 

왼쪽 하단의 <Synced Machines> 목록을 보면 원래의 컴퓨터와 새로운 컴퓨터가 목록에 보입니다. 알아보기 힘드니 눈에 익숙하도록 이름을 바꾸어 두었습니다. 

이렇게 새로운 장비에 비주얼 스튜디오 코드를 설치하고 기존의 개발 환경을 그대로 옮겨와 봤습니다. 생각보다 쉬운 절차이고 앞으로도 유용하게 사용할 수 있을 것 같은 느낌입니다. 어렵게 한 땀, 한 땀 환경 설정을 옮기지 마시고 쉽게 동기화해서 셋업 시간을 아껴보시기 바랍니다! 보다 자세한 내용은 아래의 공식 문서를 참고하세요!

code.visualstudio.com/docs/editor/settings-sync

거의 두, 세달정도 코드 작업을 못했던 것 같습니다. 아예 안한건 아니었지만 외부 소스코드에 대한 분석 이외에는 딱히 코드를 보지 않았더니 반대급부로 git에 대한 명령어들이 기억속에서 사라지기 시작했습니다 ;;;

그런데 오늘! 제가 작성했던 코드가 잘 동작하지 않는 예외 케이스가 발생되었다는 소식을 접수했습니다. 급한일을 부랴부랴 끝내고 비주얼 스튜디오 코드를 열고나니... 원격 브랜치의 저장소들이 그 사이 변경된 내용이 있을텐데 하는 불안감이 엄습했습니다. 

원래의 저장소, 포크한 내 저장소, 그리고 동료의 작업 저장소. git remote -v 명령으로 확인해보니 아직까지 원격 저장소 목록은 잘 저장이 되어 있었습니다. 이 저장소들에서 변경된 내용을 어떻게 가져오지... 하면서 좀 뒤져서 다시 기억을 살려보았습니다!

로컬 저장소에 지정된 원격 저장소 목록 확인

로컬 저장소에서 git 명령을 이용하여 추가 되어 있는 원격 저장소의 목록을 확인할 수 있습니다. 

% git remote -v
origin  git@git.nopd.company.com:nopd/client.git (fetch)
origin  git@git.nopd.company.com:nopd/client.git (push)
upstream        git@git.nopd.company.com:awesomeproject/client.git (fetch)
upstream        git@git.nopd.company.com:awesomeproject/client.git (push)
myfriend        git@git.nopd.company.com:myfriend/client.git (fetch)
myfriend        git@git.nopd.company.com:myfriend/client.git (push)

origin은 제 개인 저장소, upstream은 프로젝트의 원래 저장소, 그리고 myfriend는 동료의 저장소 입니다. 

각 저장소의 업데이트 사항 가져오기

이제 각 저장소의 업데이트 사항을 가져오는 명령을 입력해 보겠습니다. 

% git remote update
Fetching origin
Enter passphrase for key '/.ssh/id_rsa': 
Fetching upstream
Enter passphrase for key '/.ssh/id_rsa': 
Fetching myfriend
Enter passphrase for key '/.ssh/id_rsa': 
From git.nopd.company.com:myfriend/client
 * [new branch]      ISSUE_1 -> myfriend/ISSUE_1
 * [new branch]      ISSUE_2 -> myfriend/ISSUE_2
 * [new branch]      ISSUE_3 -> myfriend/ISSUE_3
   50c7deb..ff405ce  master -> myfriend/master

동료가 이렇게 열심히 일하는 동안 저는 놀았구나 하는 자괴감과 함께... 각 저장소의 변경 사항 확인시마다 SSH 키 값을 입력해서 동기화를 마쳤습니다. 

모든 브랜치 확인해보기

이제 로컬 저장소에 있는 브랜치와 원격의 브랜치를 확인해 보도록 하겠습니다. 명령은 git branch -a 입니다. 

% git branch -a 
  branch1
* branch2
  master
  remotes/origin/HEAD -> origin/master
  remotes/origin...
  ...
  remotes/upstream/master
  remotes/upstream...
  ...
  remotes/myfriend/master
  ...

원격 브랜치 가져오기

마지막으로 작업하고 싶은 브랜치를 현재 로컬 브랜치로 가져오도로 하겠습니다. 특별히 upstream 에 변경된게 없어서 로컬 (origin/master) 브랜치에 업스트림 브랜치 (upstream/master) 의 변경사항을 땡겨오기로 했습니다. 로컬 브랜치를 하나 더 따려다... 일단 마스터에 합치고 브랜치를 나누는게 편해서... ㅎㅎ

% git pull upstream master
Enter passphrase for key '/.ssh/id_rsa': 
From git.nopd.company.com:awesomeproject/client
 * branch            master     -> FETCH_HEAD
Updating 48bc962..ff405ce
Fast-forward
 .....													  |  15 +++++++-
 .....													  | 220 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------
 .....													  |   8 ++--
 package-lock.json                                        |  29 ++++++++------
 package.json                                             |   2 +-
 5 files changed, ...

매일매일 쓰지 않으면 잊어버리는 것들. 시간을 꼭 내서 하루 한줄의 코딩, 하루 한 번의 명령어 입력도 잊지 말고 해야겠습니다 ㅎㅎㅎ 그리고 미래의 나를 위해 블로그에 살짝~ 남겨두는 활동을 꼭 꼭! 해야겠습니다!

새로운 개발환경은 늘 어색합니다. 플러터(Flutter)를 안드로이드 스튜디오 환경에서 다시 공부하기 시작하면서 매일매일 새로운 느낌으로 시행착오를 겪고 있습니다. Mac 운영체제의 Big Sir의 업데이트 때문에 설치후 재기동을 하고 난 뒤 안드로이드 스튜디오에서 겪은 문제에 대한 이야기입니다.

운영체제 업데이트전까지 아무런 문제 없이 안드로이드 스튜디오에서 플러터로 코드를 만들고 안드로이드 시뮬레이터를 이용해 디버깅을 하고 있었습니다. 그런데 업데이트 설치후에 갑자기 안드로이드 스튜디오가 시뮬레이터에서 앱을 실행하지 못하고 에러를 토하는 현상을 맞딱들였습니다. 

안드로이드 스튜디오를 여러번 재기동해도 시뮬레이터의 목록이 보이지 않았습니다. 안드로이드 스튜디오에서 코드를 실행하면 시뮬레이터가 기동은 되었지만 (왜지...) 디버거가 연결이 안되고 앱이 배포되지 않았습니다. 안드로이드 시뮬레이터를 관리하는 AVD Manager 를 이용해 만들어 둔 이미지를 개별적으로 실행하면 <Unable to locate adb>라는 에러 메세지가 출력되었습니다. 

구글에서 검색을 해보니 이 현상이 일어나는 원인중 대표적인 것이 안드로이드 디버거인 adb 의 경로가 제대로 설정되지 않아 실행되지 않는 경우라는 이야기가 많았습니다. 안타깝게도 제 경우에는 터미널에서 adb 가 아주아주 원활히 잘 실행되고 있었기 때문에 환경변수에서 path 설정이 잘못된 것으로는 생각되지 않았습니다. 

그러던 중 <Project Structure> 에서 SDK 설정이 제대로 되지 않았거나 삭제된 경우 (아마도 업데이트의 여파?) 비슷한 문제를 겪었다는 글을 발견할 수 있었습니다. 밑져야 본전, 정말로 SDK 설정이 <갑자기> 사라진 것인지 확인해 보기로 했습니다. 설마 안드로이스 스튜디오가 그런 일을 저질렀겠냐는 생각을 하던 바로 그 순간...

저는 제 눈을 의심해야 했습니다. Project 의 SDK가 <No SDK>를 가리키고 있었습니다. 누가 이런 짓을 한 걸까요? 그건 아무도 모릅니다. 며느리도 모릅니다. 다만, SDK 설정이 사라졌다는 사실이 중요한 것이고 이것을 바로 잡아 문제가 해소되는지 확인해야 했습니다. 

드롭다운 리스트를 열고 로컬 환경에 설치된 안드로이드 SDK중 28버전의 API 를 다시 선택했습니다. 그리고 창을 닫고 기도를 했습니다. 집나간 시뮬레이터가 어서 돌아오게 해주세요. 모든걸 용서하겠다고...

오오오오.. 아무 것도 없던 디바이스 선택 드롭다운 리스트에 만들어둔 시뮬레이터가 똬악하고 보였습니다. 프로젝트를 실행해보니 디버거 연결도 잘 되고 앱도 정상적으로 배포되는 것을 확인할 수 있었습니다. 왜 이런일이 일어난 것인지는 알아낼 수 없었지만 유사한 현상이 발생헀을 때, 이제 당황하지 않고 문제를 처리할 수 있을 것 같은 자신감이 샘솟았습니다. :-)

안드로이드 스튜디오의 셋업이 끝났으니 이제 플러터 프로젝트를 만들고 자동 생성되는 기본 구조를 살펴보겠습니다. 프로젝트가 생성되면 조금 복잡해 보이는 디렉토리 구조와 프로젝트에 필요한 기본 파일들이 생성됩니다. 

안드로이드와 iOS를 모두 지원하는 앱을 만들어야 하기 때문에 android, ios 이름을 갖고 있는 폴더가 먼저 눈에 띕니다. 우리가 직접 코드를 만들어 지지고 볶는 곳은 main.dart 파일이 포함된 lib 디렉토리라고 합니다. 그럼 main.dart 를 한 번 열어보겠습니다. 보물상자를 여는 기분으로다...

복잡해 보이는 main.dart 파일이지만 코드 블럭을 접어서 보면 크게 위의 다섯가지 부분 정도로 나뉩니다. 모듈이나 라이브러리를 불러오기 위해 사용하는 import 가 가장 먼저 눈에 띕니다. 그리고 자바나 C, C# 등에서 익숙하게 봤을 main() 함수가 어플리케이션의 진입점이 된다는 것을 눈치챌 수 있었습니다.

main() 에 자동 생성된 코드가 거의 없을 거라는 것을 예상하셨겠지만, 정말로 들어 있는 내용이 없습니다 ^^;; main() 함수는 7번 행부터 정의하고 있는 실제 플러터 어플리케이션의 시작이라 할 수 있는 <위젯>을 호출하는 역할만 수행하고 있습니다. 샘플 프로젝트에는 MyApp 이라는 클래스가 StatelessWidget 을 상속받아 생성되고 있습니다. 

<위젯>은 플러터에서 UI의 컴포넌트나 화면 단위를 만드는 단위입니다. 오래된 사람인 저는 컨트롤이라는 용어가 익숙합니다만 이제 <위젯>이라는 단어에 스스로를 맞춰보도록 하겠습니다 ^^;; 

위젯은 크게 상태 값이 보존되는 위젯과 상태 값이 보존되지 않는 위젯으로 나뉜다고 합니다. MyApp 과 MyHomePage 클래스가 상속 받고 있는 StatelessWidget 과 StatefulWidget 이 정의하고 있는 위젯 클래스의 목적을 나타내주고 있습니다. 자세한건 저도 아직 잘 몰라서 천천히 좋은 감정으로 알아가 보도록 하겠습니다. ㅋ

샘플 프로젝트를 생성했을 때 이 프로젝트는 완전히 빈 깡통 프로젝트는 아닙니다. 간단하게 StatelessWidget과 StatefulWidget의 차이를 알아볼 수 있는 카운트 앱이 샘플 프로젝트에 담겨 있습니다. MyApp 과 MyHomePage 클래스에 들어 있는 코드를 자세히 볼까요?

최초 샘플 프로젝트 생성시에는 엄청난 양의 주석이 같이 있습니다. 주석을 모두 제거하면 두 클래스의 코드는 몇 줄 되지 않습니다. MyApp 클래스는 어플리케이션의 윤곽을 나타내기 위한 위젯을 리턴하는 코드가 전부입니다. 코드 내에서 다시 MyHomePage 클래스를 사용하여 `Flutter Demo Home Page`라는 타이틀을 가진 StatefulWidget 을 만들고 있습니다.

MyHomePage 위젯도 코드가 무척 단순합니다. 클래스의 인스턴스가 만들어 질 때 매개변수로 타이틀을 받아서 멤버 변수에 저장하고 _MyHomePageState 클래스 형식으로 createState() 함수를 호출해 위젯의 상태를 저장할 객체를 생성하게 됩니다. 

마지막으로 _MyHomePageState 클래스입니다. 주석이 많이 생기기 때문에 주석을 삭제하면 내용을 한 눈에 알아보기 더 쉽습니다. 물론 주석에 자세한 설명들이 있기 때문에 공부하는 동안에는 한 번 읽어보는 것도 도움이 될 것 같긴합니다. 

멤버 변수로 _counter 를 갖고 있으며 앱이 수행되는 동안 카운터 된 숫자를 기억하기 위해 사용하는 변수입니다. 앱을 실행하면 더하기 floatingActionButton 이 하나 화면에 나오고, 버튼을 누를때마다 _counter 의 값을 1씩 증가시킵니다. 내장 함수인 _incrementCounter() 에 증감연산자를 사용해 _conuter++ 를 실행하는 코드가 보입니다. 

이처럼 플러터는 값의 저장, 보존이 필요한 경우 StatefulWidget 과 State 를 사용하고 그렇지 않은 경우 StatelessWidget 을 사용한다는 점을 기억하고 익숙해져야 할 것 같네요!