개발 환경이란?

프로그래밍을 시작하려면 SDK(Software Development Kit)와 IDE(Integrated Development Environment)이 필요하다. 이렇게 프로그래밍에 필요한 기본 세팅을 개발 환경이라고 한다.

환경 변수란?

개발 환경 구축에 들어가기에 앞서, 환경 변수가 무엇인가에 대해 알아보자.

• 환경 변수란, 컴퓨터 프로그램이 실행되는 동안 사용할 수 있는 값을 저장하는 변수이다.
  
  
• 환경 변수는 프로그램의 실행 환경을 설정하는 데 사용되며, 프로그램이 다른 프로그램과 상호 작용 할 수 있도록 한다.
  
  
• 개발에 있어서 환경 변수가 중요한 이유는, 각기 다른 디바이스에서 개발을 진행 할 경우 SDK의 설치 위치도 제각각이기 때문에, 환경 변수로 컴파일러나 SDK의 실행 파일의 위치를 지정함으로써 해당 프로그램의 이름 등으로 절대 경로를 대체하여 동일한 명령어로도 다양한 디바이스에서 같은 동작을 할 수 있게 도와준다.

하지만, 프로그래밍 개발을 시작하기 전 환경 변수 설정이 초보자들에겐 가장 큰 벽 중에 하나이다.

운영체제 설정이나 터미널에 명령어를 직접 기입해야 하기에 어렵게 느껴지지만, 일단 잘 따라가 보도록 하자!

Flutter - SDK와 IDE에 대해

Flutter로 애플리케이션을 개발하기 위해선, 역시 개발 환경을 구축하여야 한다.
그렇다면, Flutter SDK와 IDE가 필요할 것이다.

1. SDK(Software Development Kit)란?

Software Development Kit의 약자로, 프레임워크 등을 개발에 활용하는 데에 있어 필요한 기본 라이브러리, 도구, 문서 등을 모아둔 패키지를 말한다.

Flutter SDK에는 기본적으로 Dart가 내장되어 있어서 Dart를 별도로 설치 할 필요없이, Flutter SDK만 설치하는 것으로 언어와 프레임워크 모두를 한 번에 설치 할 수 있는 것이 특징이다.

SDK는 사용하는 OS(운영체제)에 따라 설치하는 방식이 차이가 있으므로, 개발에 사용할 OS를 미리 알아 두어야 한다.

Flutter는 버전이 자주 변해서, 버전 변경을 용이하게 하고 SDK 설치를 더욱 쉽게 할 수 있는 FVM(Flutter Version Management)를 통한 설치도 진행 할 예정이다.

2. IDE(Integrated Development Environment)란?

• IDE(통합 개발 환경)란, 프로그래머가 소프트웨어를 개발하는 데 사용할 수 있는 소프트웨어이다.
• 소스코드 편집기, 디버거 및 빌드 시스템과 같은 개발에 필요한 다양한 도구를 통합하여 제공한다.

Flutter & Dart를 활용하기 위해서는 아래의 IDE가 주로 많이 사용된다.

• Android Studio(안드로이드 스튜디오)
  • Android Studio는 Google과 JetBrains에서 개발한 IDE이다. Android를 개발하는 데에 특화되어 있지만, Flutter Plugin을 설치하여 Flutter IDE로도 쓸 수 있으며, Android 개발을 위한 기본 도구들도 함께 사용할 수 있다.

• Visual Studio Code(비쥬얼 스튜디오 코드)
  • 줄여서 VS Code는 Microsoft에서 개발한 오픈 소스 IDE로, 경량화 된 IDE의 대표 주자 중 하나이다. 역시 Flutter Plugin을 설치하여 활용할 수 있다.

Flutter 개발 환경 구축 - Part 1. Flutter SDK 설치

Flutter 개발 환경 구축을 위해서, 먼저 Flutter SDK를 설치하여야 한다.

자, 이제 설치를 해보자!

