Cloud Computing On Demand

안드로이드 운영체제와 iOS 운영체제를 위한 어플리케이션 뿐만 아니라 웹 앱, 데스크탑 어플리케이션까지 단일 코드로 만들 수 있다면 얼마나 편리할까요? 구글이 내놓은 UI 툴킷 플러터 Flutter 가 지향하는 바도 동일합니다. 그래서 다시 한 번 어플리케이션 개발의 로망을 갖고 플러터를 공부해 보기로 했습니다 :-)

플러터 SDK 설치하기

플러터 공식 홈페이지의 설치 가이드 : https://flutter.dev/docs/get-started/install

 

Install

How to set up your code editor.

flutter.dev

 

플러터로 개발을 하기 위해서는 어떤 환경을 대상으로 개발 작업을 할 것이냐에 따라 달라질 수 있습니다. 무모하게도 저는 안드로이드, iOS, 웹 뿐만 아니라 데스크탑 어플리케이션까지 한 번 목표로 해보도록 하겠습니다. 참고로, iOS 어플리케이션으로 배포를 하기 위해서는 맥 기기와 X code 가 필요합니다. 

플러터 SDK 설치는 두가지 방법이 있습니다. 하나는 플러터 공식 웹사이트에서 ZIP 으로 압축하여 배포하는 SDK 를 다운로드 받아 임의의 경로에 풀어서 사용하는 것이고, 다른 하나는 플러터 Git 에 릴리즈된 코드를 Clone 하여 사용하는 것입니다. 저는 후자의 방법을 택하여 로컬 환경을 준비해 보기로 했습니다. 

플러터 Github : https://github.com/flutter/flutter

 

flutter/flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond. - flutter/flutter

github.com

 

플러터 Github 리포지토리에서 초록색 Code 버튼을 눌러 주소를 복사합니다. 로컬 환경에 Git 이 설치되어 있지 않다면 여기서 <Download ZIP> 을 눌러서 코드를 받는 것도 가능합니다. 복사한 주소를 `git clone https://github.com/flutter/flutter` 명령으로 로컬 환경에 복제합니다. 용량이 꽤 크기 때문에 시간이 좀 걸릴 수 있습니다. 

복제가 완료되면 X code, 안드로이드 스튜디오, VS Code 등 개발, 빌드 도구가 플러터에 쉽게 접근할 수 있도록 PATH 환경 변수에 경로를 추가해 주어야 합니다. ZIP 으로 다운로드 받아 압축을 푼 경우에도 동일하게 환경변수를 추가해 주면 됩니다. 

//
// flutter 의 최신 릴리즈를 Clone
//
$ git clone https://github.com/flutter/flutter
Cloning into 'flutter'...
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 252325 (delta 0), reused 0 (delta 0), pack-reused 252324
Receiving objects: 100% (252325/252325), 107.44 MiB | 2.17 MiB/s, done.
Resolving deltas: 100% (193972/193972), done.
Checking out files: 100% (4917/4917), done.

//
// PATH 환경변수에 Flutter Bin 경로를 추가
// .bash_profile 이나 .bash_rc 에 추가하는 것을 권장
//
$ export PATH="$PATH:/Users/nopd/dev/flutter/bin"

//
// 환경변수가 잘 셋업 되었는지 which 명령으로 확인
//
$ which flutter dart
/Users/nopd/dev/flutter/bin/flutter
/Users/nopd/dev/flutter/bin/dart

 

플러터 개발환경 점검하기

플러터는 Doctor 라는 도구를 제공합니다. 터미널에서 `flutter docter -v` 명령을 입력하면 플러터 툴이 추가로 다운로드되어 설치되고, 설치가 완료된 이후 개발 환경 점검을 진행하게 됩니다. 이 도구를 이용하여 개발, 빌드 환경에 필요한 도구가 설치되었는지 확인할 수 있고, 설치된 도구가 플러터를 이해하기 위해 추가로 필요한 플러그인 등이 준비되었는지 확인해 줍니다. 

플러터 개발에 필요한 도구들은 대략 아래와 같습니다. 

• Flutter SDK : 지금 막 설치 완료한 Flutter 개발을 위한 툴킷
• X code : Flutter 로 개발한 Dart 코드를 iOS 환경의 바이너리로 빌드할 때 사용 (Mac Only)
• Android Studio : Flutter 로 개발한 Dart 코드를 안드로이드 환경의 바이너리로 빌드할 때 사용 (Mac / Windows)
• VS Code : Flutter 의 Dart 언어로 코드를 개발할 때 사용할 코드 에디터 (단, 다른 도구를 써도 무방)

//
// Flutter Doctor 를 설치
// (Doctor 는 개발 환경에 문제가 있는지를 점검해 주는 도구)
//
$ flutter doctor -v
Downloading Dart SDK from Flutter engine 280bbfc763cf1154e7fef04eda1565122254bcdc...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  258M  100  258M    0     0  1791k      0  0:02:27  0:02:27 --:--:-- 4955k
Building flutter tool...
...
...
// 설치가 끝나면 점검 작업을 시작
...
...

플러터 Doctor 가 환경 점검을 마치면 아래와 같은 결과 리포트를 출력해 줍니다. 운영체제별 빌드 환경은 코드를 실제 배포하기 위한 준비를 하면서 체크해 보기로 하고 일단은 VS Code 에 대하여 요청된 플러터 익스텐션 Flutter Extension 을 설치해 보도록 하겠습니다. 설치 이후에는 Doctor 를 한번 더 이용하여 잘 설치되었는지 확인해 보겠습니다. 

 

VS Code 플러터 확장 설치

