플러터에서 VS Code로 쉽게 리팩토링하기 - 초보자를 위한 단계별 가이드

플러터 리팩토링이란?

리팩토링은 코드의 기능을 바꾸지 않으면서 구조를 개선하는 작업입니다. 이를 통해 코드가 더 읽기 쉬워지고, 유지보수가 용이해집니다.

특히, 플러터와 같은 프레임워크에서는 코드가 복잡해질수록 리팩토링이 중요해지는데요.

오늘은 VS Code를 활용해 플러터 앱을 쉽게 리팩토링하는 방법을 알아보겠습니다.

플러터에서 리팩토링을 위한 필수 VS Code 단축키와 기능

초보자도 쉽게 따라할 수 있는 VS Code의 주요 리팩토링 기능을 단계별로 설명합니다. 여기에 더해 코드 예제와 설명을 통해 플러터 프로젝트의 구조를 개선하는 방법을 차근차근 알려드리겠습니다.

VS Code에서 플러터 리팩토링 준비하기

1. VS Code 설치 및 플러터 플러그인 활성화

VS Code는 다양한 언어를 지원하는 코드 에디터로, 플러터 개발을 위해 꼭 필요한 Flutter와 Dart 플러그인을 설치해야 합니다.

• Flutter 플러그인 설치: VS Code의 Extensions 탭에서 Flutter 검색 후 설치.
• Dart 플러그인 설치: 플러터 플러그인 설치 시 자동으로 설치됩니다.

2. 플러터 프로젝트 열기

• VS Code에서 File > Open Folder 선택 후 플러터 프로젝트가 있는 폴더를 엽니다.
• lib/main.dart 파일을 열면 플러터 프로젝트가 정상적으로 열립니다.

VS Code 리팩토링 도구로 코드 개선하기

플러터에서 리팩토링을 쉽게 해주는 VS Code 기능들을 알아봅시다.

기능 1: 코드 분할 및 추출 (Extract Widget)

플러터에서 코드가 복잡해질 때, Extract Widget 기능을 사용하면 특정 UI 부분을 별도의 위젯으로 분리할 수 있습니다. 이를 통해 코드의 가독성이 향상되고, 재사용성도 높아집니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter VS Code Refactoring')),
        body: Center(
          child: CustomButton(), // 분리된 위젯 사용
        ),
      ),
    );
  }
}

// 추출된 위젯
class CustomButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        print("Button Pressed!");
      },
      child: Text('Click Me'),
    );
  }
}

위의 코드는 CustomButton이라는 위젯을 별도로 추출한 예제입니다.

Center 위젯 내부의 버튼을 따로 빼내서 코드가 더 간단해졌습니다.

Extract Widget 사용 방법

1. 추출하고 싶은 코드 블록을 선택합니다.
2. 오른쪽 클릭 > Refactor > Extract Widget 선택.
3. 위젯 이름을 입력하고 Enter를 누릅니다.

기능 2: 변수 추출하기 (Extract Variable)

긴 코드 블록에서 중복된 값을 변수로 추출하면 코드 가독성이 좋아지고, 수정할 때도 쉽게 수정할 수 있습니다.

// 코드 내에서 반복적으로 사용되는 색상을 변수로 추출
Color buttonColor = Colors.blue; // 변수 추출

ElevatedButton(
  onPressed: () {
    print("Button Pressed!");
  },
  style: ElevatedButton.styleFrom(primary: buttonColor),
  child: Text('Click Me'),
)

buttonColor 변수를 추출하여 코드에서 여러 번 사용하는 색상을 한 번에 관리할 수 있게 했습니다.

Extract Variable 사용 방법

1. 중복된 값을 선택합니다.
2. 오른쪽 클릭 > Refactor > Extract Variable 선택.
3. 변수 이름을 입력하고 Enter를 누릅니다.

기능 3: 메서드 추출하기 (Extract Method)

복잡한 로직을 가진 코드는 Extract Method 기능을 통해 특정 기능을 메서드로 추출하면 코드가 더욱 읽기 쉬워집니다.

// 분리된 메서드
void showMessage() {
  print("Hello from extracted method!");
}

ElevatedButton(
  onPressed: showMessage, // 메서드 참조
  child: Text('Click Me'),
)

