05.07 학습

한강섭·2025년 5월 7일

vue 공부

학습 & 숙제

목록 보기

81/103

Vue.js (New Features)

ES6 (ES2015)

Java Script의 새로운 기능들!

ECMAScript : 표준 스펙 채택

표준화의 시작

let

변수의 scope가 선언된 블록으로 한정되며 동일한 이름의 변수를 재 선언할 수 없음
var 변수처럼 호이스팅이 발생하긴 하지만 초기화 전까지 사용할 수 없음 (Temporal Dead
Zone) - 접근 시 ReferenceError 발생

const

let + 불변성

주의 : const 안에 있는 속성은 변경가능!

arrow function

간결한 함수 문법

lexical한 this binding

// this 바인딩 차이
const person = {
  name: "Alice",
  sayHello: function () {
    setTimeout(function () {
      console.log("Hello, " + this.name, this);
    }, 100);
  },
  sayHelloArrow: function () {
    setTimeout(() => {
      console.log("Hello, " + this.name, this);
    }, 100);
  },
};

강화된 객체 표현

let language = "javascript";
let oldStyle = {
  language: language,
  sayLang: function () {
    console.log(`사용 언어는 ${this.language} 이다.`);
  },
};

let newStyle = {
  language,
  sayLang() {
    console.log(`사용 언어는 ${this.language} 이다.`);
  },
};

spread operator

기존의 객체, 배열의 값을 복제나 옮길 때

let normal = {
  name: "hong",
  age: 30,
};

let oldHero = {
  name: normal.name,
  age: normal.age,
  nick: "율도국왕",
};

console.log(oldHero); //{ name: 'hong', age: 30, nick: '율도국왕' }

let newHero = {
  ...oldHero,
  wish: `아버지를 아버지라고 부르고 싶어함.`,
};

console.log(newHero); // { name: 'hong', age: 30, nick: '율도국왕', wish: '아버지를 아버지라고 부르고 싶어함.' }

const originalArray = [1, { value: 10 }, 3];
const copiedArray = [...originalArray];

copiedArray[0] = 100; // 복사된 배열의 원시값 변경
copiedArray[1].value = 20; // 복사된 배열의 객체 속성 변경

console.log(originalArray[0]); // 1
console.log(originalArray[1].value); // 20

structuring vs de-structuring

객체, 배열을 이용해서 여러가지 데이터를 하나의 변수에 담기 vs 하나의 변수에 담긴 여러 값을 여러 변수로 분리하는 것

// 객체 구조 분해
const customer = {
  cname: "김영희",
  age: 28,
  job: "디자이너",
  address: {
    city: "서울",
    district: "강남구",
  },
};
const { cname, age, job, address } = customer;
console.log(cname); // '김영희'
customer.address.city = "광주";
console.log(address); // 광주 왜? reference를 가리킨다!!

const {
  cname: cname2,
  //job,
  address: { city },
} = customer;
console.log(cname2, city);

// 배열 구조 분해
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

Computed Property name

동적으로 property 이름을 생성하는 방법

// computed property name
let dynamicPropObj = {
  ["name" + "_1"]: "hong",
}
console.log(dynamicPropObj) // { name_1: 'hong' }

let oldDynamicPropObj = {}
oldDynamicPropObj["name" + "_1"] = "hong"
console.log(oldDynamicPropObj) // { name_1: 'hong' }

const keys = {key1:"HisNameIsVeryLongSoICantRemember", key2:"THE_MAX_LENGTH_OF_LINE", key3:"😀"}
const objWithKeys = {
  HisNameIsVeryLongSoICantRemember: "홍길동",
  [keys.key2]: 30,
  [keys.key3]: "seoul",
}
console.log(objWithKeys) 

//{
//  HisNameIsVeryLongSoICantRemember: '홍길동',
//  THE_MAX_LENGTH_OF_LINE: 30,
//  '😀': 'seoul'
//}

Module system

코드를 모듈화해서 재사용

import/ export 구문 활용

export

default 객체 하나 export

export default {
  sayHello: {
    kor(name) {
      console.log(`안녕 ${name}`);
    },
    eng(name) {
      console.log(`Hello ${name}`);
    },
  },
  sayHi() {
    console.log("Hi");
  },
};

addr, age, name, add 이렇게 4개 export

let addr = "seoul";
let age = 30;
export { addr, age };

export let name = "홍길동";
export function add(a, b) {
  return a + b;
}

import


import { name, add, addr as myaddr, age } from "./export_multi.js";
import greeting from "./export_default.js";

console.log(name, myaddr, age);

greeting.sayHello.kor(name);

export { name, add, myaddr, age, greeting };

promise

callback hell에 대한 대책으로 비동기 작업이 성공적으로 종료된 이후의 결과값 또는 실패 사유를 처리하기 위한 API

Proxy

메서드의 기본적인 동작을 가로채서 추가적인 작업을 수행하거나 대체하는 행위/객체
반응성 을 주기 위해 Proxy 도입!

handler

trap을 가지는 placeholder 객체

trap

target 객체의 property에 접근하기 위한 set/get 등 메서드들로 내부 메서드와 연결됨

trap의 활용

const nums = { num1: 10000, num2: 20000 }
let sum = 0
let multi = 0

const sumNums = () => {
  sum = 0
  for (let key in nums) {
    sum += nums[key]
  }
}

const multiNums = () => {
  multi = 1
  for (let key in nums) {
    multi *= nums[key]
  }
}

sumNums()
multiNums()

console.log(`기본: nums: ${JSON.stringify(nums)}, sum: ${sum}, multi: ${multi}`)
nums["num3"] = 3
console.log(`추가: nums: ${JSON.stringify(nums)}, sum: ${sum}, multi: ${multi}`)

//  proxy를 이용해서 nums의 속성이 수정되거나 추가될 때 sum과 multi가 계산되도록 처리
//  값을 출력할 때는 천단위 구분자를 적용해보자.
const numsProxy = new Proxy(nums, {
  set(target, property, newValue){
    target[property] = newValue;
    sumNums();
    multiNums();
  },
  get(target, property){
    return new Intl.NumberFormat().format(target[property]);
  }
});

numsProxy.num4 = 100;
console.log(`proxy 후: ${JSON.stringify(nums)}, sum: ${sum}, multi: ${multi}`)
console.log(numsProxy.num1)
// END