VS Code 는 마이크로소프트가 만든 오픈소스 통합 개발 환경입니다. 제 경우에는 파이썬 Python 개발과 Node.js 개발, 그리고 Vue.js 를 이용한 UI 개발에 VS Code 를 활용하고 있습니다. 플러터를 개발할 수 있는 코드 편집기는 개인 취향으로 선택할 수 있습니다만 기왕이면 익숙한 툴을 사용하는 것이 좋다고 생각되어 VS Code 를 써보려는 중입니다.

VS Code 는 특정 언어나 환경에 종속되어 있지 않기 때문에 개발하려는 언어, 환경에 따라 필요한 플러그인 혹은 확장 Extension 을 설치해 주어야 합니다. VS Code 를 먼저 실행하고 왼쪽 툴바의 다섯번째에 위치한 확장 기능을 선택하여 플러터 확장을 검색, 설치해보겠습니다. 검색어에 Flutter 를 입력하면 플러터 개발/디버그 확장이 첫번째 결과로 출력됩니다. 

 

검색 결과의 `Install` 버튼을 누르면 확장이 설치됩니다. 잠시 기다리면 설치가 완료되고 버튼이 `Uninstall` 로 바뀐 것을 보실 수 있습니다. 이제 설치가 완료되었으니 Doctor 에게 다시 한 번 진료를 요청해 보도록 하겠습니다. 다행히 이번에는 모든 점검을 통과하여 그린 라이트가 켜진 결과를 받아볼 수 있었네요! 이제 개발할 준비가 되었으니 본격적으로 코드를 만들어 보도록 하겠습니다. 

...To be continued...

 

자바스크립트는 참 편리한 스크립트 언어이지만 다른 한편으로는 이해하기 힘든 녀석이기도 합니다. 이유인 즉선 너무 유연하게 사용할 수 있다보니 가끔 일반적인 언어, 컴퓨터 상식으로는 "왜 이렇게 동작하지?" 하는 경우들이 있기 때문입니다. 가장 대표적인 것이 조건 비교문을 이용하여 변수나 객체를 비교할때 입니다. 잘 동작할 것으로 생각했던 구문들이 정상적인 동작을 하지 않거나 예상치 못한 반응을 한다면 혹시 아래 표에 나온 경우중 하나가 아닌지 잘 살펴봐야 합니다. 아래 표는 http://dorey.github.io/JavaScript-Equality-Table/ 에서 업어왔습니다

 
Boolean 값인 True 와 1은 같은 값일까요? 그리고 True 와 "1"은 같은 값일까요? 조금 더 나아가 True 와 [1] 을 비교하면 어떻게 될까요? 두개의 이퀄 연산자(==)를 사용하여 자바스크립트에서 값을 비교하는 경우 위의 표에서 초록색으로 표시된 것처럼 결과가 리턴된다고 합니다. "" 와 0 이 같다는 생각을 해보셨나요? 혹은 "" 와 [[]] 가 같은 값으로 식별된다는 상상을 누가 해봤을까요? 

때문에 자바스크립트에서는 각 객체와 객체를 비교했을 때 값을 정확하게 예측하기 힘들다면 이퀄 연산자를 두개 이어쓰는 대신 세개(===)를 쓰는 것이 좋습니다. 세개의 이퀄 연산자를 사용하는 경우 엄격한 규칙에 의거하여 값을 비교하게 되고 이로 인한 조건 비교문의 오동작을 효과적으로 막을 수 있습니다. 세개의 연산자에 대한 부정형은 !== 이니 참고하시면 될 것 같습니다

훨씬 상식(?)에 가까운 결과를 보실 수 있습니다. 같은 형태의 자료형들간에 비교를 했을때 정확한 값이 나오는 것을 볼 수 있습니다. 자바스크립트를 쓰면서 뭔가 이해할 수 없는 동작이 발생하고 있다면 표를 참고하시고 연산자를 바꿔보는 것을 검토해 보세요. 우리의 시간은 소중하니까요. :-)

 

웹의 세상이 되면서 웹 개발자들이 각광받는 시대입니다. 서버사이드 개발을 하던 프론트엔드 개발을 하던 웹 개발은 이제 어느 회사에서도 없어서는 안되는 중요한 역할을 해내고 있습니다. 그런데 웹을 그냥 하는 것과 웹을 잘 하는 것은 분명 차이가 있을 것 같습니다. 고작 10년여의 경력인지라 모르는 것들이 정말 많고 계속 변하는 웹 관련 기술에 혀를 내두를 지경이지만 결국 기본이 탄탄하다면 두려울(?)것이 없다는 생각을 늘 하고 있습니다.

웹을 이해하기 위해서는 웹을 소화하는 주요 주체인 브라우저에 대해서 잘 이해할 필요가 있습니다. 내가 만든 자바스크립트가 브라우저에게 어떤 영향을 줄 것인지? 내가 만든 서버사이드 스크립트 메서드 한개가 사용자에게 어떤 경험을 주게 될지를 고민하는 것이 필요하다는 이야기입니다. 브라우저가 행하는 기본적인 동작을 이해하는 것에서 웹 튜닝이나 웹 가속에 대한 논의가 시작될 수 있을 것 같습니다.

웹은 서버가 내려주는 HTML 을 읽고 사용자에게 표현하는 역할을 합니다. 브라우저는 HTML 의 여러가지 구성요소를 어떻게 해석하고 받아들이고 이해한 내용을 표현하는 것일까요? 렌더링 단계(화면에 컨텐츠를 보여주는 단계) 이전에 일어나는 일들과 하지 않아야 하는 것들을 간략하게 설명한 동영상이 있어서 소개해 봅니다. 브라우저의 동작을 이해하기 위해서 TCP 도 잘 알아야 하지만 일단은 그렇구나~ 하고 넘어가면 좋을 것 같습니다!


- NoPD -