ECMAScript6는 javascript 언어 등을 표준화하기 위해 만들어졌다.
- 구현체로는 ActionScript, JScript, Javascript 등 종류가 존재
https://velog.io/@k7nsuy/3ES6%EC%99%80-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8
#3_ES6와 타입스크립트
ES6는 ECMAScript의 여섯번째 버전이라는 뜻으로, ECMAScript 6를 줄여서 흔히 ES6라고 부릅니다. 개발한 프런트엔드 애플리케이션이 브라우저의 특성과 버전에 관계없이 실행되도록 하려면 ES6 코드를 E
velog.io
ES6 코드는 트랜스파일러에 의해 하위 호환성을 가진 코드로 변환되고 실행 될 때는 트랜스파일된 코드가 이용 됨
Babel · Babel
The compiler for next generation JavaScript
babeljs.io
ES6 코드를 작성하면 즉시 ES5 코드로 변환을 시도하며 에러메시지도 바로 보여주는 브라우저 기반의 도구
ES6를 사용하기 위한 설정
npm install --save-dev @babel/core @babel/cli @babel/preset-env core-js- --save-dev : 개발 중인 경우에만 사용하기 위해서 준 옵션
- 설치완료되면 package.json에 "개발의존성"항목에 설치 내용이 나옴
npm 패키지 매니저와 package.json 파일
npm install, yam add 명령어는 Node.js 패키지를 설치할 수 있는 명령어
- npm install [패키지명1] [패키지명2]
- npm install -g [패키지명1] [패키지명2] - 현재 컴퓨터의 모든 프로젝트에서 사용 가능
- npm install --save [패키지명1] [패키지명2] - 현재 프로젝트의 package.json에 의존성으로 기록, 다른 컴퓨터에 현재 프로젝트 이식할 때 'npm install'로 기록된 의존성 패키지들을 모두 설치할 수 있다.
- npm install --save-dev [패키지명1] [패키지명2] - 현재 프로젝트 package.json에 개발 의존성으로 기록. --save 옵션과 마찬가지로 기록된 의존성 패키지들을 모수 설치할 수 있다. 다만 개발 시에만 사용된다는 특징이 있다. npm install --production 옵션을 주면 설치되지 않는다.
package.json은 현재 작성하고 있는 애플리케이션 모듈의 의존성 관리를 위해 사용하는 파일이다.
주요명령어
- npm init - 프로젝트 초기화
- npm install - package.json의 패키지 설치
- npm install --save - 패키지를 프로젝트 의존성으로 추가
- npm install --save-dev - 패키지를 프로젝트 개발 의존성 수준으로 추가
- npm install --global - 패키지를 전역 수준으로 추가
- npm update --save - 프로젝트 패키지 업데이트
- npm run [스크립트명] - package.json 스크립트 명령 실행
- npm uninstall --save [패키지명] - 패키지 삭제
- npm cache clean - 캐시 삭제
babel 트랜스파일러를 사용하려면 설정 파일이 필요하며 .bablerc, babel.config.json 파일 형식이 있음.
다양한 preset 관련 옵션이 있다. 인터넷에서 찾아 사용. 여기선 간단한 설정을 사용
npx babel src -d build 명령어를 치면 build 폴더가 만들어지면서 이 폴더안에 트랜스컴파일된 파일 생성됨.
- npx는 Node 패키지를 실행시키는 도구. 원래 로컬에 설치된 패키지 중에서 실행 가능하 것들은 node_modules/.bin/ 디렉터리에 존재한다. 실행시키기 위해서는 mode_modules/.bin/babel src -d build와 같이 실행해야 하지만 npx를 사용하면 이런 불편한 점없이 사용할 수 있다. npx는 디렉터리 설치하지 않은 패키지도 "1회성"으로 실행할 수 있게 해준다.
package.json에 scripts 부분에 아래처럼 스크립트를 작성하면 npm run build로 실행할 수 있다.
let과 const
var는 함수 단위의 유효 범위만 제공한다, 반대로 if, for문의 중괄호에 의한 블록 수준의 유효 범위를 제공하지 않는다.
var의 호이스팅 문제해결을 위해 let키워드를 지원한다. let은 중괄호 단위의 유효 범위를 제공한다.
const 키워드는 처음 값이 할당되면 변경할 수 없다.(상수)
"함수나 객체를 만든 후에 이것의 메모리 주소가 바뀌지 않도록 하고 싶다면 const를 사용"하면 된다. const는 객체를 생성한 경우 객체 내부의 속성이 변경할 수는 있지만 새로운 객체를 생성하여 할당하는 것은 허용하지 않는다.
기본 파라미터와 가변 파라미터
function addContact(name, mobile, home="없음", address="없음", email="없음") {
var str = `name=${name}, mobile=${mobile}, home=${home},` +
` address=${address}, email=${email}`;
console.log(str);
}
addContact("홍길동", "010-222-3331")
addContact("이몽룡", "010-222-3331", "02-3422-9900", "서울시");
"use strict";
function addContact(name, mobile) {
var home = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "없음";
var address = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "없음";
var email = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "없음";
var str = "name=".concat(name, ", mobile=").concat(mobile, ", home=").concat(home, ",") + " address=".concat(address, ", email=").concat(email);
console.log(str);
}
addContact("홍길동", "010-222-3331");
addContact("이몽룡", "010-222-3331", "02-3422-9900", "서울시");function foodReport(name, age, ...favoriteFoods) {
console.log(name + ", " + age);
console.log(favoriteFoods);
}
foodReport("이몽룡", 20, "짜장면", "냉면", "불고기");
foodReport("홍길동", 16, "초밥");
"use strict";
function foodReport(name, age) {
console.log(name + ", " + age);
for (var _len = arguments.length, favoriteFoods = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
favoriteFoods[_key - 2] = arguments[_key];
}
console.log(favoriteFoods);
}
foodReport("이몽룡", 20, "짜장면", "냉면", "불고기");
foodReport("홍길동", 16, "초밥");구조분해 할당
let arr = [10,20,30,40];
let [a1,a2,a3] = arr
function addContact1({name, phone, email="이메일없음", age=0}) {
console.log(name,phone,email,age);
}
addContact1({ name : "이몽룡", phone : "010-3434-8989" })화살표 함수
기존 함수에 비해 간결하고 함수를 정의하는 영역의 this를 그대로 전달받을 수 있다.
this는 메서드 함수가 호출될 때마다 현재 호출중인 메서드를 보유한 객체가 this로 연결된다. 현재 호출 중인 메서드를 보유한 객체가 없다면 전역 객체(브라우저 환경에서는 window객체)가 연결된다.
var obj = { result: 0 };
obj.add = function(x,y) {
this.result = x+y;
}
var add2 = obj.add;
console.log(add2 === obj.add) //true, 동일한 함수
add2(3,4) //전역변수 result에 7이 할당됨.
console.log(obj); //{ result: 0 }
console.log(result); //7
// 직접 연결할 this를 지정하는 방법
var add = function(x,y) {
this.result = x+y;
}
var obj = {};
//1. apply() 사용
//add.apply(obj, [3,4])
//2. call() 사용
//add.call(obj,3,4)
//3. bind() 사용
add = add.bind(obj);
add(3,4)
console.log(obj); // { result : 7 }화살표 함수에서의 this
var obj = { result:0 };
obj.add = function(x,y) {
function inner() {
this.result = x+y;
}
inner = inner.bind(this);
inner()
}
obj.add(3,4)
console.log(obj) // { result: 7 }
// 위 코드에서 bind()없이 화살표함수를 사용하면 자신의 유효범위의 this로 연결
var obj = { result:0 };
obj.add = function(x,y) {
const inner = () => {
this.result = x+y;
}
inner()
}
obj.add(3,4)
console.log(obj) // { result: 7 }새로운 객체 리터럴
var name = "홍길동";
var age = 20;
var email = "gdhong@test.com";
//var obj = { name: name, age: age, email: email };
// 속성명 변수명 일치할 때 생략해서 입력가능
var obj = { name, age, email };
console.log(obj);
let p1 = {
name : "아이패드",
price : 200000,
quantity : 2,
order : function() {
if (!this.amount) {
this.amount = this.quantity * this.price;
}
console.log("주문금액 : " + this.amount);
},
// function 키워드 없이 바로 구현부{}가 따라온다
discount(rate) {
if (rate > 0 && rate < 0.8) {
this.amount = (1-rate) * this.price * this.quantity;
}
console.log((100*rate) + "% 할인된 금액으로 구매합니다.");
}
}
p1.discount(0.2);
p1.order();모듈
let base = 100;
const add = (x) => base+x;
const multiply = (x) => base*x;
const getBase = ()=>base;
export { add, multiply };
export default getBase;
export default는 import 할 때 중괄호 없이 참조할 수 있다. 단 default로 export, import 할 수 있는 요소는 단 하나다.
import getBase, { add } from './modules/02-19-module';
console.log(add(4));
console.log(getBase());Promise
비동기 처리를 좀 더 깔끔하게 수행할 수 있도록 해준다.
const p = new Promise((resolve, reject) => {
setTimeout(()=> {
var num = Math.random(); //0~1사이의 난수 발생
if (num >= 0.8) {
reject("생성된 숫자가 0.8이상임 - " + num);
}
resolve(num);
}, 2000)
})
p.then((result)=> {
console.log("처리 결과 : ", result)
})
.catch((error)=>{
console.log("오류 : ", error)
})
console.log("## Promise 객체 생성!");
비동기적인 작업을 순차적으로 실행할 수 있다.
var p = new Promise((resolve, reject)=> {
resolve("first!")
})
p.then((msg)=> {
console.log(msg);
throw new Error("## 에러!!")
return "second";
})
.then((msg)=>{
console.log(msg);
return "third";
})
.then((msg)=>{
console.log(msg);
})
.catch((error)=> {
console.log("오류 발생 ==> " + error)
})전개 연산자
let obj1 = { name:"박문수", age:29 };
let obj2 = obj1; //shallow copy(얕은복사)! obj1, obj2는 동일한 객체를 참조
let obj3 = { ...obj1 }; //객체 내부의 값은 복사하지만 obj3, obj1은 다른 객체, 깊은복사
let obj4 = { ...obj1, email:"mspark@gmail.com" }; //새로운 속성 추가
obj2.age = 19;
console.log(obj1); //{ name:"박문수", age:19 }
console.log(obj2); //{ name:"박문수", age:19 } obj1과 동일!!
console.log(obj3); //{ name:"박문수", age:29 } age가 바뀌지 않음
console.log(obj1 == obj2); //true
console.log(obj1 == obj3); //false
let arr1 = [ 100, 200, 300 ];
let arr2 = [ "hello", ...arr1, "world"];
console.log(arr1); // [ 100, 200, 300 ]
console.log(arr2); // [ "hello", 100, 200, 300, "world" ]
얕은복사와 깊은복사
😀면접준비를 위해 CS공부를 준비하는 중 얕은복사와 깊은복사를 알게되어 포스팅하게 되었다.얕은복사와 깊은복사 두 개념 모두 이전에 포스팅한 객체 지향 프로그래밍(OOP)에서 객체를 복사
velog.io
Proxy
Proxy 객체의 생성 방법은 new Proxy(targetObject, handler) 형태
handler로 함수 등록
let obj = { name : "홍길동", age :20 };
const proxy = new Proxy(obj, {
get: function(target, key) {
console.log("## get " + key)
if (!target[key]) throw new Error(`존재하지 않는 속성(${key})입니다`);
return target[key];
},
set : function(target, key, value) {
console.log("## set " + key)
if (!target[key]) throw new Error(`존재하지 않는 속성(${key})입니다`);
target[key] = value;
}
})
console.log(proxy.name); //읽기 작업 get 호출
proxy.name = "이몽룡"; //쓰기 작업 set 호출
proxy.age = 30; //쓰기 작업 set 호출var arr = [10,20,30];
const proxy = new Proxy(arr, {
get: function(target, key, receiver) {
console.log("## get " + key)
if (!target[key]) throw new Error(`존재하지 않는 속성(${key})입니다`);
return target[key];
},
set : function(target, key, value) {
console.log("## set " + key)
if (!target[key]) throw new Error(`존재하지 않는 속성(${key})입니다`);
target[key] = value;
}
})
proxy[1] = 99;
//proxy[4] = 100; //오류발생'프레임워크 > Vue.js' 카테고리의 다른 글
| Vue.js (0) | 2024.06.22 |
|---|---|
| 첫 번째 Vue.js 애플리케이션 (0) | 2024.03.27 |
