JS vs TS JS는 인터프리터 언어이다. 코드를 한 줄씩 읽어가면서 명령을 처리한다. JS는 동적 타이핑 언어이다. 변수의 자료형이 런타임에 결정되어 JS엔진에 의해 자유롭게 변경된다. 따라서 발생하는 오류들은 런타임 오류들이다. TS는 컴파일 언어이다. 코드 작성이 끝나면 빌드 작업을 통해 코드를 JS로 한 번 바꾸어 준 후 코드를 실행한다. TS는 정적 타이핑 언어이다. 변수의 자료형을 명시적으로 개발자가 지정해 컴파일 단계에서 타입이 올바른지 판단한다. 따라서 발생하는 오류들은 컴파일 오류들이다. 그러나 모든 런타임 오류를 타입스크립트로 방지할 수는 없다고 한다. 타입스크립트는 node.js 나 브라우저가 해석할 수 없다. 따라서 js 코드로 변환해 주는 작업이 필요하다. 타입스크립트의 동작 과..

글의 목적 typeScript가 어떤 과정을 거쳐 js 코드가 되는지 알아본다. 트랜스파일링 JSX코드는 브라우저에서 바로 실행할 수 없다. typeScript 코드도 마찬가지이다. 그러면 JSX코드나 ts 코드 ( TSX )를 js 코드로 바꾸어주어야 하는데 이 과정이 트랜스파일링 과정이다. 이때 TSX 코드를 브라우저가 해석할 수 있는 js코드로 바꾸는 방법은 두 가지가 있다. 1. TSX 코드를 바로 js 코드로 번역 2. TSX 코드를 JSX 코드로 번역하고 번들러가 JSX 코드를 js 코드로 번역 이 파일의 jsx 옵션이 위의 방식을 결정한다. react나 react-jsx의 경우 1번 방법으로 번역하고 preserve의 경우 2번 방법으로 번역한다. vite, react-create-app, ..

웹이 알아들을 수 있는 언어 : html / css / js 그렇다면 JSX코드나 styled-component 코드나 scss코드는 누가 처리해 주지,,? --> 번들러!! 번들러가 나오게 된 이유... 아주아주 옛날에 짜던 코드 export, import를 통해 코드를 분리할 수 없었던 그 시절.. 선배림들은 html 파일 안에 여러 개의 태그를 사용해 소스를 로드했다. 이러면 a script 파일과 b 스크립트 파일에 같은 이름의 변수가 선언되어 있을 경우 충돌이 발생했다. (스코프가 구분이 안 돼서!!!) 따라서 전역변수(var) / 즉시 실행함수 표현식 등을 사용해 스코프를 구분하고 코드를 조직화했다. --> 전역변수를 써야 하고 애플리케이션이 커질수록 유지보수 어러워짐 ES6 import, e..