수업 순서
FrontEnd
- ECMAScript -> React
BackEnd
- Java -> Database -> Servlet -> Spring
History
Javascript
"알면 좋고, 몰라도 크게 상관 없는"
Javascript 시작
1995, Netscape 사의 "브랜든 아이크"
웹에서 사용 가능한 목적으로 Prototype 기반의 함수형 언어를 만들려고 했다.
=> Mocha - LiveScript로 발표 - 마케팅 목적으로 Javascript로 변경
Javascript 표준화 진행
언어를 만든 후에 거쳐야 하는 과정이다. 이미 java라는 언어가 있어서 라이센스 때문에 표준화 진행이 잘 되지 않았다.
=> ECMA(비영리표준기구)에 표준화 의뢰한 결과, ECMAScript라는 이름으로 표준화가 진행되었다.
Javascript === ECMAscript ??
Javascript = ECMAscript + client side web API ( POST API )
ECMAScript
일년에 한 번씩 버전이 발표되고 있다.
ECMAScript 2015 -> ES6 ( 가장 대표적인 버전 )
ECMAScript 2016 -> ES7
ECMAScript 2017 -> ES8
...
ECMAScript 2021 -> ES12
ES6가 가장 유명한 이유는 ES5에서 ES6에서 넘어올 때 언어 자체에 큰 변화가 생겼기 때문이다. 모든 브라우저에서 원활하게 돌아갈 수 있는 것이 ES6 버전이다.
이와는 반대로 MS에서는 JScript가 개발되었다. 브라우저마다 여러가지가 개발되면서 문제가 발생한다.
=> Fragmentation(파편화) 현상 발생
ES6가 처음에는 언어의 모호성, 구현의 어려움이 있었다. 이를 해결해주기 위해 JQuery가 나오게 되었다.
JQuery
"좋지만 단점도 있다"
파편화를 해결해주기 위해 등장하였다. ECMAScript와 JavaScript가 잘 사용되지 않게 되었다.
프레임워크가 아니라 라이브러리이다. 유지보수에 문제가 있다.
HTML5
등장 배경
기존 HTML의 문제
HTML과 CSS의 표준을 관장하는 곳은 W3C이다. 1999년 12월, W3C가 현재 HTML 4.01 버전을 마지막으로 더이상 업데이트를 하지 않겠다고 발표했다.
- 이유
: HTML의 정형성 부족 (조금 틀려도 브라우저가 알아서 렌더링한다. 그러면 유지보수가 어려워진다.)
: HTML 언어 자체의 확장성 부족 (사용 가능한 태그가 정해져있다. 내가 원하는 태그를 만들어서 사용할 수 없다.)
새로운 표준 등장
기존의 HTML의 문제를 해결하기 위해 W3C는 HTML과 XML(정형성, 확장성 있는 태그 언어)을 섞어서 새로운 표준을 만들게 된다. => XHTML 1.0 (2000년 1월) 이 표준이 되었다.
HTML5 표준
WHATWG에서 XML을 사용하지 않고 HTML 자체를 발전시키기 위해 연구를 시작하였다. Web page 뿐만 아니라 Web application을 제작하기 위해 등장하였다. => HTML5
구글과 애플이 동참하고, 사람들이 많이 사용하게 되어 HTML5가 표준이 되었다.
HTML5 구성
HTML5 = HTML(25%) + CSS(5%) + JavaScript web API(70%)
대부분이 JavaScript로 구성되어 있다. 다시 JavaScript의 위상이 올라가게 되었다. 이후에 JavaScript 표준화가 다시 진행되고 ES5가 나오게 된다.
TypeScript
MicroSoft에서 2012년에 만들었다. TypeScript는 ECMAScript의 Superset이다.
- Meta Programming
: TypeScript 언어로 프로그래밍을 하고 transpile(트랜스파일)을 한다. 그러면 JavaScript 코드가 나온다. JavaScript에 없는 기능을 추가해서 사용할 수 있다.(ex.추상클래스)
Node.js
Node.js의 등장으로 브라우저 안에 갇혀 있었던 JavaScript가 독립적인 application을 만들 수 있는 언어로 격상하게 되었다. 이 시기에 ES6가 등장한다.
알아두면 좋은 것들
Package Manager(npm)
: application을 사용할 때 여러 라이브러리가 필요한데 이를 관리해주는 것 모듈 간의 버전을 알아서 맞춰준다.
Transpiler(TypeScript)
자동화 도구(gulp)
: 빌드(build), 테스트(test), 배포(deploy)를 자동화 시켜주는 도구이다.
