플러터 프로젝트 세팅 및 VSCode 세팅

이 글은 플러터 프로젝트 생성 및 세팅을 위한 글임을 사전에 밝히고 노마드코더 영상을 참고해 작성한 글임을 밝힙니다.

윈도우10을 기준으로 작성되었으므로 맥 환경에선 약간 다를수도 있습니다.

 

dart,flutter,vscode는 설치에 대한건 공식홈페이지에 잘 나와있기에 패스.

 

1. vscode 익스텐션 및 세팅

• 익스텐션 추가
  vscode를 깔고나면 익스텐션으로 가서 dart와 flutter 익스텐션을 추가해주자. 없다고해서 못할건 아닌데, 플러터 익스텐션이 엄청난 도움을 주므로 추가하는걸 강력추천함. 

다트 익스텐션

플러터 익스텐션

• vscode 세팅
  일단 커맨드 플레이트를 열고(단축키 컨트롤+쉬프트+A) user sertting 이라고 치면, open user setting (JSON) 을 선택그 후 아래 두가지를 추가해준다.
  fixAll은 저장 시 자동수정으로 코딩하다보면 파란 경고밑줄이 괴롭힐텐데, 그부분을 자동으로 수정해주는 기능이고,
  previewFlutterUiGuides은 UI 코딩 시 부모자식관계의 가이드라인을 그려줘서 가독성을 올려주는 기능이다.

  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "dart.previewFlutterUiGuides": true,

 

2. 플러터 프로젝트 생성

• 생성할 프로젝트 위치 지정
  프로젝트 생성은 원하는곳에 폴더를 만들고 해당 경로를 복사 후 파워셀에서 cd 후 경로 복붙해 파워셀에서 경로로 이동한다. 
• 플러터 프로젝트 생성
  해당 경로에서 [ flutter create 프로젝트명 ] 명령어를 입력해 플러터 프로젝트를 생성한다. 이 작업이 완료되면 프로젝트 생성 끝 ! 
• 프로젝트 경로에서 깃 초기화
  선택사항이긴 하지만, 나같은 경우는 보통 코드관리를 깃으로 하므로 원격저장소를 연결하든 안하든 일단 깃은 초기화시키고 본다. 이후 소스트리나 깃허브데스크톱등으로 관리함. 아무튼 [ git init ] 명령어로 간단하게 깃 생성 후 앞에서 언급한 깃 관리용 툴 등에서 초기화된걸 확인하기 위해 저장소 추가를 통해 연결해준다.
• 깃 이그노어 처리
  플러터 깃허브에 깃 이그노어가 있으므로 해당 내용을 복붙해 내 프로젝트의 깃 이그노어에 추가해주고 이그노어파일 먼저 커밋&푸시(원격저장소 연결한 경우) 해준다. 깃허브용 깨알팁으로 코드가 있는 창의 오른쪽 위에 Raw 버튼을 클릭하면 컨트롤A(전체선택)을 통해 편하게 복붙할 수 있다. -> (선택사항) 프로젝트 초기상태로 되돌릴 필요가 있을수도있으니, 생성 직후의 프로젝트 역시도 깃 이그노어 푸시 후 푸시해준다. 난 보통 init gitignore->init project 이렇게 푸시함.
• 끝!
  마무리로 프로젝트를 깃에 푸시하기전에 빌드테스트를 해주면 좋다. vscode에 익스텐션을 추가했다면 아래 스샷처럼 빌드버튼이 뜨는데, 저걸로 테스트해보면 된다.

플러터 빌드 버튼

 

 

요정도는 해두고 시작하는걸 추천한다. 개인적으론 리액트나 리액트네이티브같은애들은 이것저것 익스텐션 추가할게 많았는데, 플러터같은경우는 플러터 익스텐션 하나가 거의 다 해주는느낌이라 크게 세팅이나 익스텐션 추가할게 없어 편했다.