VS Code: Flutter, React Native 및 Ionic용 에디터

VS Code란?

VS Code는 Microsoft가 2015년에 출시한 소스 코드 에디터입니다. Visual Studio와 달리 VS Code는 완전한 IDE가 아니라 확장 기능을 통해 IDE 수준까지 확장 가능한 경량 에디터입니다. 모바일 개발을 위해 VS Code는 Flutter(Dart Code 확장 기능을 통해), React Native(React Native Tools 확장 기능), Ionic(내장 TypeScript 지원을 통해)을 지원합니다.

Stack Overflow Developer Survey 2025에 따르면, VS Code는 전체 개발자의 74%가 사용하는 세계에서 가장 인기 있는 에디터입니다. 모바일 개발을 위해 Flutter 개발자의 68%, React Native 개발자의 55%, Ionic 개발자의 71%가 VS Code를 선택합니다. 주요 이유는 속도, 확장성, 내장 Git 및 터미널입니다.

VS Code 아키텍처는 자동 완성 및 진단을 위한 Language Server Protocol(LSP), 디버깅을 위한 Debug Adapter Protocol(DAP) 및 VSIX 형식의 확장 기능을 기반으로 구축되었습니다. 에디터는 Electron(Chromium + Node.js)에서 실행되며 JavaScript/TypeScript를 사용하여 확장 기능을 만들 수 있습니다. VS Code는 Windows, macOS 및 Linux에서 사용할 수 있습니다.

모바일 개발을 위한 VS Code 설정

모바일 개발을 위한 기본 VS Code 설정에는 특정 프레임워크에 맞는 확장 팩 설치가 포함됩니다. Flutter의 경우 Flutter 확장 기능으로 충분합니다(Dart가 자동으로 설치됨). React Native의 경우 React Native Tools를 설치합니다. TypeScript를 사용하는 Ionic/React Native의 경우 내장 지원이 즉시 작동하지만 ESLint와 Prettier를 설치하는 것이 좋습니다.

// .vscode/settings.json — 모바일 프로젝트 설정
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

모바일 개발을 위한 확장 기능: Flutter(Dart Code, 5천만 이상 설치), React Native Tools(Microsoft, 1천만 이상), Expo(React Native Expo용), Thunder Client(API 테스트), GitLens(Git 시각화), Error Lens(인라인 오류), Material Icon Theme(파일 아이콘). 빠른 스크립트 실행을 위해 Code Runner도 설치하는 것이 좋습니다.

작업 영역 구성(.code-workspace)을 사용하면 관련 프로젝트를 단일 VS Code 창에 그룹화할 수 있습니다. 모노레포(예: React Native + Backend)의 경우 작업 영역은 설정, 확장 기능 및 실행 구성과 함께 모든 폴더를 엽니다. VS Code는 작업 영역에서 프로젝트를 자동으로 감지하여 탐색기에 표시합니다.

VS Code에서 Flutter

VS Code용 Flutter 확장 기능은 프로젝트 생성(Ctrl+Shift+P → Flutter: New Project), 핫 리로드(Hot Reload, Hot Restart), UI 인스펙터(Flutter Inspector), 에뮬레이터/장치(Flutter: Select Device), DevTools(위젯 트리, 타임라인, 네트워크, 메모리) 등 완벽한 개발 도구 세트를 제공합니다.

// lib/main.dart — 네비게이션이 있는 Flutter 애플리케이션
import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: 'VS Code Example',
        home: HomePage(),
        theme: ThemeData.useMaterial3(),
    ));
}

class HomePage extends StatelessWidget {
    HomePage({super.key});

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Flutter + VS Code')),
            body: Center(
                child: ElevatedButton(
                    onPressed: () => debugPrint('VS Code에서 안녕하세요!'),
                    child: Text('여기를 탭하세요'),
                ),
            ),
        );
    }
}

Dart DevTools는 VS Code에서 에디터 내 탭 또는 별도 창으로 실행됩니다. DevTools에는 Flutter Inspector(레이아웃 오버레이가 있는 위젯 트리), 성능(FPS, 프레임 build/rast), CPU Profiler(flutter/scheduler/gesture), 메모리(힙 스냅샷, GC, 할당), 네트워크(HTTP 요청) 및 로깅(dart:developer log, stderr)이 포함됩니다.

