[Flutter] Mac + VS Code Flutter 개발 환경 세팅
안녕하세요! 황대성입니다.
이번 포스팅에서는 Mac + Visual Studio Code에서 Flutter 개발환경 세팅 방법을 작성하려 합니다.
포스팅하기 전 준비물이 필요합니다.
- Android Studio 설치 (https://developer.android.com/studio?hl=ko)
- XCode 설치
- Visual Studio Code 설치 (https://code.visualstudio.com/)
준비물이 모두 준비되었으면 아래의 순서로 진행해주시면 됩니다.
- Visual Studio Code의 Flutter Extension 설치하기.
- Flutter SDK 설치 및 환경변수 설정하기.
- Flutter Doctor 실행하여 미설치되어있는 항목 설치하기.
- 행복하게 Flutter 코딩하기!
1. Visual Studio Code의 Flutter Extension을 설치합니다.
2. Flutter SDK 설치 및 환경변수 설정하기.
Flutter 공식 홈페이지: flutter.dev/docs/get-started/install/macos
macOS install
How to install on macOS.
flutter.dev
- 공식 홈페이지에서 SDK zip 파일을 다운로드합니다.
- SDK를 보관할 폴더를 지정한 후 SDK 파일의 압출을 풀어줍니다.
저는 Documents/sdks에 풀어주었습니다.
cd 명령어로 해당 폴더로 이동한 후 unzip으로 sdk zip 파일을 풀어주면 됩니다!
- unzip이 완료되면 flutter/bin 폴더로 이동한 후 경로를 복사해줍니다.
cd flutter -> cd bin -> pwd | pbcopy (현재 경로 복사 커맨드) 순으로 입력해줍니다.
- 환경변수에 추가하기.
1. vi ~/.bash_profile 입력하여 bash_profile Open.
2. i를 눌러 insert 모드로 변경.
3. export PATH="현재 경로 붙여 넣기:$PATH"를 입력해줍니다.
4. esc를 누른 후 !wq를 입력하여 저장 후 종료합니다.
- 변경한 환경변수 저장하기
source ~/.bash_profile를 입력하여 저장합니다.
- 환경변수 설정을 끝낸 후 기존에 켜져 있던 터미널과 Visual Studio Code를 재시작해줘야 합니다.
3. Flutter Doctor를 활용하여 미설치되어있는 항목들을 설치해야 합니다.
- 재시작한 터미널 창에서 flutter doctor를 입력해줍니다.
환경변수가 정상적으로 설정되어있다면, 다음과 같은 항목들이 나옵니다.
- x 표시가 되어있는 부분을 체크 표시로 바꾸기
1. 제일 먼저 Android Studio에서 Flutter plugin을 설치해줍니다.
2. Preferences -> Plugins에서 Flutter를 설치해줍니다.
3. license 문제 해결하기
해결방법은 터미널에서 flutter doctor --android-licenses 명령어를 입력한 후 모두 동의를 하여 설치하면 끝입니다!
4. cocoapods 설치
이 또한 터미널에서 sudo gem install cocoapods 명령어를 입력한 후 설치하면 끝입니다.
5. 모두 정상적으로 작동하는지 확인하기
모두 설치했다면 flutter doctor를 재입력하여 모두 체크표시가 되어있는지 확인합니다!
위의 순서대로 모두 진행하여 성공하셨다면 Flutter 개발환경 세팅은 끝입니다!
제가 처음 했을 때 어려움을 겪은 부분이 많아서
Flutter를 시작하는 분들이 저와 똑같은 어려움을 느끼지 않았으면 좋겠다는 마음에 포스팅했습니다!
혹여나 글을 따라 하는 도중 다른 오류가 발생한다면 댓글을 달아주세요!
최대한 빨리 답변드리도록 노력하겠습니다 ㅎ
모두 재미있고 즐겁게 행복한 코딩 해요!
이상 포스팅을 마치겠습니다!
오늘도 긴 글 읽어주셔서 감사합니다 ㅎㅎ
참고한 블로그 및 웹사이트
Flutter 공식 홈페이지 - flutter.dev/
Flutter 강좌 3 - skuld2000.tistory.com/83
MAC OS 환경변수 설정하기 - 3months.tistory.com/537