[TS] dependencies와 devDependencies 차이, 파일 확장자 차이(ts, tsx)

타입스크립트는 자바스크립트의 타입을 강제시키는 언어입니다.

왜? TS?
자바스크립트는 타입이 엄격하지 않습니다. 따라서, 변수나 상수를 만들면 처음에 문자를 넣었다가, 나중에 숫자를 넣는 등 자유자재로 변환이 가능합니다.

이러한 점이 개발에는 굉장히 편리해 보이지만, 큰 서비스를 여러명이 개발하는 경우에는 문제가 될 수 있습니다.

dependencies와 devDependencies 차이

dependencies와 devDependencies는 자바스크립트 프로젝트에서 패키지 관리 도구인 npm이나 yarn을 사용할 때, 각각의 라이브러리나 패키지가 프로젝트에서 어떤 역할을 하는지를 구분하는 중요한 개념입니다. 두 가지는 package.json 파일에 기록되며, 그 목적에 따라 사용처가 다릅니다.

dependencies란?

• 정의: dependencies는 애플리케이션이 실제 동작할 때 필요한 패키지들을 의미합니다. 즉, 이 프로젝트가 운영 환경(Production Environment)에서 실행될 때 반드시 있어야 하는 패키지들입니다.
• 애플리케이션을 실제 서버에 배포하거나, 클라이언트가 실행할 때 반드시 필요한 라이브러리를 설치하고 싶을 때입니다. 이 라이브러리들이 없으면 앱이 제대로 동작하지 않죠.

devDependencies란?

• 정의: devDependencies는 개발 과정에서만 필요한 패키지들을 의미합니다. 즉, 애플리케이션이 개발 환경(Development Environment)에서 빌드, 테스트, 코드 품질 체크 등을 할 때 필요한 도구들입니다.
• 예시: Webpack 같은 빌드 도구, Jest 같은 테스트 프레임워크, ESLint 같은 코드 품질 검사 도구들은 실제 애플리케이션이 배포되었을 때는 필요하지 않지만, 개발 중에는 매우 중요한 도구들이죠.
• 프로젝트의 개발 과정에서만 필요한 패키지들입니다. 예를 들어, 코드를 테스트하거나 빌드할 때 필요한 도구들이며, 실제 배포 후에는 사용되지 않기 때문에 운영 환경에는 설치할 필요가 없습니다.

정리

• dependencies: 앱이 실제로 작동하기 위해 운영 환경에서 반드시 필요한 패키지들입니다.
  • 예: React, Axios, Express (백엔드 서버)
• devDependencies: 개발 환경에서만 사용되며, 앱이 배포되거나 실행된 후에는 필요하지 않은 패키지들입니다.
  • 예: Webpack, Babel, ESLint, Jest

타입스크립트 파일 확장자

타입스크립트를 사용하는 파일 중 return을 포함하고 있다면 확장자를 ts로 두면 오류가 발생합니다.

return 부분이 사실 html이 아니라 JSX 즉, 자바스크립트 XML이기 때문에 그렇습니다. 따라서 단순히 javascript만 있는 .js 파일은 typescript의 .ts로 변경하고, javascript에서 JSX(React의 HTML)를 return 하는 컴포넌트들은 typescript의 .tsx
로 변경합니다.

++ 지식 하나 더!

❗️ 브라우저는 HTML,CSS,Javascript만 읽을 수 있는데 타입스크립트는 어떻게 읽을까요?
→ 실행시에 자바스크립트로 변경되어 실행됩니다.
이렇게 변경되는 작업을 컴파일 또는 트랜스파일 이라고 합니다.
이렇게 변경해주는 도구를 컴파일러 또는 트랜스파일러 라고 합니다.

컴파일: 하나의 언어가 다른 언어로 변경되는 작업
트랜스파일: 하나의 언어가 같은 언어의 다른 버전으로 변경되는 작업