JavaScript
Front-End Application에서 자바스크립트가 쓰여요
자바스크립트의 등장
바야흐로 1995년 NetScape에서 브랜든 마이크라는 사람이
browser에서 동작하는 proto type 기반, 함수영 언어 형태를 기반으로 한 프로그래밍 언어를 만들어 냈어요
그 이름은 바로 Mocha 라는 프로젝트 였어요
LiveScript라는 이름으로 발표 되었던 언어는 당시 인기가 많았던
Java라는 이름을 따와 JavaScript라는 이름을 가지게 되었어요.
표준이 되다
ECMA라는 비영리 표준 기구에요.
Java라는 이름을 이용한 것이 태클 걸려서 표준화된 이름은
JavaScript가 아니라 ECMA Script라는 이름 (줄여서 ES)라고 등록 되었어요
우리가 주목해야할 ECMA Script
2015년에 만들어진(ECMA 2015) ES6 버전이 가장 중요한 변화를 포함하고 있어요
더 자세히 이야기 하자면?
JavaScript는 ECMA Script를 Core Language로 사용하고,
서버 혹은 클라이언트 API를 포함하여 각각 나눌 수 있습니다.
클라이언트 사이드 JS
Client-side web API + ECMA Script -> 클라이언트에서 사용하는 JS
Browser가 내장하고 있는 API
서버사이드 JS
Host API + ECMA SCRIPT -> 서버에서 사용하는 JS
Node.JS가 내장하고 있는 API
MS의 깽판
당시 막강한 점유율을 가지고 있던 인터넷 익스프롤러를 소유한 MS는 자기들의 언어로 브라우저를 돌리고 싶었어요.
그래서 JScript가 등장했어요.
JavaScript를 이용해서 만든 코드들이 인터넷 익스프롤러에서는
구동하지 않기 시작했어요(시간이 지나고 JavaScript로 돌아왔어요)
파편화 현상(Fragmentation)
JavaScript는 어떤 브라우저(환경)을 사용하냐에 따라서
정상적으로 작동하기도 하고, 작동하지 않기도 하는등의 파편화 현상이 발생해요ECMA가 표준으로 있는데 왜죠?
ECMA에서 browser API에 대한 표준을 제정해 놓았지만
구현은 브라우저를 만드는 Vender들이 해요.
그래서 브라우저마다 달라져요
JavaScript
1. 언어의 모호성
2. 구현이 어려워요
3. 파편화 현상
JQuery의 등장
구현이 용이, 파편화(fragmentatino) 해결
HTML
W3C (World Wide Web Consortium)
기본적인 웹 표준을 관리하는 기구
HTML과 CSS를 관리해요
1999년 W3C는 HTML 4.01버전에서 더이상 버전을 올리지 않을 것이라고 발표했어요
1. 정형성이 없어요 -> 유지보수의 문제
2. 확장성이 없어요 <HTML>, <Head>등
이러한 문제를 해결하기 위해 XML이 나타났어요
1. 정형화된 문법
2. 확장성
XHTML 두둥탁!
WHATWG(Weg Hypertext Application Technology Working Group)
XML로 이용하지 않고
Web Application 만들 수 있도록 HTML을 발전시켜 보아요
나중에 들어온 두개의 그룹 짜란~
Apple Google
HTML 5가 등장했어요 (웹 어플리케이션 형태로 가자고~)
HTML5
HTML기능 추가
CSS 기능 추가
JavaScript
HTML5의 영향으로
2013 Node.JS의 등장 -> Back-end application을 JavaScript로 만들자
라는 생각이 등장했답니다.
platform 다른 프로그램을 실행시켜 줄 수 있는 프로그램
자바스크립트 엔진
| 브라우저 | 회사 | 엔진 |
|---|---|---|
| Chrome | v8 | |
| Edge | MS | Chakra |
| Safari | Apple | webkit |
| FireFox | Mogilla | SpiderMonkey |
IDE Tool
1. VS Code
2. Web STorm
JS 사용하기
우리가 작성한 JavaScript를 브라우저에서 사용하기 위해서 어떻게 해야 하나요?
1. HTML을 작성해야 해요
2. JavaScript file을 HTML 내에서 링크 걸어요
3. Web Server Program이 있어야 해요
4. Web의 기본적인 동작방식을 이해해 보아요
DOM
브라우저가 동작하는 과정
-
HTML 분석
HTML을 분석해서 객체화하여 계층 구조화 시킨것이 DOM(Document Object Model)이에요
이게 브라우저가 하는 일이에요 -
CSS분석
CSS 분석을 통해 CSSOM을 만들어요
- JavaScript 실행
DOM + CSSOM을 사용해서 Render Tree 생성
화면에 그려요!
JS의 spec에 대해서 알아볼까요?
컴퓨터는 CPU를 통해서 연산합니다.
사용하는 데이터는 메모리에 올라와 있어야 해요
메모리는 data를 저장할 수 있는 memory cell의 집합체 에요!
variable(변수)
메모리 공간에 이름을 붙이는 Mechanism
identifier(식별자): 프로그래머가 이름 붙이는 것들을 말해요(class이름, 변수 이름, method 이름)
변수의 선언
Java
타입 식별자
int number = 3;JavaScript
3가지 키워드중 하나를 사용해요
var
let
const
기존에는 var만 있었는데 ES 5들어오면서 let과 const가 추가 되었어요!
var: function level scope
let, const: blocck level scope
java의 경우(기본적으로 block level scope를 가져요)
public class Main {
public static void main(String[] args){
int result = 1000; // 변수의 선언 + 초기화 까지 같이 진행
ir(true) {
int result = 0;
}
}
- variable(변수)
- 선언을 통해 변수를 생성
- JS는 변수를 생성할 때 Data type을 명시하지 않아요
- 만들어진 변수에 어떤 값이든 다 들어가요(이런 타입의 언어를 weak type(약타입) 언어라고 해요
- 변수 이름 -> 변수 식별자 (identifier)라고 해요
- var, let의 가장 큰 차이는 scope에요
변수의 유효 범위가 다른거죠
var -> function level scope
let -> block level scope - hoisting
코드 뒤쪽(해당 스코프 아래쪽)에서 선언된 변수가 코드 위쪽(해당 스코프 위쪽)에서 선언된 것 처럼 보이는 현상을 hoisting 이라고 해요 - JS code는 2 Phase 로 실행되기 때문에 hoisting 현상이 발생하는 거에요
- var -> 같은 scope내에서 중복 선언가능(좋지 않아요)
- let -> 같은 scope내에서 중복 선언이 안되요
- Creation Phase에서 생성될 변수에는 undefined가 세팅되요(사용자가 할당할 수 없는 값이에요)
2일차
리터럴(표기법)
