[Flutter] Cursor로 간단하게 개발하기

 

 

 

https://jutole.tistory.com/162

[Flutter] Cursor로 프로젝트 세팅하기

 

지난 글에서 Cursor Ide로 프로젝트 세팅을 끝냈습니다. 이번에는 Cursor의 기능을 이용해서 직접 개발을 해보겠습니다.

 

 

 

Accept a tab

main.dart의 모든 코드를 지우고 시작해 보겠습니다.

 

 

해당 파일에 Flutter 프로젝트의 시작 코드인 void main()을 작성하면, 옅은 회색으로 미리 완성된 코드가 보입니다. 이는 AI가 이전에 작성된 코드를 기반으로, 다음에 작성할 코드를 예측하여 보여주는 기능입니다. 만약 예측된 코드가 실제로 작성하려는 코드와 일치하면, 키보드에서 Tab 키를 눌러 자동완성을 할 수 있습니다.

 

자동완성을 한 다음 엔터를 눌러보세요. 또 다음 자동완성을 제공해 줍니다. 

 

 

엔터와 탭만 눌렀더니 5초 만에 flutter 기본 실행코드가 완성됐습니다.

 

 

Symbol

아직 위의 코드는 실행이 되지는 않는 상태입니다. Flutter에서 Material 디자인 위젯을 사용하려면 기본적으로 material.dart를 임포트해야 하는데 아직 Cursor에 Flutter플러그인이 설치되어 있지 않은 것 같습니다.

 

자 막혔어요. 이제 어떡할까요? 저번 글에서 사용했던 채팅을 열어서 해결해 봅시다. "Command + l"을 눌러서 채팅창을 열어보겠습니다.

 

채팅창에 @(symbol)을 입력하면 여러 옵션들이 뜹니다. 저는 Files를 눌러서 main.dart를 지정해 보겠습니다.

 

그럼 이렇게 main.dart 파일이 지정됩니다. 이렇게 되면 ai에게 질문할 때 해당 파일의 코드를 기반으로 질문하기 때문에 더 확실한 정보를 얻을 수 있습니다.

 

 

 

 

 

또 하라는 대로 했더니 드디어 Flutter가 인식된 거 같아요. import 해주고 실행해 보겠습니다.

 

 

 

자 이렇게 Cursor가 제공한 코드들로 실행된 화면입니다. 

 

 

Composer

이제 Composer라는 기능을 사용해 보겠습니다. 이전 글에서 잠깐 설명드렸지만 Composer는 코드에 바로 적용시켜 줍니다. "Command + i"를 누르면 Composer를 열 수 있습니다. 여기서도 똑같이 위에 사용한 @(symbol) 기능을 이용해서 main.dart파일의 "Hello, World!" 텍스트의 색상을 빨간색으로 변경해 달라고 해보겠습니다.

 

 

Composer는 바로 코드에 적용시켜 주기 때문에 코드 부분이 바로 변경되는 모습을 볼 수 있습니다. Git등에서 볼 수 있는 변경점 같이 빨간색으로 이전코드와 초록색으로 변경된 코드를 보여줍니다. 어떤 부분이 바뀌었는지 한눈에 볼 수 있습니다. 변경된 코드를 적용하려면 "Command + y" 적용하지 않으려면 "Command + n"를 누르면 됩니다.

 

 

변경된 코드를 적용하고 확인해 보면 텍스트 색상이 빨간색으로 변경된 것을 확인할 수 있습니다. 이로써 우리는 Flutter를 하나도 모르는 상태였어도 화면에 텍스트를 뿌리고 색상을 변경하는 등 간단한 코드를 작성할 수 있게 되었습니다.

 

 

 

Prompt an edit

 

코드를 이렇게 드래그해 보세요. 2가지 옵션이 뜹니다.

 

Chat : 드래그한 코드를 챗에 붙여 넣고 사용합니다.

Edit : 드래그한 코드에 바로 수정사항을 말하면 고쳐줍니다.

 

"Command + K"를 눌러서 바로 Edit을 사용해 보겠습니다.

 

이렇게 지정한 영역 위에 창이 뜨고 해당창에 원하는 동작을 입력하면 Composer처럼 동작합니다.

 

바로 코드를 수정해 주고 이전코드와 변경된 코드를 한눈에 보여줍니다. 적용하려면 "Command + enter" 취소하려면 "Command + Backspace"를 누르라고 뜨네요.

 

이 외에도 글로 작성할 수 없을 만큼 많은 기능을 제공하고 있습니다. 저의 글로 Cursor에 흥미가 생기셨다면 다른 많은 기능도 찾아보시는 게 어떠신가요?