👨‍💻 1. Flutter 공식 홈페이지 👨‍💻

👉 👨‍💻 👈을 클릭하거나, Google에 Flutter를 검색하여 공식 홈페이지로 들어가면,

Get started를 클릭,

macOS 선택,

Desktop을 선택한 뒤 나오는 화면에서 밑으로 내리면

(구글 번역 돼있는 상태)애플 실리콘 칩 즉 M1~ 맥북은 Rosetta 2를 설치해야 한다고 돼있다. 뭐 즉슨, 저 명령어를 터미널에 치면 된다는 것 같다. 옆에 복사 아이콘을 눌러 복사한 뒤,

터미널에 치면 Password를 입력하라고 뜨는데, 당연히 내 맥북의 비밀번호일 것이다. 입력을 하니 성공적으로 Rosetta 2가 설치됐다고 뜬다. 이제 밑으로 내려서,

M1~ 은 arm64를 다운받으면 된다. 압축을 풀면 flutter라는 폴더가 나오는데, 이 폴더를 적당한 경로에 옮겨줘야 한다. 보통은 터미널에서 경로 설정이 용이한 홈 폴더로 해주면 좋다고 한다.

따라서, Finder -> 이동(좌측 상단 메뉴) -> 홈 으로 간 뒤,

Flutter 홈페이지에 나와있듯이 development라는 폴더 안에 넣으라고 돼있는데, 폴더 이름은 크게 상관은 없지만 그대로 하기로 했다. development 폴더를 만들고, 이 안에 압축 해제한 flutter 폴더를 통째로 옮겨주자.

이제 환경 변수를 설정해줘야 한다.

터미널을 열고,

※ 지금 사진에 앞에 (base) 라고 돼있는데, 이게 예전에 잠시 깔았던 가상환경 conda 인데 이 위에 flutter 환경 변수를 설정했다... Git을 공부할 때도 이 상태로 했다는 건데.. 크게 상관은 없었는지 모르겠다. 잘못 설정한 환경 변수는 나중에 삭제해보도록 하고, Git도 나중에 다시 한 번 해봐야겠다.

이러한 이유로 정상적으로 실행이 되지 않아, 찾아보던 중 conda를 deactivate를 해야한다는 걸 알고 난 뒤, deactivate를 하고

이제 사진에 있는 명령어를 그대로 입력해준다.

cd ~

pwd

ls : 정상적으로 따라왔다면 여기서 flutter를 집어 넣었던 폴더가 있을 것이다. 필자는 development 폴더.

cd development

ls : flutter 폴더가 있는지 확인

export PATH=$HOME/development/flutter/bin:$PATH : 24.01.29 기준 Flutter 공식 홈페이지에 나와있는 환경 변수 설정 명령어

이제, flutter 명령어를 입력하면

제대로 설정이 됐다면, 이렇게 실행이 된다. 만약 실행이 안된다면 터미널을 한 번 껐다 키면 정상적으로 실행 될 것이다.

※ 나는 Xcode가 이미 설치가 돼있어서 이렇게 실행이 됐는데, 만약 설치돼있지 않다면 Git을 설치하라는 창이 뜰 수 있다. 그러면 설치해주면 된다.

이제 flutter --version 을 입력하여 버전을 확인해보면,

이렇게 정상적으로 버전이 뜨는 것을 볼 수 있다.

마지막으로, Flutter가 정상적으로 설치됐는지 확인하는 명령어가 공식 홈페이지에 나와있는데,

flutter doctor 명령어를 입력하면,

이렇게 뜬다. 이 부분은 아마 사용자마다 다를 것이다. 필자는 Xcode와 Android Studio를 먼저 깔았었는데, 아예 안깔려있다면 앞에 [!]가 아니라 [X]가 뜰 것이다. 깔려있는데도 [!]로 나오는 이유는 아직 잘 모르겠지만, 나중에 설정해봐야겠다.

어찌됐건, 명령어가 정상적으로 되는 걸 보면 일단 Flutter SDK는 잘 깔린 것 같다.

