WebStorm 2025.1의 새로운 기능

WebStorm goes AI

새로운 AI 구독 옵션

JetBrains AI가 크게 업그레이드되어 AI Assistant와 Junie가 단일 구독으로 통합되었습니다. 이번 릴리스를 통해 무제한 코드 완성, 로컬 모델 지원, 코딩 에이전트를 비롯한 크레딧 기반 클라우드 호스팅 기능 액세스 등 AI 기능을 JetBrains IDE에서 무료로 사용할 수 있습니다. 새로운 구독 시스템에서는 AI Pro 및 AI Ultimate 등급으로 쉽게 확장할 수 있습니다. 자세한 내용은 이 페이지를 확인하세요.

첨단 LLM 지원

JetBrains AI Assistant는 모델 라인을 더욱 발전시키고 있습니다. Amazon Bedrock에 Claude 3.7 Sonnet 지원이 추가되었습니다. 이제 더 정확한 응답, 더 빠른 인사이트, 더 원활한 경험의 이점을 누릴 수 있습니다. AI Assistant의 OpenAI 모델 라인업에 이제 o1, o1-mini, o3-mini 및 GPT-4.1(곧 지원 예정)가 포함되었습니다.

AI가 생성한 유닛 테스트의 이름을 일관되게 지정

WebStorm은 이제 AI 기반 지원을 통해 유닛 테스트를 만들 때 적절한 테스트 프레임워크를 자동으로 감지합니다. 이를 통해 프로젝트에 적합한 프레임워크를 사용하여 테스트가 생성되므로 수동 조정 작업이 줄어 테스트를 더 원활하고 효율적으로 생성할 수 있습니다.

WebStorm은 또한 AI가 생성한 유닛 테스트가 프로젝트의 기존 명명 규칙을 따르도록 보장합니다.

웹 프레임워크에 대한 향상된 AI 완성 기능

2025.1 릴리스에서는 웹 프레임워크 구성 요소의 컨텍스트에 따른 AI 기반 완성 기능을 집중적으로 개선했습니다. 이러한 변경 사항은 로컬 전체 줄 코드 완성과 클라우드 기반 완성 제안에 모두 적용됩니다.

오프라인 모드: 로컬 모델로 작업

AI Assistant를 통해 유연하게 오프라인에서 로컬 모델로 작업하거나 클라우드 기반 AI 프로세스 처리를 활용할 수 있습니다. 이제 오프라인 모드가 지원되므로 이제 인터넷 연결 없이 작업하면서 AI 기반 코딩 지원의 이점을 누릴 수 있습니다. Ollama 또는 LM Studio를 통해 채팅, 코드 생성, 커밋 메시지 작성, 인라인 문서화 등 다양한 작업에 로컬 모델을 사용해 보세요.

Angular 지원

Angular 17.2 시그널 쿼리 지원

WebStorm은 이제 Angular 17.2에 도입된 시그널 쿼리를 지원하여 종속성 삽입에 대한 이러한 최신 반응형 접근 방식에 더 나은 코드 인사이트와 탐색 기능을 제공합니다. 이 업데이트를 통해 WebStorm에서 시그널 쿼리에 대한 타입 추론이 정확해지고, 쿼리 표현식 내의 코드 완성이 개선되며, 시그널과 해당 참조 간 탐색이 향상됩니다.

향상된 반응형 폼 지원

WebStorm은 이제 Angular의 반응형 폼에서 FormGroup, FormArray, FormControl, FormBuilder에 대한 코드 완성 및 생성 지원을 제공합니다. 이 업데이트로 폼 구조를 더 쉽게 정의하고 관리할 수 있어 수작업이 줄어들고 개발 속도가 향상됩니다. 자동 완성 및 빠른 수정이 개선되어 반응형 폼을 사용하는 작업이 더 직관적이고 효율적으로 이루어집니다.

Angular 바인딩에 대한 프로퍼티 제안 개선

WebStorm에서 이제 프로퍼티 바인딩에 대한 객체 프로퍼티 제안이 개선되어 바인딩된 구성 요소 프로퍼티를 사용하기가 쉬워집니다. 템플릿에서 바인딩을 정의할 때 자동 완성 및 유효성 검사의 정확도가 높아져 오류가 줄어들고 Angular 애플리케이션의 개발이 간소화됩니다.

추출 또는 인라인 구성 요소 템플릿

이제 WebStorm을 사용하면 Angular 구성 요소에서 인라인 템플릿과 별도 템플릿 간 리팩터링이 더 쉬워집니다. 간단한 작업만으로 인라인 템플릿을 별도의 파일(templateUrl)로 변환하고 다시 그 반대로 변환할 수 있어 워크플로가 간소화되고 코드 구성이 개선됩니다.

사용자 경험

Next.js에 대한 자동 실행 구성 실험적

