웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
타입스크립트(typescript)를 사용하는 웹어플리케이션이 많아지고 있습니다. 그 만큼 장점이 많기 때문이죠. 그런데 타입스크립트를 사용하면 개발 로컬 환경에서 추가적인 컴파일(트랜스파일) 시간이 길어지게 됩니다. 아래는 이에 대한 해결방법을 알아보려고 합니다.
타입스크립트 역시 컴파일 과정을 통해 설정된 es5, esnext 등의 버전으로 변환되는 과정을 거치게 됩니다. react 등의 프론트엔드 환경에서는 웹팩(Webpack) 등의 번들링 과정을 거치게 될 것이고 이때 타입스크립트의 컴파일 역시 함께 수행되므로 로딩 시간은 더 걸리게 됩니다.
가장 큰 문제는 시간이 생각보다 꽤 걸린다는 점입니다. 이는 프로젝트의 규모가 커질수록 더더욱 큰 이슈로 나타날 수 있습니다. 사실 아무런 조치도 취하지 않는 경우라면 로컬 개발 환경에서의 속도 저하는 매우 크게 다가올 것입니다. 하지만 그렇다고 typescript를 사용하지 말아야 할까요? 타입스크립트를 통해 개발 과정의 에러를 줄이고 결국 전반적인 코드 향상을 이룰 수 있으므로 단순히 제거하는 방법은 일단 배제해야 하겠죠. 그렇다면 어떻게 하면 속도를 더 올릴 수 있을까요?
알려진 몇 가지 방법들이 존재합니다. react-awesome-typescript과 같은 모듈을 추가로 설치하는 방법이 있고 그 외에 웹팩의 설정에서 devtool 설정을 변경하는 방법이 있습니다.
아래는 react 앱 어플리케이션의 webpack 설정을 변경하여 로딩 속도를 향상시킨 방법입니다. 해당 앱은 react를 사용한 next.js를 사용하므로 next.config.js의 webpack 설정을 변경하였습니다. 자세한 변경 사항은 아래에서 확인하세요.
@ next.config.js
코드를 살펴보면 dev 환경인 경우 config.devtool = 'cheap-module-source-map'; 코드를 추가한 부분이 보입니다. 웹팩의 Devtool은 source-map 생성과 관련된 기능을 수행합니다. 여러 설정 값이 존재하는데 typescript의 컴파일, 로딩 속도를 위해서는 cheap-module-source-map으로 설정하는 것이 가장 빠른 결과를 가져다 주었습니다.
참고로 Webpack의 Devtool에 대한 자세한 정보는 아래 링크에서 찾을 수 있습니다.
링크 바로가기 >
https://webpack.js.org/configuration/devtool/
! 타입스크립트를 사용하면 왜 늦을까
타입스크립트 역시 컴파일 과정을 통해 설정된 es5, esnext 등의 버전으로 변환되는 과정을 거치게 됩니다. react 등의 프론트엔드 환경에서는 웹팩(Webpack) 등의 번들링 과정을 거치게 될 것이고 이때 타입스크립트의 컴파일 역시 함께 수행되므로 로딩 시간은 더 걸리게 됩니다.
가장 큰 문제는 시간이 생각보다 꽤 걸린다는 점입니다. 이는 프로젝트의 규모가 커질수록 더더욱 큰 이슈로 나타날 수 있습니다. 사실 아무런 조치도 취하지 않는 경우라면 로컬 개발 환경에서의 속도 저하는 매우 크게 다가올 것입니다. 하지만 그렇다고 typescript를 사용하지 말아야 할까요? 타입스크립트를 통해 개발 과정의 에러를 줄이고 결국 전반적인 코드 향상을 이룰 수 있으므로 단순히 제거하는 방법은 일단 배제해야 하겠죠. 그렇다면 어떻게 하면 속도를 더 올릴 수 있을까요?
# 타입스크립트의 로딩 속도 올리는 방법
알려진 몇 가지 방법들이 존재합니다. react-awesome-typescript과 같은 모듈을 추가로 설치하는 방법이 있고 그 외에 웹팩의 설정에서 devtool 설정을 변경하는 방법이 있습니다.
아래는 react 앱 어플리케이션의 webpack 설정을 변경하여 로딩 속도를 향상시킨 방법입니다. 해당 앱은 react를 사용한 next.js를 사용하므로 next.config.js의 webpack 설정을 변경하였습니다. 자세한 변경 사항은 아래에서 확인하세요.
@ next.config.js
module.exports = ({
webpack: (config, {dev}) => {
if (dev) { // Only dev purpose
config.devtool = 'cheap-module-source-map';
}
return config;
}
})
webpack: (config, {dev}) => {
if (dev) { // Only dev purpose
config.devtool = 'cheap-module-source-map';
}
return config;
}
})
코드를 살펴보면 dev 환경인 경우 config.devtool = 'cheap-module-source-map'; 코드를 추가한 부분이 보입니다. 웹팩의 Devtool은 source-map 생성과 관련된 기능을 수행합니다. 여러 설정 값이 존재하는데 typescript의 컴파일, 로딩 속도를 위해서는 cheap-module-source-map으로 설정하는 것이 가장 빠른 결과를 가져다 주었습니다.
참고로 Webpack의 Devtool에 대한 자세한 정보는 아래 링크에서 찾을 수 있습니다.
링크 바로가기 >
https://webpack.js.org/configuration/devtool/
아래의 글도 찾고 계시지 않나요?
