[김민태의 프론트엔드 아카데미] 제 1강 JavaScript & TypeScript Essential 02 JavaScript 그리고 TypeScript

02 JavaScript 그리고 TypeScript

01 JavaScript 변천사

01 JavaScript 버전

• 1995 LiveScript 넷스케이프에서 처음 만들었다
• internet explorer에도 JScript가 탑재됨

02 ECMAScript

• 1997 JavaScript Ecma
• 2000년대 초반 닷컴 버블 : 인터넷 비즈니스를 기반으로 기업들이 성장
• 2009 EcmaScript v5 이 때까지 어도비 flash player가 유행이라 JS가 많이 발전하진 못함.
• 모바일이 시장에 나오기 시작하고 스티브잡스가 No Flash를 선언

03 모던 JavaScript

• 2015 이후로 모던 자바스크립트라고 함

04 트랜스파일러

• 최신 버전으로 개발하지만 5.0 버전으로 변환하는 트랜스 파일러가 있음(바벨 등)

02 웹앱의 구성요소

01 웹의 기본 구성 요소

• HTML : UI Layer
• CSS : 디자인
• JavaScript : 동적 요소
• 정적인 페이지 : HTML, CSS로만 구성
• 앱 : 인터랙티브하고, 사용자에게 다양한 경험을 제공 (JS 필수)

02 실행 관점이 구성 요소

• 브라우저를 런타임 환경에 제공하는 환경
• 그 외에도 다양한 환경이 있음

CSR & SSR

• HTML을 어디에서 만드는가가 관건
• CSR (Client Side Rendering) : JS로 그 때 그 때 만드는 것
• SSR (Server Side Rendering) : 서버에서 만들어서 전송해주는 것

그래픽 시스템

• canvas tag
• JS api를 이용하여 그래픽 적용할 수 있음

03 모던 JavaScript와 개발 환경

01 급변한 프론트엔드 개발 환경

• nodejs와 npm으로 인해 개발 환경이 급변
• 웹앱의 규모가 커지고 복잡해졌음

02 모듈

• 원래는 모듈 스펙이 없었는데 ES2015부터 지원
• import가 없었다니;;

03 브라우저 호환성

• caniuse.com
• 웹개발자들은 브라우저 호환성을 최대한 넓게 가져가야 함
• 개발자들은 최신 문법을 쓰면 생산성있게 개발을 할 수 있음
• 하지만 최신 문법을 지원하지 않는 브라우저들이 있음
• 그래서 엔지니어링이 나왔다고 함.
• npm으로 갖다쓰기 쉬워짐

04 번들러

• import한 모듈들을 구문 분석해서 여러 개의 파일을 하나의 파일로 만들어주는 것
• Webpack이 가장 많이 쓰임.
• 불필요한 코드나 주석을 지우면서 파일 사이즈가 작아짐.
• 이미지 파일 최적화
• 코드 난독화 (uglify)
• 트랜스파일링 (transfiling) : 브라우저가 이해할 수 있는 언어로 변경 (컴파일러와 비슷)
• 기능이 많아지다보니 셋팅이 복잡해짐
• 트랜스파일러를 이용하여 최신 문법을 하위버전의 문법으로 변환하여 최신 브라우저에서도 사용할 수 있음
• 트랜스파일러 덕분에 타입스크립트도 사용할 수 있음!
• 트랜스파일러 대표적인 것 : 바벨

04 TypeScript vs Javascript

01 TypeScript?

• JS는 TS의 슈퍼셋이다

02 유형(Type) 정의

• 데이터에 대한 설명을 지원

03 실습

• 좀더 풍부한 타입을 지정할 수 있음
• type Centimeter = number; type RainbowColor = 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'navy' | 'purple' let age: number = 10; let weight: number = 50; let height: Centimeter = 176; let color: RainbowColor = 'orange'; color = 'black'; // Error

04 데이터 유형 정의의 중요성

• 데이터 유형을 설명해줌으로써 유지보수를 용이하게 만듦

05 nodeJS & npm

01 NodeJS

• 구글에서 브라우저에서 실행할 수 있는 자바스크립트 엔진 V8을 만들었음
• 이것을 보고 라이언달이 일반 OS에서도 실행할 수 있는 런타임 환경을 개발

02 간단한 node 앱 만들기

$ node {실행할 JS파일 이름}

03 npmJS

• 커맨드 하나로 다운받아서 사용할 수 있음!