Flutter SDK 설치 끝! 🐶

Flutter 개발 환경 구축 - Part 2. Android Studio 설치

개발 환경을 구축하기 위해 먼저 IDE를 설치해보자. 내 OS는 macOS(M2 Air)이고, Android Studio를 설치하려고 한다.

자, 이제 설치를 해보자!

🤖 1. Android Studio 공식 홈페이지 🤖

👉 🤖 👈 을 클릭하거나, Google에 Android Studio를 검색하여 공식 홈페이지를 들어간 뒤

Android 스튜디오 다운로드를 누르고

Android 스튜디오 Hedgehog( 24.01.29 기준 최신 버전 ) 다운로드 버튼을 누르면 이용약관이 나오는데, 맨 밑으로 쭉 내리면

동의하기에 체크하고, 자신의 프로세서에 맞는 것을 선택한 뒤 설치하면 된다.

2. 😈 Android Studio 설치 😈

이제 런치패드에서 Android Studio를 클릭하면

이러한 화면이 나오는데, 신규 사용자기에 Do not import settings를 체크하고 넘어가면

Android Studio를 사용함에 있어서 버그같은 것을 Google에 제공할 지 선택하는 것인데, 본인의 자유.

라이센스 동의화면에서 모두 Accept를 누르면, Finish 버튼이 활성화되고 클릭하면

이렇게 설치가 된다.

그런 뒤 왼쪽의 Plugins 메뉴를 들어가면 위와 같이 Flutter가 나오는데, 이것까지 설치를 해줘야 한다.

Dart를 같이 깐다고 하는 메시지인데, Install을 눌러주면 설치가 된다.

설치가 되면 Restart IDE를 눌러서 플러그인을 적용시켜 준다.

3. 😲 Flutter 테스트 프로젝트 생성 😲

재실행이 되면,

Flutter 프로젝트를 바로 만들 수 있는 버튼이 생겼다. New Flutter Project을 누르면

이렇게 프로젝트 생성 화면이 나오는데, 왼쪽 메뉴에 Flutter를 클릭한 뒤

Flutter SDK path를 설정해줘야 하는데,

cd ~/development/flutter

pwd 를 입력하면

Flutter SDK의 경로가 뜬다. 저 경로를 복사하여 붙여넣은 뒤 Next를 누르면

이렇게 넘어가는데, Project name은 편하게 지어주자.

밑에 Project type이라는 메뉴가 있는데

내가 듣는 강의에서는 웬만하면 저 Application 로 진행한다고 한다. 이 부분은 계속 강의를 진행하면서 이해해야할 듯 싶다.

밑에 Organization 을 입력하는 게 있는데, 이 조직 이름은 보통의 경우에 자기 도메인으로 하는데

네이버를 예로 들면 www를 제외 하고 naver.com 을 도메인이라 하는데 이 도메인의 단위를 역순으로 나열한 것을 패키지 네임, 번들 네임이라고 한다. 따라서,

com.naver 가 될 것이다. 따로 도메인을 가지고 있지 않다면, com.test 등 대충 적어주면 될 것 같다. 나도 아직 도메인은 따로 가지고있지 않기에, 대충 적어줬다.

그 밑에 Android language 와 iOS language 을 선택할 수 있다. 이 부분은 일단 따로 언급이 없기에 바꿔주진 않았다.

마지막으로 Platforms 은 일단 Android와 iOS만 개발할 예정이기에 두 개만 체크해주도록 한다. 이제 Create 버튼을 누르면

프로젝트가 뙇! 생성 되었다.

이제 Xcode 와 FVM 도 설치를 해야 하는데, 양이 많아 파트 2개로 나눠 다음에 이어서 포스팅해야겠다.

참고한 곳

• 강의 내용
• https://velog.io/@psj0810/환경변수란 (이미지 출처)

다음 포스팅 예정

• Flutter 개발환경 구축 Part.2