ECMA6
ECMA
Ecma 인터내셔널은 정보 통신에 대한 표준을 제정하는 단체이다.
각각의 표준들은 고유한 이름과 번호를 가진다.
ECMA-262는 범용 목적의 스크립트에 대한 표준이다.
ECMAScript는 ECMA-262에 대한 규칙들이 모여있는 문서이다.
- *Ecma 인터내셔널 **
정보 통신에 대한 표준을 제정하는 비영리 표준화 기구
ex) 국립국어원 - *ECMA-262
Ecma 인터내셔널에 의해 제정된 표준, 범용 목적의 스크립트 언어에 대한 표준**.
ex) 표준어
ECMAScript
ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어 , 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공
ex) 맞춤법과 같은 규칙
ECMA6
ECMAScript 6는 ECMA-262 표준의 제 6판이며, ECMAScript 사양의 주요 변경 사항 및 개선 사항을 명세. ‘ES6’, ‘ES2015’, ‘ECMAScript 2015’라고 할수 있다.
JavaScript
브라우저가 ECMAScript 표준을 구현한 실제 언어
(ECMA SCript라는 규칙에 따라 만든 언어)
JavaScript 엔진(JavaScript interpreter)
JavaScript 코드를 이해하고 실행하는 프로그램 또는 인터프리터
브라우저의 Js 엔진마다 수행능력(얼마나 효율적으로 처리하는지), 지원되는 ECMAScript가 다르다.
Google Chrome의 V8, Mozilla Firefox의 SpiderMonkey, Microsoft Edge의 Chakra 등...
바벨(Babel)
바벨은 ES6 사양으로 작성된 코드를 함수적으로 동일한 ES5 코드로 바꿔준다. 대부분의 주요 브라우저는 ES5까지는 지원을 하기 때문에, 개발자들의 브라우저 호환성을 보완해준다.
ECMA6 문법
1) let / const — 블록 스코프 변수
한 줄 정의: let은 변경 가능한 블록 스코프 변수, const는 재할당 불가한 블록 스코프 상수.
var의 함수 스코프·재선언/호이스팅 이슈로 생기는 버그를 줄임.
let count = 0; // 변경 O
const MAX = 10; // 재할당 X (객체/배열의 '내용' 변경은 가능)
2) 템플릿 리터럴 (백틱 ``)
문자열 안에 표현식 삽입과 줄바꿈을 깔끔하게한다.
const name = "준";
console.log(`안녕, ${name}! 1+2=${1+2}`); // 표현식 가능
const multi = `여러 줄
그대로 작성 가능`;
3) 화살표 함수 간결
const add = (x, y) => x + y; // 표현식이면 return 생략
const fn = () => ({ a: 1 }); // 객체 리턴은 괄호로 감싸기
4) 기본값 / 나머지(Rest) / 전개(Spread)
- 기본값: 매개변수 없을 때 디폴트.
- Rest: 함수 인자로 들어온 가변 개수를 배열로.
- Spread: 배열/객체 펼치기(복사·합치기).
// 기본값
function greet(name = "친구") {
console.log(`안녕, ${name}`);
}
greet(); // 안녕, 친구
greet("준"); // 안녕, 준
// Rest: 가변 인자
function sum(...nums) {
return nums.reduce((a, c) => a + c, 0);
}
sum(1, 2, 3); // 6
// Spread: 펼치기(복사/합치기)
const a = [1, 2];
const b = [...a, 3]; // [1,2,3]
const base = { x: 1, y: 2 };
const c = { ...base, y: 9, z: 3 }; // {x:1,y:9,z:3}
5) 구조 분해 할당
배열/객체에서 필요한 값만 한 번에 꺼내기.
// 객체
const user = { id: 1, nick: "geon" };
const { id, nick: name, country = "KR" } = user;
// id -> 1, name -> "geon", country -> "KR"(기본값)
// 배열
const arr = [10, 20, 30];
const [first, , third] = arr; // 10, 30
// 값 바꾸기(스왑)
let x = 1, y = 2;
[x, y] = [y, x]; // x=2, y=1
6) 객체 리터럴 개선 (단축 표기/메서드 축약/계산된 키)
키와 변수명이 같으면 축약, 메서드 정의도 축약, 계산된 속성명 지원.
const x = 10;
const key = "score";
const obj = {
x, // x: x
hello() { console.log("hi"); },
[key]: 99 // "score": 99
};
7) 모듈 (import / export)
다른 파일의 함수를 내보내고(export), 가져오기 (import)
// math.js
export const PI = 3.14; // Named export
export default function add(a, b) { // Default export
return a + b;
}
// main.js
import add, { PI } from "./math.js";
console.log(add(2, 3), PI);
https://i.sstatic.net/pI1Wn.png
SPA
Single page Application
SPA는 첫 방문 때 핵심 HTML·CSS·JS만 한 번 받아오고, 그다음부터는 URL이 바뀌어도 필요한 데이터만 변경하도록한다. 덕분에 앱처럼 빠르고 부드러운 사용자 경험을 주면서, 컴포넌트 기반 구조로 유지보수·확장이 쉽다.
여기서 필요한데이터 (실시간 데이터 , json과 같은 데이터들을 ajax 네트워크 통신을통해 가져온다)
MPA
MPA(Multi Page Application)는 SPA와 반대되는 전통적인 웹 애플리케이션 개념.
즉 페이지가 이동할때마다 전체페이지에대한 리소스를 가져오는방식을 의미한다.
React
SPA를 구현하기 위한 Js 프레임워크(다양한 라이브러리 제공해주는 lib모음집)
SPA는 대표적으로 React, Vue, Angular와 같은 JavaScript 프레임워크 및 라이브러리를 사용하여 구현
JSX 문법이란?
자바스크립트 안에 HTML을 그대로 쓸 수 있게 해주는 React 문법 (실제로 HTML 아님 주의)
컴포넌트란?
화면의 한 (UI) 조각을 정의하고 재사용할 수 있는 자바스크립트 함수
npm이란?
전세계 React 와 같은 라이브러리 툴을 npm install 한번으로 받아오는 패키지 모듈 관리자
