[Flutter] 개념부터 설치까지

송현석·2022년 1월 5일

[Flutter] 스터디 기록

목록 보기

1/3

Why Flutter?

🎓대학생 시절부터 최근까지 집중적으로 학습했던 프로그래밍 분야는 웹이었습니다.
취업 준비를 위해 준비했던 React.js, 그리고 지금 실무에 적용하고 있는 Vue.js 까지 약 1년 가까이 웹 프로그래밍을 위주로 달려왔습니다.
어느 순간부터, "누군가가 나의 직업을 물어본다면, 프론트엔드 개발자라고 자신있게 소개할 수 있을까?" 라는 의문이 들었습니다.🤔
물론, 앞선 두 SPA 프레임워크를 활용하여 웹 앱 형태로 만들 수 있다고는 하지만 그러한 경험이 전무했고, 어플 자체에 대한 이해가 부족하다는 생각을 하고 있었습니다.
그래서, 모바일 프로그래밍에 대한 관심을 키워야겠다는 생각을 했고, 크로스 플랫폼이 가능한 결과물을 만들고 싶어 MacBook M1 Pro 16'을 우선 구입하였습니다⁉️ ~~(공부 열심히 하자는 다짐에서 시작된 소비👍)~~

지난 프로그래밍 경험을 떠올리던 중, Firebase를 사용했을 때 잘 정리된 공식 문서로 인해 구글에 대한 좋은 기억이 있었다는 것이 떠올랐습니다.
그리고, 새로운 언어를 학습하여 나에게 익숙한 프로그래밍 언어와의 차이점과 장/단점을 분석해보고 싶다는 생각이 들었습니다.
또한, iOS와 Android 두 운영체제 모두 지원한다는 점과 웹으로도 개발이 가능하다는 점을 들어 구글의 Flutter 학습을 시작하기로 결심했습니다.🤘

Concept

Flutter는 구글에서 개발한 크로스 플랫폼 프레임워크입니다.
주요 특징을 간략하게 정리하면 다음과 같습니다.

1. 사용 언어 - Dart (Javascript와 흡사한 객체지향 언어)
2. Dart만으로 레이아웃, 디자인까지 한 번에
3. 모바일 (iOS, Android), 웹, 윈도우 프로그램 모두 개발 가능
4. 기본 제공되는 수 많은 위젯

다시 말해서, Flutter는 구글이 직접 개발한 Dart언어를 이용하여 만든 오픈소스 입니다. CSS를 활용한 어려운 디자인 관련 작업 없이도 쉽게 완성도 높은 어플리케이션을 제작할 수 있습니다.🛠

설치

Android Studio

기존에 사용하고 있던 vscode를 활용해도 되지만, 플러터 공식 홈페이지 'Set up an editor'에서 처음으로 등장하는 Android Studio를 먼저 설치하였습니다.🐥
안드로이드 스튜디오 설치 페이지에서 각자의 운영체제에 맞는 압축파일을 다운 받고, 찾기 쉬운 위치에 압축 해제하여 저장합니다.
설치가 끝나면, 안드로이드 스튜디오를 실행하고 ∙∙∙표시를 클릭하여 SDK Manager를 선택합니다.

그리고, Android SDK 메뉴의 SDK Tools 탭에서 Android SDK Command-line Tools (latest)를 체크하고 Apply 버튼을 눌러 설치합니다.

Flutter

플러터 설치 페이지에서 각자의 운영체제에 맞는 압축파일을 다운 받고, 찾기 쉬운 위치에 압축 해제하여 저장합니다.

설치가 끝나면, 터미널을 실행하여

flutter doctor

를 입력합니다.

아무 이상이 없으면, 플러터 개발에 필요한 도구들 목록 같은 것들이 출력됩니다.

저는 mac 운영체제를 사용하고 있어, Xcode와 CocoaPods가 설치되지 않았다는 내용이 뜨고 그 아래에는 설치된 도구들의 목록이 떴습니다. (m1 맥북 유저는 flutter doctor를 입력했는데 그림과 같이 나오지 않는다면 재부팅 후에 다시 시도해보세요. 저는 그렇게 해결했습니다.👍)

환경변수 등록

윈도우 유저는 PowerShell 혹은 cmd를, 맥 유저는 터미널을 실행하여 각각

Window

'시스템 환경 변수 편집' 열기

'환경변수' 클릭

~에 대한 사용자 변수 탭의 'Path'를 선택하고 '편집' 클릭

'새로 만들기' 클릭 후, 압축 해제한 'Flutter 폴더 내부의 bin 폴더 경로'를 입력하고 저장

Mac

터미널에 해당 명령어 2개를 차례대로 입력한다.
(터미널 이름이 .zsh일 경우는 아래와 같이 touch ~/.zshrc open ~/.zshrc를,
.bash일 경우는 touch ~/.bash_profile open ~/.bash_profile로 입력해주세요.)