🛠 JavaScript Essential - 1. JavaScript의 역사, 웹앱의 구성 요소, 모던 자바스크립트와 개발 환경

이춘길·2021년 10월 10일

JavaScript

🐱‍🏍 목표

JavaScript 버전 파악
웹앱의 구성 요소
모던 자바스크립트와 개발 환경

📌 1. JavaScript에 역사

1995 : Netscape

LiveScript : 단순 HTML을 조작하기 위한 언어로 설계
IE : JScript

1997 : JavaScript ECMA 3.0

JavaScript 표준 기관 설립 (ECMA)

2000년대 : 닷컴 버블 발생

인터넷 사용량 폭증
ActionScript(Flash)를 JavaScript 표준화로 만들기 위한 노력
Steve Jobs : No Flash !!! (IPhone)
결과적으로, ActionScript는 역사속으로...
과도기 단계로 인한 ECMA 4.0 버전은 존재하지 않음

2009 : ECMAScript 5.0

현대에 사용하는 JavaScript 호환성 버전
예) Babel을 통한 ES 트랜스파일링 > ECMA 5.0

2015 이후 : ES2015 ~

모던 자바스크립트라고 불리우는 최초 버전
이 후, 연도별로 2016, 2017... 출시

📌 2. 웹앱의 구성 요소

HTML, CSS, JavaScript 로 구성

2-1) 실행 관점의 구성 요소

런타임 환경을 제공하는 환경을 뜻함
Browser, NodeJS

2-2) CSR & SSR

CSR
1) Server에서 HTML 파일을 전송한다
2) Client 내에서 JS에 의해 페이지 조작
SSR
1) 조작된 페이지 자체를 서버로 부터 받는다

2-3) 그래픽 시스템

HTML, CSS을 통한 표현
차트, 애니메이션, 3D : JavaScript Canvas

2-4) 이외에

미디어 파일, 웹 워커, 웹 어셈블리등

📌 3. 모던 자바스크립트와 개발 환경에 고도화

JS는 초기 설계 당시, 단순 웹 조작을 위한 언어
하지만, 웹앱의 규모가 커지고 복잡해진다.
ECMA는 대응을 위해 JavaScript에 새로운 문법들을 추가했고,
ES2015에서 모듈 문법이 등장하면서 환경이 바뀐다.

3-1) ES2015, 모듈에 등장

초기 JS는 HTML > head, body 태그에 script 파일을 추가해서 불러들이는 형식을 사용했다.

<head>
 <script src="..." />
 <script src="..." />
 <script src="..." />
 ...
</head>

웹앱이 커지면서 모든 JS파일을 선언하는게 불편하다고 판단, 해결을 위해 모듈이 등장한다.
import / export 구문을 통해 다른 JS 파일을 불러다가 사용할 수 있게 된다.

// App.js

import Button from 'components/atomics/button';
const App = () => <div><Button /></div>;
export default App;

// index.html
<head>
 <script src="./App.js" />
</head>

3-2) 번들러와 트랜스파일러의 등장

1) 번들러

Webpack, Parcel, Rollup등

자바스크립트 모듈을 가져옴
구문을 해석함
하나의 파일로 번들링 (ECMA 5.0)
최적화 기능
- 코드 최적화
- CSS, Assets 최적화
웹앱이 커지고 편의를 위하여 번들러 기능도 추가
번들러가 비대해져 사용, 세팅이 복잡해 짐

2) 트랜스파일러

대표적으로, Babel이 존재
웹 개발 언어는 JavaScript가 유일함
브라우저 ( JavaScript > 기계어 > 브라우저 )
ES2015 > ECMA 5.0
TypeScript > ECMA 5.0

참고

패스트캠퍼스 김민태의 프론트엔드 아카데미

이춘길

일지를 꾸준히 작성하자.

이전 포스트

📄 Okky 프리랜서 가이드 라인 요약 - 3. 미래, 급여 계산법, 세금 지식

다음 포스트

🛠 JavaScript Essential - 1. JavaScript의 역사, 웹앱의 구성 요소, 모던 자바스크립트와 개발 환경

🐱‍🏍 목표

📌 1. JavaScript에 역사

1995 : Netscape

1997 : JavaScript ECMA 3.0

2000년대 : 닷컴 버블 발생

2009 : ECMAScript 5.0

2015 이후 : ES2015 ~

📌 2. 웹앱의 구성 요소

2-1) 실행 관점의 구성 요소

2-2) CSR & SSR

2-3) 그래픽 시스템

2-4) 이외에

📌 3. 모던 자바스크립트와 개발 환경에 고도화

3-1) ES2015, 모듈에 등장

3-2) 번들러와 트랜스파일러의 등장

1) 번들러

2) 트랜스파일러

참고

📄 Okky 프리랜서 가이드 라인 요약 - 3. 미래, 급여 계산법, 세금 지식

💻 컴퓨터 구조 - 1. 컴퓨터의 구성 요소 및 역할

0개의 댓글