리팩터링

소스 코드 리팩토링은 런타임 동작은 수정하지 않으면서 코드를 재구성하여 프로젝트의 품질과 유지 관리성을 향상시킬 수 있습니다. Visual Studio Code는 편집기 내에서 코드베이스를 개선하기 위해 메서드 추출 및 변수 추출과 같은 리팩토링 작업을 지원합니다.

예를 들어, 코드 중복(유지 관리의 골칫거리)을 피하기 위해 사용되는 일반적인 리팩토링은 메서드 추출 리팩토링으로, 소스 코드를 선택하여 자체 공유 메서드로 추출하여 해당 코드를 다른 곳에서 재사용할 수 있도록 합니다.

리팩토링은 언어 서비스를 통해 제공됩니다. VS Code는 TypeScript 언어 서비스를 통해 TypeScript 및 JavaScript 리팩토링을 위한 내장 지원을 제공합니다. 다른 프로그래밍 언어에 대한 리팩토링 지원은 언어 서비스를 제공하는 VS Code 확장을 통해 활성화됩니다.

리팩토링에 대한 UI 요소와 VS Code 명령은 다른 언어에 걸쳐 동일합니다. 이 문서는 TypeScript 언어 서비스를 사용하여 VS Code에서 리팩토링 지원을 시연합니다.

코드 액션 = 빠른 수정 및 리팩토링

VS Code에서 코드 액션은 감지된 문제(빨간색 물결선으로 표시됨)에 대한 리팩토링과 빠른 수정 모두를 제공할 수 있습니다. 커서가 물결선 위 또는 선택된 텍스트 영역에 있을 때 VS Code는 코드 액션을 사용할 수 있음을 나타내는 편집기에 전구 아이콘을 표시합니다. 코드 액션 전구 아이콘을 선택하거나 **빠른 수정** 명령 ⌘. (Windows, Linux Ctrl+.)을 사용하면 빠른 수정 및 리팩토링 컨트롤이 표시됩니다.

빠른 수정 없이 리팩토링만 보려면 **리팩토링** 명령(⌃⇧R (Windows, Linux Ctrl+Shift+R))을 사용할 수 있습니다.

참고: editor.lightbulb.enable 설정을 사용하여 편집기에서 코드 액션 전구 아이콘을 완전히 비활성화할 수 있습니다. **빠른 수정** 명령과 ⌘. (Windows, Linux Ctrl+.) 키보드 단축키를 통해 여전히 빠른 수정을 열 수 있습니다.

저장 시 코드 액션

editor.codeActionsOnSave 설정을 사용하면 파일을 저장할 때 자동으로 적용되는 코드 액션 집합을 구성할 수 있습니다(예: import 정리). 작업 영역 파일과 활성 확장을 기반으로 IntelliSense에서 사용 가능한 코드 액션 목록을 제공합니다.

editor.codeActionsOnSave에 하나 이상의 코드 액션을 구성할 수 있습니다. 그런 다음 코드 액션은 나열된 순서대로 실행됩니다.

다음 예는 저장 시 여러 코드 액션을 구성하는 방법을 보여줍니다.

// On explicit save, run sortImports source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.organizeImports": "always",
    "source.sortImports": "explicit",
},

각 코드 액션에 대해 지원되는 값은 다음과 같습니다.

• explicit (기본값): 명시적으로 저장할 때 코드 액션을 트리거합니다.
• always: 명시적으로 저장할 때 및 창 또는 포커스 변경으로 인한 자동 저장 시 코드 액션을 트리거합니다.
• never: 저장 시 코드 액션을 트리거하지 않습니다.

리팩토링 액션

메서드 추출

추출하려는 소스 코드를 선택한 다음, 여백의 전구 아이콘을 선택하거나 (⌘. (Windows, Linux Ctrl+.))를 눌러 사용 가능한 리팩토링을 확인합니다. 소스 코드 조각을 새 메서드 또는 다양한 범위의 새 함수로 추출할 수 있습니다. 추출 리팩토링 중에 의미 있는 이름을 제공하라는 메시지가 표시됩니다.

변수 추출

TypeScript 언어 서비스는 현재 선택된 표현식에 대한 새 로컬 변수를 생성하는 **상수 추출** 리팩토링을 제공합니다.

클래스와 함께 작업할 때 값을 새 속성으로 추출할 수도 있습니다.

심볼 이름 바꾸기

이름 바꾸기는 소스 코드 리팩토링과 관련된 일반적인 작업이며, VS Code에는 별도의 **심볼 이름 바꾸기** 명령(F2)이 있습니다. 일부 언어는 파일 전체에서 심볼 이름을 바꾸는 것을 지원합니다. F2를 누르고 원하는 새 이름을 입력한 다음 Enter를 누릅니다. 모든 파일의 심볼 인스턴스가 이름이 바뀝니다.

