본문 바로가기
비전공자를 위한 Flutter/앱 개발 준비하기

Flutter 코딩 시간을 10분의 1로 단축시켜 줄 확장 프로그램 Helpful Extension

by 밍잔 2022. 4. 23.

여러분의 플러터 코딩을 도와줄 조수들을 소개해드릴게요. 여러분이 에러를 찾으러 다니고, 계속 반복되는 코드를 작성하고, 괄호를 찾아 헤매는 그림자 노동을 줄여줄 다섯 친구들입니다.

 

 

- Bracket Pair Colorizer 2

- Better Comments

- Error Lens

- Tabnine AI Auto Complete

- Flutter Widget Snippets

 

 

첫번째는 컬러라이저인데요, 코딩을 하다 보면 괄호가 ((((())))) 이런 식으로 엄청 많이 쌓이게 됩니다. 이 괄호가 도대체 어디서 열렸고, 뭘 닫는건지 헷갈릴 때가 많은데요, 그걸 색깔로 구분할 수 있게 해주는 도구입니다. 검색창에 colorizer라고 검색하시고, Bracket Pair Colorizer2를 설치해주세요.

 

 

두 번째는 주석을 보기 쉽게 도와주는 도구입니다. 주석이란 여러분이 작성한 코드를 설명하는 설명서라고 보시면 되는데요. 주석을 잘 쓰기 위해서는 글쓰기 능력을 길러야 합니다. 왜냐하면 잘 쓴 주석 몇 줄이 사람들이 여러분에게 질문하러 오는 일을 줄여주기 때문이죠. 질문에 하나씩 답해주다가 여러분이 오늘까지 해야 할 일을 못하면 짜증나겠죠? 분명히 내가 짠 코드인데 기억 못하는 것도 어이없는 일이죠. 주석을 작성하는 요령은 두 가지가 있습니다. 

 

1. 1년 후의 내가 다시 보는 설명서이다.

2. 당장 남에게 보여줄 설명서이다.

 

이런 생각을 가지고 주석을 작성하시면 도움이 될 거예요. 검색창에 comments라고 검색하시고, Better Comments를 설치해주세요. 

 

 

주석 작성법은 아래와 같습니다. 여러분이 만약 팀으로 작업하신다면 팀 멤버 모두가 이 Better Comments 확장 프로그램을 설치하셔야 주석의 색이 변하는 효과를 보실 수 있어요.

 

주석 설명
// 가장 기본이 되는 주석입니다. 간단하게 한 줄로 코드를 설명할 수 있을 때 사용합니다.
/* */ /*부터 시작해서 */로 끝날때까지 안에 있는 모든 코드가 주석으로 처리됩니다. *플러터 코딩에선 사용하지 않는 걸 권해드려요.
// * 해당 주석을 강조하기 위해 사용합니다.
// ! 해당 주석으로 경고를 주기 위해 사용합니다.
// ?  모든 팀 멤버가 원격으로 근무함과 동시에 연락처를 알지 못하는 경우 해당 주석으로 질문할 때 사용합니다.
// TODO: 앞으로 해야할 일을 메모할 때 사용합니다.
/// 플러터에서 문서 작성용으로 권장하는 주석입니다. 긴 내용을 설명해야 하는 경우 이 주석을 사용합니다.

 

주석 사용 예시

 

세 번째는 에러 렌즈입니다. 여러분이 작성하는 코드에 에러가 있다면 표시해주는 도구입니다. 어느 줄에 무슨 에러가 있는지 알려주기 때문에 에러를 찾아다닐 수고를 줄여줍니다. 검색창에 error라고 검색하시고, Error Lens를 설치해주세요. 

 

 

네 번째는 자동완성 기능입니다. 인공지능이 여러분이 자주 사용하는 코드를 학습해서, 앞으로 작성할 코드를 미리 자동완성 해주는 엄청난 도구죠! 키보드 입력하나만 해도 코드를 자동완성하고 추천해줘서 여러분의 코딩 시간을 비약적으로 줄일 수 있습니다. 이런 도구들 덕분에 베짱이가 될 수 있습니다. 검색창에 tabnine 검색하시고, Tabnine AI Auto Complete를 설치해주세요. 

 

 

다섯 번째도 자동완성 기능입니다. 플러터에서 자주 쓰이는 코드를 약어만 입력하면 자동완성 해주는 도구죠! 몇 가지 약어만 외워두면 여러분의 코딩 시간을 엄청나게 줄일 수 있습니다. 여러분이 베짱이가 될 수 있게 하는 도구는 많습니다. 검색창에 flutter widget snippets 검색하시고, Flutter Widget Snippets를 설치해주세요. 

 

 


 

여기까지 설치하셨다면 이제 진짜 플러터를 코딩하러 가볼까요? 아래 링크를 눌러 여러분의 첫번째 플러터 프로젝트를 시작해보죠.

 

https://mingzan.tistory.com/252

 

댓글