VSCode에서는 정상 작동하는데 IntelliJ에서는 빨간 줄이 뜨는 경우?
Community 버전 사용자라면 꼭 확인하세요!
🔍 주요 키워드
- IntelliJ TypeScript 오류
- IntelliJ TypoScript
- IntelliJ Community 버전 제한
- VSCode TypeScript
- IntelliJ JavaScript 지원 안됨
- TypeScript 빨간줄
- atom recoil 에러
- TS 파일 IntelliJ 오류
📘 본문
최근 프로젝트에서 Recoil을 사용하여 authState.ts 상태 파일을 작성하던 중, IntelliJ에서 아래와 같은 이상한 오류가 발생했다.
// src/states/authState.ts
import { atom } from 'recoil';
export const authState = atom({
key: 'authState',
default: {
isLoggedIn: false,
user: null,
},
});
✅ 문제 상황
코드는 아무 이상 없어 보이는데도 불구하고, atom, from, key, default 등의 키워드에 전부 빨간 밑줄이 그어졌다. 에러 메시지를 보면 TypoScriptTokenType 관련 오류까지 등장했다.
처음엔 문법 오류인가 싶었지만, VSCode에서 동일한 파일을 열어보니 정상 작동.
🧠 원인 분석
이 문제의 핵심은 IntelliJ Community Edition은 TypeScript와 JavaScript를 공식적으로 지원하지 않는다는 점이다.
즉, .ts 파일을 열었을 때 IntelliJ가 해당 파일을 TypeScript가 아닌 TypoScript (TYPO3의 템플릿 언어)로
잘못 인식해버리는 문제가 발생한다.
TypoScript는 TypeScript와 전혀 관련 없는, TYPO3 CMS에서 사용하는 설정 언어이다.
🛠 해결 방법
1. VSCode로 변경
가장 확실한 해결 방법은 Visual Studio Code로 개발 환경을 전환하는 것이다.
VSCode는 JavaScript/TypeScript 완전 지원 + 빠른 IntelliSense 제공으로 프론트엔드 개발에 최적화되어 있다.
2. (대안) IntelliJ Ultimate 사용
유료 버전인 IntelliJ Ultimate Edition은 JavaScript/TypeScript를 완전하게 지원한다.
단, 연간 유료 구독이 필요한 점은 고려해야 한다.
3. 언어 설정 강제 변경 (단기 응급처치)
파일 하단 상태바에서 언어가 TypoScript로 인식되어 있다면, 수동으로 TypeScript로 변경도 가능.
하지만 IntelliJ Community Edition에서는 해당 설정도 제한적이다.
💡 정리
IDE | TypeScript 지원 | 추천 여부 |
IntelliJ Community | ❌ 없음 | ❌ 프론트엔드 비추천 |
IntelliJ Ultimate | ✅ 있음 | 💰 유료, 가능 |
VSCode | ✅ 있음 | ✅ 무료, 강력 추천 |
✨ 마무리
처음엔 단순한 코드 에러로 착각했지만, 알고 보니 개발 환경의 한계였다.
앞으로는 IDE가 해당 언어를 완전히 지원하는지 먼저 확인하는 습관도 중요하다는 걸 다시 느꼈다.
'IT개발 > 개인프로젝트' 카테고리의 다른 글
[StudySync 프로젝트] Vue 3 + TypeScript + Tailwind CSS로 StudySync 프론트엔드 설정 (1) | 2025.04.19 |
---|---|
[AutoSume 프로젝트] React, Spring Boot, ChatGPT로 웹앱 개발: AutoSume 기술 학습 기록 (0) | 2025.04.18 |
[AutoSume 프로젝트] React를 활용한 프론트엔드 개발 진행중 (0) | 2025.04.18 |
🚀 Vite + React + TypeScript + Tailwind CSS로 포트폴리오 웹앱 개발 환경 구축하기 (0) | 2025.04.11 |
댓글