diff --git a/pages/tutorials/babel-with-typescript.md b/pages/tutorials/babel-with-typescript.md index afb3dd6f..4cfd6fd9 100644 --- a/pages/tutorials/babel-with-typescript.md +++ b/pages/tutorials/babel-with-typescript.md @@ -5,44 +5,44 @@ permalink: /docs/handbook/babel-with-typescript.html oneline: How to create a hybrid Babel + TypeScript project --- -# Babel vs `tsc` for TypeScript +# Babel vs TypeScript의 `tsc` -When making a modern JavaScript project, you might ask yourself what the right way to convert files from TypeScript to JavaScript. +모던 JavaScript 프로젝트를 만들 때, TypeScript에서 JavaScript 파일로 변환하는 올바른 방법에 대해 고민할 수 있습니다. -A lot of the time the answer is _"it depends"_, or _"someone may have decided for you"_ depending on the project. If you are building your project with an existing framework like [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/) or any framework mentioned in the [Getting Started](/docs/home) then this decision is handled for you. +많은 경우 그 대답은 프로젝트에 따라 _"~에 달려있다"_ 또는 _"누군가 여러분 대신 결정했을지도 모른다`_ 가 될 것입니다. 만약 [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/)와 같은 기존 프레임워크 또는 [Getting Started](/docs/home)에 언급된 프레임워크를 사용하여 프로젝트를 만들고 있다면 결정은 여러분 손에 달려있습니다. -However, a useful heuristic could be: +하지만, 사용할만한 직관적인 방법은 다음과 같습니다: -* Is your build output mostly the same as your source input files? Use `tsc` -* Do you need a build pipeline with multiple potential outputs? Use `babel` for transpiling and `tsc` for type checking +* 빌드 출력 결과와 소스 입력 파일이 거의 비슷한가요? `tsc`를 사용하세요. +* 여러 잠재적인 결과물을 내는 빌드 파이프라인이 필요하신가요? `babel`로 트랜스파일링을 하고, `tsc`로 타입을 검사하세요. -## Babel for transpiling, `tsc` for types +## 트랜스파일링은 Babel, 타입은 `tsc` (Babel for transpiling, `tsc` for types) -This is a common pattern for projects with existing build infrastructure which may have been ported from a JavaScript codebase to TypeScript. +JavaScript 코드 베이스에서 TypeScript로 포팅되었을 수 있는 기존 빌드 인프라 구조를 가진 프로젝트의 일반적인 패턴입니다. -This technique is a hybrid approach, using Babel's [preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript) to generate your JS files, and then using TypeScript to do type checking and `.d.ts` file generation. +이 기술은, Babel의 [preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)을 사용하여 JS 파일을 생성한 후, TypeScript를 사용하여 타입 검사 및 `.d.ts` 파일을 생성하는 복합 접근 방식입니다. -By using babel's support for TypeScript, you get the ability to work with existing build pipelines and are more likely to have a faster JS emit time because Babel does not type check your code. +Babel은 TypeScript를 지원하기 때문에, 기존 빌드 파이프라인으로 작업할 수 있고 Babel이 코드 타입을 검사하지 않기 때문에 JS 출력 시간이 더 빨라질 수 있습니다. -#### Type Checking and d.ts file generation +#### 타입 검사와 d.ts 파일 생성 (Type Checking and d.ts file generation) -The downside to using babel is that you don't get type checking during the transition from TS to JS. This can mean that type errors which you miss in your editor could sneak through into production code. +Babel 사용의 단점은 TS를 JS로 전환하는 동안 타입 검사를 할 수 없다는 점입니다. 즉, 에디터에서 타입 오류를 잡지 못하고 상용 코드에 포함될 수도 있단 뜻입니다. -In addition to that, Babel cannot create `.d.ts` files for your TypeScript which can make it harder to work with your project if it is a library. +또한, Babel은 TypeScript에 대한 `.d.ts` 파일을 만들 수 없기 때문에 여러분의 프로젝트가 라이브러리인 경우 작업하기가 더 어려워질 수 있습니다. -To fix these issues, you would probably want to set up a command to type check your project using TSC. This likely means duplicating some of your babel config into a corresponding [`tsconfig.json`](/tconfig) and ensuring these flags are enabled: +이러한 문제를 해결하려면 TSC를 사용하여 프로젝트의 타입을 검사할 수 있는 명령어를 설정하는 것이 좋습니다. 이는 Babel 구성의 일부를 해당 [`tsconfig.json`](/tconfig)에 복제하고, 다음 플래그가 활성화되었는지 확인하는 것을 의미합니다: ```json "compilerOptions": { - // Ensure that .d.ts files are created by tsc, but not .js files + // tsc를 사용해 .js 파일이 아닌 .d.ts 파일이 생성되었는지 확인합니다. "declaration": true, "emitDeclarationOnly": true, - // Ensure that Babel can safely transpile files in the TypeScript project + // Babel이 TypeScript 프로젝트의 파일을 안전하게 트랜스파일할 수 있는지 확인합니다. "isolatedModules": true } ``` -For more information on these flags: +해당 플래그에 대한 자세한 내용은 다음을 참고해주세요: * [`isolatedModules`](/tsconfig#isolatedModules) * [`declaration`](/tsconfig#declaration), [`emitDeclarationOnly`](/tsconfig#emitDeclarationOnly) \ No newline at end of file