버튼을 클릭하면 showMessage 메서드가 실행됩니다. 이를 통해 onPressed 코드가 더 간결해졌습니다.

 

기능 4: 코드 정렬 및 자동 포맷팅 (Format Document)

VS Code의 자동 포맷팅 기능을 사용하면 코드가 깔끔하게 정리되므로, 협업 시 다른 개발자들도 읽기 쉬운 코드 구조를 유지할 수 있습니다.

사용 방법:

1. 코드 파일을 열고, Shift + Alt + F (Windows) 또는 Shift + Option + F (Mac)을 누릅니다.
2. 또는, 오른쪽 클릭 > Format Document를 선택합니다.

자동으로 들여쓰기와 줄 정리가 되어 코드의 가독성이 높아집니다.

기능 5: 타입 정리 및 클래스 생성 (Quick Fix / Lightbulb)

특히 초보자에게 유용한 Quick Fix (빠른 수정) 기능은 클래스나 변수를 정의하지 않았을 때 Lightbulb 아이콘을 통해 자동으로 제안을 해줍니다.

이를 통해 코드 작성을 더 빠르게 할 수 있고, 타입 오류를 쉽게 해결할 수 있습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Quick Fix에서 자동으로 MyWidget을 생성할 수 있습니다.
    return MyWidget();
  }
}

위 코드에서 MyWidget이 정의되지 않은 경우 Lightbulb 아이콘을 클릭해 MyWidget 클래스를 자동 생성할 수 있습니다.

기능 6: 여러 줄을 동시에 편집하기 (Multi-Cursor)

한 번에 여러 줄을 편집해야 할 때 Multi-Cursor (다중 커서) 기능을 사용하면 매우 편리합니다. 이 기능을 사용하면 여러 줄의 같은 위치에서 동시에 입력하거나 수정할 수 있습니다.

사용 방법

1. Alt 키를 누른 채로 수정할 줄을 클릭하여 커서를 여러 개 추가합니다.
2. 여러 줄을 동시에 수정하거나 입력할 수 있습니다.

기능 7: 주석 추가 및 제거 (Toggle Comment)

리팩토링 중 코드를 잠시 비활성화하거나 설명을 추가하고 싶을 때 주석 기능을 사용하면 좋습니다. VS Code에서 Toggle Comment 기능을 통해 코드를 주석 처리하거나, 주석을 해제할 수 있습니다.

사용 방법:

1. 주석 처리할 줄을 선택하고, Ctrl + / (Windows) 또는 Cmd + / (Mac)을 누릅니다.
2. 선택된 줄이 한 번에 주석 처리됩니다.

기능 8: 파일과 클래스 이름 변경 (Rename Symbol)

코드의 변수나 클래스 이름이 이해하기 어렵다면 Rename Symbol (기호 이름 바꾸기) 기능을 사용해 더 직관적인 이름으로 수정할 수 있습니다. VS Code는 자동으로 해당 기호가 사용된 모든 위치를 찾아 바꿔줍니다.

// 처음 변수 이름
String userN = 'John Doe';

// Rename Symbol 기능으로 변수 이름 변경 후
String userName = 'John Doe';

사용 방법

1. 이름을 변경할 변수나 클래스를 선택하고, F2를 누릅니다.
2. 새로운 이름을 입력하고 Enter를 누르면 모든 참조가 업데이트됩니다.

VS Code 리팩토링 도구 사용 시 주의사항

1. 리팩토링 후에는 항상 테스트를 진행하세요.
2. 복잡한 기능을 리팩토링할 때는 한 번에 많은 변경을 가하지 말고, 단계별로 적용해보세요.
3. 리팩토링 후 플러터 Hot Reload를 통해 변경 사항을 확인해보세요.

VS Code를 활용한 다양한 리팩토링 기능을 통해 플러터 앱을 더욱 깔끔하고 효율적으로 개선할 수 있습니다.

Extract Widget, Extract Variable, Format Document, Multi-Cursor 등 강력한 리팩토링 도구들을 단계적으로 익히면, 초보자도 쉽게 코드의 품질을 높이고, 플러터 개발 경험을 더욱 향상할 수 있습니다.

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