VS Code에서 React Native

React Native Tools는 React Native 애플리케이션을 디버깅하기 위한 Microsoft의 공식 확장 기능입니다. Android 에뮬레이터, iOS 시뮬레이터 및 실제 기기에서 실행, 중단점을 사용한 JavaScript 디버깅, Flipper를 통한 요소 검사 및 빠른 개발을 위한 Expo 통합을 지원합니다.

React Native 설정: 확장 기능은 다음 명령을 추가합니다: React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. Hermes 디버깅은 React Native Hermes Debugger를 사용합니다. VS Code는 Flipper 통합을 지원하여 Reactotron 플러그인으로 네트워크, Redux/NgRx 상태, async storage, console.log를 모니터링할 수 있습니다.

// App.tsx — 네비게이션이 있는 React Native 컴포넌트
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
    Home: undefined;
    Details: { itemId: number };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

ESLint + Prettier는 VS Code에서 TypeScript를 위한 필수 조합입니다. ESLint는 코드 의미론을 검사하고(no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier는 들여쓰기, 따옴표, 쉼표를 포맷합니다. 구성은 .eslintrc.js 및 .prettierrc에 저장됩니다. VS Code는 저장 시 자동으로 ESLint를 실행하고 오류를 인라인으로 강조 표시합니다.

VS Code에서 Ionic

Ionic은 Angular, React 또는 Vue를 사용하는 하이브리드 모바일 애플리케이션을 위한 프레임워크입니다. VS Code는 내장 TypeScript 지원, Angular Language Service(.html 템플릿용) 및 Ionic Snippets 확장 기능을 통한 Ionic 구성 요소 자동 완성을 제공합니다. 빌드 및 게시에는 Capacitor(Cordova의 후속 제품)를 사용합니다.

VS Code에서 Ionic CLI 통합: 내장 터미널은 브라우저 개발을 위해 ionic serve, 프로덕션을 위해 ionic build, 네이티브 플랫폼과의 동기화를 위해 ionic cap sync를 실행합니다. Ionic Extension 확장 기능은 Generate Page, Generate Component, Run on Android/iOS 명령이 포함된 패널을 추가합니다.

Capacitor 플러그인 — 웹 코드와 네이티브 API 간의 브리지입니다. 주요 플러그인: Camera, Geolocation, Push Notifications, File System, Storage. 각 플러그인은 통합 JS API와 Android(Java/Kotlin) 및 iOS(Swift)용 네이티브 구현을 제공합니다. VS Code는 TypeScript 정의를 통해 Capacitor API에 대한 자동 완성을 제공합니다.

Launch.json 및 디버깅

launch.json — .vscode/ 폴더의 VS Code 디버거 구성입니다. 모바일 프로젝트의 경우 launch.json은 실행 유형을 정의합니다: Flutter(dart), React Native(reactnative), Ionic(브라우저 디버깅용 chrome 또는 edge). 각 구성에는 program, args, cwd, env, platform, deviceId 매개변수가 포함됩니다.

// .vscode/launch.json — Flutter 및 React Native 구성
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter (Android)",
            "type": "dart",
            "request": "launch",
            "program": "lib/main.dart",
            "deviceId": "emulator-5554",
            "args": ["--dart-define=ENV=staging"]
        },
        {
            "name": "React Native (Android)",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "target": "device",
            "sourceMaps": true
        },
        {
            "name": "Ionic (Browser)",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "webRoot": "\${workspaceFolder}"
        }
    ]
}

VS Code의 다중 대상 디버깅 — 여러 구성(compounds)의 병렬 실행입니다. 예를 들어, Flutter DevTools + Flutter App이 Inspector를 자동으로 엽니다. React Native의 경우 Attach to Packager를 사용합니다. 먼저 Metro 번들러가 시작된 다음 디버거가 이미 실행 중인 애플리케이션에 연결됩니다.

Dev Containers를 통한 원격 개발: VS Code는 SDK(Flutter, Android, Node.js)가 사전 설치된 Docker 컨테이너 또는 WSL2에 연결됩니다. Dev Containers 확장 기능(이전 Remote — Containers)은 에뮬레이터와 디버거를 포함한 완전한 도구 세트를 갖춘 격리된 환경에서 프로젝트를 실행합니다.