[Flutter]개발환경 구축 with VSC, Mac

한상욱·2022년 12월 4일
0

Flutter 위젯

목록 보기
3/22
post-thumbnail

갑자기

안녕하세요?? 원래는 이후로 필수 개념이 되는 위젯들을 순서대로 포스팅하려고 했는데... 갑자기 제가 맥북을 하나 사게 되었어요. 그래서 이제부터 모든 개발 작업과 공부는 MacOS를 통해서 할건데, 설치 방법은 Windows에서 포스팅을 해버려서 제 맥북 세팅할겸, Flutter with MacOS를 주제로 포스팅을 하려고 합니다 ㅎㅎ. 그래도 맥북 갖고싶었는데 하나 사게되니까 기분이 날아갈거 같습니다. 그러면 포스팅 시작하겠습니다 !

IDE 구축

개인적으로 MacOS를 통한 Flutter 앱 개발이 더 편리하다고 생각해요. 왜냐하면, 다 만들어도 결국 AppStore에 출시하려면 Mac이 꼭 필요합니다.. 게다가 MacOS는 Android 에뮬레이터도 지원해주니까요.. 그래서 MacOS니까 에뮬레이터는 ios simulator를 쓸거에요. 기존의 구축방법에서 Xcode만 설치하는게 좋습니다. 그래서 순서대로

VSC > Android Studio > Xcode > Flutter SDK

이렇게 포스팅하겠습니다 !

VSC 설치

VSC 설치는 어렵지 않습니다. google에 VSC라고 검색하시면 공식홈페이지가 나옵니다. 그 사이트 들어가시면

바로 내 OS에 맞는 install 버튼이 도입부에 대문짝하게 있네요. 눌러서 다운로드 받고, 실행시키면??

개인적으로 언어는 본인 취향이겠죠?? 원래는 한글팩이 없었어서, 기본 언어로 영어쓰던 사람들은 영어가 훨씬 편하다고 하더라구요. 저는 한글에 적응완료 했으니까 한글로 하겠습니다. 하단 설치 버튼을 눌러주면, 알아서 적용시키고 재실행 해줍니다.

다시 언어 적용이 끝났으니, 제가 쓰던 확장으로 돌려보겠습니다.

Flutter 개발하실때, 이 아이콘 테마 사용하면 너무 예뻐요 ㅎㅎ. 그리고 flutter 확장은 꼭 깔아줍시다. VSC 세팅은 여기서 끄읕

Android Studio 설치

VSC를 무난히 설치할 수 있다면, Android Studio도 비슷합니다. google에 Android Studio를 입력하세요.

공식홈페이지 링크가 있는데 클릭하면, 이동할 수 있습니다. 가운데에 설치버튼이 VSC처럼 있네요. 바로 클릭 ! 클릭하시면, 약관 읽어보고 맨 하단에 동의 클릭하시고, 본인 그래픽카드에 맞는것을 선택하세요. 저는 M1칩 사용하고 있으니, apple chip으로 선택했습니다.

그러면 파일 하나를 다운받을 수 있습니다. 클릭하시면 파일을 옮겨달라고 하죠? 옮겨주시면, 응용 프로그램에서 Android Studio를 찾을 수 있습니다. 바로 찾아서 실행 !

자 본격적인 설치 단계입니다. 세팅은 다 기본으로 하시고 다음다음을 광클하죠.

기다려줍시다. 기다림의 미학

이 화면을 볼 수 있다면, 끝입니다.

Xcode 설치

이건 진짜 겁나 쉽습니다. 맥북 하단에 AppStore아이콘 클릭 !

앱 설치하듯이 상단에서 Xcode를 검색합시다.

받기 버튼을 누르면 설치가 시작됩니다.

설치가 완료되면 열기버튼을 눌러주세요.

여기서 예제 프로젝트를 하나 만들어서 시뮬레이터를 생성해줄겁니다.

맨 위 상단에 My Mac이라고 적혀있습니다. 마우스 우클릭을 하시면 ios simulator를 골라서 생성할 수 있어요.

본인이 원하는 기종으로 만듭시다.

여기까지 수행했다면 끝 !

Flutter SDK 설치

마지막 단계입니다. 좀 더 힘을 냅시다.

마찬가지로 flutter 공식홈페이지로 이동합니다. 상단에 Get Started 보이시죠?? 바로 클릭해줍니다.

저번과 달리 이번에는 MacOS를 선택해줍시다.

만약 기종이 M1 칩을 사용하고 있다면 저 확인 명령어를 해봐야합니다.

저는 문제 없는듯.

이제 확인이 끝났으면, 본인 그래픽 카드와 맞는 파일을 받으세요. 저는 받자마자 압축해제가 됩니다. 안되시면 밑에 명령어 참고해서 압축해제 하시면 됩니다. 압축해제된 파일 안에는 flutter>bin이 있겠죠?? 환경변수 설정을 해줍시다. 하단에 3번을 보면 환경변수 설정을 하는 명령어 입니다. 터미널에서 본인 flutter/bin 위치에 맞게끔 조절해서 적용해주세요. 적용이 끝났다면 바로 VSC 키고 검증 들어갑니다.

IDE 구축 검증

이제 맥 유저니까 한번 터미널에서 작업하는거 뽐내주시고, 프로젝트 만들었으면 VSC연동 체크할겸 VSC 열어주세용.

프로젝트 생성이 잘 되었네요. 굳!

실행도 잘됩니다. 이제 ios simulator로 더 열심히 하는겁니다.!

profile
개발공부를 기록하자

0개의 댓글