WebStorm에서 이제 Next.js 프로젝트에 대한 실행 구성이 자동으로 생성되므로 풀스택 애플리케이션을 보다 쉽게 설정하고 디버그할 수 있습니다.

플로팅 Show Context Actions(컨텍스트 액션 표시) 툴바

WebStorm 2025.1에는 Alt+Enter를 누르거나 코드를 선택하면 나타나는 플로팅 툴바가 도입되었습니다. 이 툴바에서 AI 기능, 리팩터링, 코드 서식 재지정 및 Surround With(다음으로 감싸기) 액션에 빠르게 액세스할 수 있습니다.

Project(프로젝트) 도구 창에서 새 파일 생성

이제 새 파일을 만들기가 더 편리해졌습니다. + 아이콘을 눌러 Project(프로젝트) 창 툴바에서 바로 사용 가능한 파일 템플릿 목록 팝업에 액세스할 수 있으며, 검색창에서 필요한 파일 형식을 빠르게 찾을 수 있습니다.

자동 플러그인 업데이트를 설정하는 옵션

백그라운드에서 플러그인을 자동으로 업데이트하도록 WebStorm을 설정할 수 있습니다. 이렇게 설정하면 다음 번 IDE를 재시작할 때 사용 가능하고 호환되는 업데이트를 추가 알림 없이 다운로드 및 적용할 수 있습니다. 업데이트 대화상자에서 Enable auto-update(자동 업데이트 사용) 체크박스를 클릭하거나 File(파일) | Settings(설정) | Appearance & Behavior(모양 및 동작) | System Settings(시스템 설정) | Updates(업데이트)에서 자동 업데이트를 설정할 수 있습니다.

Windows 및 Linux의 메인 툴바에 메인 메뉴 병합

Windows 및 Linux 사용자를 위해 메인 메뉴를 메인 툴바와 병합하는 새로운 옵션이 제공되어 인터페이스를 보다 간소화할 수 있습니다.

프레임워크 및 기술

개선된 Vue 및 Nuxt 지원

이제 WebStorm에서 New Project(새 프로젝트) 마법사의 Nuxt CLI(nuxi) 통합을 통해 새 Vue 프로젝트를 더 쉽게 시작할 수 있으므로 설정이 더 원활해집니다.

또한 모듈 증강을 통해 추가된 사용자 지정 프로퍼티가 올바르게 해결되어 Vue의 전역 프로퍼티에 대한 지원이 개선됩니다. __VLS_WithTemplateSlots로 선언된 패키지 컴포넌트에 대한 자동 완성 및 자동 가져오기 문제도 수정되어 Vue 프로젝트에서 보다 안정적인 개발 경험이 보장됩니다.

단일 저장소 지원

하위 프로젝트별 Prettier 구성 지원

WebStorm은 이제 하위 프로젝트별 Prettier 구성을 준수하여 단일 저장소 또는 다중 프로젝트 설정의 각 부분이 자체 서식 규칙을 따르도록 합니다. 이를 통해 스타일 요구 사항이 다양한 여러 코드 베이스로 작업할 때 유연성과 일관성이 높아집니다.

단일 저장소의 자동 가져오기에 대한 경로 별칭 지원 개선

WebStorm에서 exports 필드 처리 방식이 새롭게 바뀌어 문제 해결, 자동 가져오기, 탐색 및 코드 완성이 향상되었습니다. 이는 package.json 파일에 복잡한 exports 필드 선언이 있는 단일 저장소 프로젝트에 특히 유용합니다.

대규모 Nx 단일 저장소에서 코드 완성 및 탐색 개선

WebStorm은 이제 Nx를 사용하는 대규모 TypeScript 단일 저장소에 대해 더 빠르고 안정적인 코드 완성과 탐색 기능을 제공합니다. 이 업데이트에 따라 복잡한 다중 프로젝트 작업 공간에서도 코드 완성, 탐색 및 자동 가져오기가 원활하게 작동합니다.

GraphQL 및 Prisma

향상된 Prisma 지원

WebStorm의 Prisma 지원이 개선되었습니다. 여기에는 적절한 구문 강조 표시, 유효성 검사 및 자동 완성 기능을 갖춘 ULID(Universally Unique Lexicographically Sortable Identifier) 인식이 포함됩니다. 또한, 여러 줄 주석이 이제 Prisma 스키마에서 완벽하게 지원되어 긴 설명으로 데이터베이스 구조를 문서화하기가 더 쉬워졌습니다.

태그가 지정된 템플릿에서 GraphQL 지원 개선

WebStorm은 이제 gql(query) 스타일 태그가 지정된 템플릿에 GraphQL 구문 강조 표시와 유효성 검사를 자동으로 삽입합니다. 이에 따라 코드 완성, 오류 검사 및 서식 지정이 개선되어 JavaScript 및 TypeScript 파일 내에서 GraphQL 쿼리를 사용하기가 더 쉬워집니다.