리팩토링 미리 보기

리팩토링을 적용하면 변경 사항이 코드에 직접 구현됩니다. **리팩토링 미리 보기** 패널에서 리팩토링 작업에 적용될 변경 사항을 미리 볼 수 있습니다.

리팩토링 미리 보기 패널을 열려면 코드 액션 컨트롤을 열고, 리팩토링 위로 마우스를 가져간 다음, ⌘Enter (Windows, Linux Ctrl+Enter)를 누릅니다.

리팩토링 미리 보기 패널에서 변경 사항 중 하나를 선택하여 리팩토링 작업의 결과로 나타나는 변경 사항에 대한 diff 보기를 얻을 수 있습니다.

적용 또는 취소 컨트롤을 사용하여 제안된 리팩토링 변경 사항을 적용하거나 취소합니다.

선택적으로 리팩토링 미리 보기 패널에서 일부 제안된 변경 사항의 선택을 취소하여 리팩토링 변경 사항을 부분적으로 적용할 수 있습니다.

코드 액션에 대한 키보드 단축키

editor.action.codeAction 명령을 사용하면 특정 코드 액션에 대한 키보드 단축키를 구성할 수 있습니다. 이 키보드 단축키는 예를 들어 **함수 추출** 리팩토링 코드 액션을 트리거합니다.

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function"
  }
}

코드 액션 종류는 확장 프로그램에서 향상된 CodeActionProvider API를 사용하여 지정합니다. 종류는 계층적이므로 "kind": "refactor"는 모든 리팩토링 코드 액션을 표시하는 반면, "kind": "refactor.extract.function"은 **함수 추출** 리팩토링만 표시합니다.

위의 키보드 단축키를 사용하면 단일 "refactor.extract.function" 코드 액션만 사용 가능한 경우 자동으로 적용됩니다. 여러 **함수 추출** 코드 액션을 사용할 수 있는 경우 VS Code에서 컨텍스트 메뉴를 표시하여 선택합니다.

apply 인수를 사용하여 코드 액션이 자동으로 적용되는 방식과 시점을 제어할 수도 있습니다.

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function",
    "apply": "first"
  }
}

apply에 대한 유효한 값

• first - 첫 번째 사용 가능한 코드 액션을 항상 자동으로 적용합니다.
• ifSingle - (기본값) 하나만 사용 가능한 경우 코드 액션을 자동으로 적용합니다. 그렇지 않으면 컨텍스트 메뉴를 표시합니다.
• never - 단일 코드 액션만 사용 가능한 경우에도 항상 코드 액션 컨텍스트 메뉴를 표시합니다.

코드 액션 키보드 단축키가 "preferred": true로 구성된 경우 선호되는 빠른 수정 및 리팩토링만 표시됩니다. 선호되는 빠른 수정은 기본 오류를 해결하고, 선호되는 리팩토링은 가장 일반적인 리팩토링 선택입니다. 예를 들어, 여러 refactor.extract.constant 리팩토링이 존재하고 각각 다른 범위로 추출할 수 있지만, 선호되는 refactor.extract.constant 리팩토링은 로컬 변수로 추출하는 것입니다.

이 키보드 단축키는 "preferred": true를 사용하여 항상 선택한 소스 코드를 로컬 범위의 상수로 추출하려고 시도하는 리팩토링을 생성합니다.

{
  "key": "shift+ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.constant",
    "preferred": true,
    "apply": "ifSingle"
  }
}

리팩토링 기능이 있는 확장

VS Code Marketplace에서 리팩토링을 지원하는 확장을 찾을 수 있습니다. 확장 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))로 이동하여 검색 상자에 'refactor'를 입력할 수 있습니다. 그런 다음 설치 수 또는 등급별로 정렬하여 인기 있는 확장을 확인할 수 있습니다.

팁: 위에 표시된 확장은 동적으로 쿼리됩니다. 확장 타일을 선택하고 설명 및 리뷰를 읽어 자신에게 가장 적합한 확장을 결정하십시오.

다음 단계

• 소개 동영상 - 코드 편집 - 코드 편집 기능에 대한 소개 동영상을 시청하세요.
• 코드 탐색 - VS Code를 사용하면 소스 코드를 빠르게 이동할 수 있습니다.
• 디버깅 - VS Code를 사용하여 디버깅하는 방법을 알아보세요.

자주 묻는 질문

코드에 오류가 있는데 전구 아이콘이 보이지 않는 이유는 무엇인가요?

전구 아이콘(코드 액션)은 오류를 표시하는 텍스트 위에 커서가 있을 때만 표시됩니다. 텍스트 위로 마우스를 가져가면 오류 설명이 표시되지만, 빠른 수정 및 리팩토링에 대한 전구 아이콘을 보려면 커서를 이동하거나 텍스트를 선택해야 합니다.