JS, TS에 관하여 - 김민태의 프론트엔드 아카데미

1. Javascript 변천사

1-1. Javascript 버전

1995년, 파이어폭스 브라우저의 전신인 NetScape 브라우저에 LiveScript라는 이름으로 처음 탑재됨

(초기에는 HTML을 간단하게 조작하기 위해 만들어진 프로그램이었다.)

1996년 8월, Internet Explorer에 Jscript라는 비슷한 기능의 스크립트 언어가 탑재됨.

1-2. ECMAScript

1997년, EcmaScript가 처음 나왔고 2009년까지 12년동안 EcmaScript5까지 버전 업데이트됨

2. 웹앱의 구성요소

2-1. 웹앱의 기본 구성요소 - HTML, CSS, Javascript

• HTML → 기본적인 UI를 만들어줌
• CSS → 그 UI의 비주얼적인 요소들을 담당함
• Javascript → 동적인, 프로그래밍적인 부분들을 담당함

페이지(문서) : Javascript가 없이 HTML, CSS로만 만들어진 정적 웹페이지

앱(애플리케이션) : 상태라는 것을 갖고 있고, 사용자와 상호적으로 주고받을 수 있는 다양한 기능을 제공해주는 것. 앱이 되기 위해서는 반드시 Javascript가 있어야함.

2-2. 실행 관점의 구성요소

• 웹앱이 실행되는 과정
  1. 사용자가 브라우저를 실행시킨 다음에 주소창에 홈페이지 주소를 입력 하면
  2. 웹사이트에 접속 하면 HTML, CSS, Javascript 파일들이 물리적으로 사용자의 브라우저에 전송됨
  3. 브라우저가 그 파일들을 해석해서 실행시킴
• 웹앱에게 런타임(실행되는) 환경을 제공하는 것들
  1. 브라우저
  2. node.js

2-3. CSR & SSR

CSR(Client Side Rendering) - 브라우저에서 실행되는 Javascri pt의 실행 결과로 HTML을 주도적으로 만들어서 UI를 표현하는 방식

SSR(Server Side Rendering) - 웹 서버에서 주도적으로 HTML을 만들고 브라우저에게 전송하는 방식

2-4. 그래픽 시스템

3. 모던 Javascript와 개발 환경

보통 ES2015 버전부터 모던 Javascript라고 통칭함

3-1. 모듈

특정 파일의 어떤 기능을 사용하기 위해서 불러들여서 쓸 수 있는 기능.

Javascript에서는 js파일 안에서 다른 js파일을 사용하기 위해서 사용하고 import, export라는 문법으로 모듈을 지원함.

3-2. 번들러

시작되는 Javascript파일을 지정하면 그 파일 안에서 다른 Javascript 파일을 불러올 수 있음

그렇게 불러와서 하나의 파일로 만들어주는 것이 바로 번들러!

js파일 외에도 sass, jpg, png 등등 여러 확장자도 js, css등으로 변환 가능하다.

장점

1. HTML에서 하나의 js파일만 import 하면 됨
2. 모듈을 지원하지 않는 상황에서도 import해서 쓸 수 있게 됐다.

대표적인 번들러 - Webpack

• 트랜스파일링 - 다른 언어를 javscript로 변환해줌
• 트랜스파일러를 이용하면 최신문법의 javascript를 예전 버전의 javascript로 변환할 수 있음
• 대표적인 트랜스파일러 - Babel

번들러를 이용해서 여러 js파일을 하나의 js파일로 만들어줄 때, Babel을 이용하여 브라우저 호환성을 높여줌

4. nodejs & npm

• nodejs : v8엔진 오픈소스를 기반으로 일반 운영체제 환경에서도 javascript를 실행 할 수 있는 런타임 환경을 지원하는 어플리케이션
• npm : nodejs가 제공하는 여러가지 환경. npm을 통해서 nodejs 관련 라이브러리 관리가 가능함

npm [install or i] [라이브러리명] → node_modules에 해당 라이브러리를 설치함