Js와 tsx,ts의 차이점

이번시간에는 개발시에 가장 중요한 파일 설정에 관해서 알아보겠습니다.

 

1. 파일 구성

우선 React 개발시에는 3가지의 구성된 파일 규칙이 있는데요 먼저 가장 기본인 JS 부터 JSX, ts , TSX 로 구성되어있습니다.

 

 

1. Javascript

우선 자바스크립트는 객체 지향 프로그래밍으로  브라우저 내에서 주로 사용되며, 다른 응용 프로그램 내장 객체에도 접근 가능한 언어입니다.

 

또한 Node.js라는 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있습니다. 자바스크립트 기반으로 된 언어들도 많은데요 

 

대표적으로 뽑자면 가장 핫한 React를 뽑을 수 있습니다.

 

React에 가장 장점인 유지보수 모바일 개발이 가장 좋은점인데요. 이런것과 JS와 합친것이 가장 큰 장점입니다.

 

 

JS의 장점은 가장 효율적인 언어를 지원한다는 건데요

대표적으로 이 3가지 Angular, VueJs, React가 가장 핫한 언어들입니다.

 

 

자바 스크립트의 장점

 

1. 속도(Speed)

 

자바스크립트는 인터프리터 언어 이기 때문에, 자바와 같이 컴파일이 필요한 다른 프로그래밍 언어에 비해서 가장 적게 소요됩니다.

 

또한 자바스크립트라서 서버 연결에 드는 시간도 절약하고 프로그램 실행 속도도 높일 수 있습니다.

 

2.단순함 (Simplicity)

 

자바스크립트는 배우기 쉬운 언어이다. 개발자 뿐만 아닌 개인도 쉽게 이해할 수 있는 구조를 가지고 있습니다. 개발 자체가 쉬워서 프로그래머들의 개발 속도를 단축시켜줍니다.

 

3.인기 (Popularity)

 

현대의 모든 브라우저들이 기본적으로 Javascript를 지원하기 때문에, 사실상 자바스크립트를 거의 모든 곳에서 발견할 수 있습니다. 구글, 아마존, 페이팔 등의 유명한 기업들도 자바스크립트 도구를 사용합니다.

 

자바 스크립트의 단점

 

1. 클라이언트 보안 (Client-side Security)

 

자바 스크립트 코드는 유저에게 보이기 때문에, 누군가 악의적으로 Javascript 의 코드를 사용할 가능성이 있습니다. 인증(authentifictation) 없이 소스 코드를 사용하는 것이 이에 해당 됩니다. 또한 데이터 보안을 손상시킬 수 있는 악성 코드를 웹사이트에 삽입하는 것이 쉽게 이루어 집니다.

 

2. 브라우저 지원 (Browser Support)

 

브라우저 마다 자바스크립트를 해석(interpret)하는 방법이 제각기 다르고, 따라서, 코드를 배포하기 전에 다양한 플랫폼에서 잘 돌아가는지 확인해보아야 합니다. 또한 구형 브라우저에서 새로운 기능을 지원하지 않는 경우가 많아 그부분도 늘 확인해야 합니다.

 

3. 디버깅 기능의 부족 (Lack of Debugging Facility)

 

몇몇 HTML에디터가 디버깅 기능을 제공하지만, C/C++ 에디터와 같은 다른 에디터에 있는 것처럼 유용하진 않습니다. 또한 브라우저는 에러를 보여주지 않기에 개발자가 문제를 찾아내는 것도 어렵습니다.

 

4. 단일 상속(Single Inheritance)

자바스크립트는 단일 상속만을 지원하고 다중 상속은 지원하지 않습니다.

 

 

2. TS / TSX

 

타입 스크립트는 Javascript에 Type을 부여한 언어입니다. 자바스크립트의 확장된 언어로 볼수 있습니다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행 하려면 파일을 한번 변환해주는 형식을 갖춰야 합니다. 이 변환 과정을 컴파일(compille) 이라고

합니다.

 

2-1. 타입 스크립트를 써야하는 이유

 

1. 정적 타입

Javascript도 충분히 복잡하고 어려운데 왜 우리는 TypeScript를 써야 할까요? 이유는 많은데 그중 가장 큰이유 는 정적 타입을 지원한다는 겁니다. 

function sum(a, b) {
  return a + b;
}

sum('x', 'y'); // 'xy'

 위 코드는 자바스크립트 문법상 어떠한 문제도 없으며 자바스크립트 엔진은 아무런 이의 제기없이 이코드를 실행해줄 겁니다.

 이러한 상황이 발생한 이유는 변수나 반환값의 타입을 사전에 정하지 않는 자바스크립트 동적 타이핑(Dynamic Typing)에 의한 

 이유 입니다.

 

 위 함수를 Typescript로 정적 타입을 사용해 다시 작성해보면

function sum(a: number, b: number) {
  return a + b;
}

sum('x', 'y');
// error TS2345: Argument of type '"x"' is not assignable to parameter of type 'number'.

 Typescript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있습니다. 명시적인 정적 타입 지정은 개발  자의 의도를 명확하게 코드로 기술할 수 있습니다. 이는 코드의 가독성을 높이며 예측할 수 있게 하고 디버깅을 쉽게 하게 만듭니다.

 

1. 도구의 지원

 

TypeScript를 사용하는 이유는 여러가지지만 가장 큰 장점은 IDE(통합 개발 환경) 을 포함한 다양한 도구를 자원 받을 수 있습니다. IDE와 같은 

 도구에 타입 정보를 제공함으로 높은 수준의 인텔리센스(InteliSence) 코드 어시스트, 타입체크, 리팩토링 등을 지원 받으며 이러한 도구의 지원은 

 대규모 프로젝트를 위한 필수 요소기도 합니다.

 

2. 강력한 객체지향 프로그래밍 지원

 

인터페이스, 제네릭 등과 같은 강력한 객체지향 프로그래밍 지원은 크고 복잡한 프로젝트의 코드 기반을 쉽게 구성할 수 있도록 도우며, Java, C# 등의 클래스 기반 객체지향 언어에 익숙한 개발자가 자바스크립트 프로젝트를 수행하는 데 진입 장벽을 낮추는 효과를 볼수있습니다.

 

3. ES6 / ES Next 지원 

 

브라우저 만 있다면 컴파일러 등의 개발환경 구축없이 바로 사용할 수 있는 ES5 와 비교할 때, 개발 환경 구축 관점에서 다소 복잡해진 측면이 있지만 

현재 ES6은 완전히 지원하지않고 있는 브라우저를 고려해 Babel 등의 트랜스파일러를 사용해야 하는 현 상황에서 Typescript 개발환경 구축에 드는 

수고는 그다지 아깝지 않다고 생각할 것입니다. 또한 Typescript는 아직 ECMAScript 표준에 포함되지는 않았지만 표준화가 유력한 스펙을 

선제적으로 도입함으로 새로운 스펙의 유용한 기능을 안전하게 도입하기에 유리합니다.

 

4. Angular

 

마지막으로 Angular는 Typescript 뿐만 아닌 자바스크립트(ES5,ES6),Dart로도 작성할 수 있지만 Angular 문서, 커뮤니티 활동에서 가장 많이 사용되는 것이 Typescript입니다. Angular관련 문서의 예제 등에도 Typescript로 작성된 것이 대부분 이어서 관련 정보를 얻을 때 이점이 있고 이러한 현상은 앞으로도 지속될 것으로 보입니다.