HYEJIN's

Spring - DAO, DTO, VO 개념 정리

hyejin_dev — Tue, 18 Oct 2022 12:54:10 +0900

DAO

DAO(Data Access Object) 는 데이터베이스의 data에 접근하기 위한 객체
DataBase에 접근 하기 위한 로직 & 비지니스 로직을 분리하기 위해 사용

DTO

DTO(Data Transfer Object) 는 계층 간 데이터 교환을 하기 위해 사용하는 객체로,
DTO는 로직을 가지지 않는 순수한 데이터 객체 (getter & setter 만 가진 클래스)
유저가 입력한 데이터를 DB에 넣는 과정
1. 유저가 자신의 브라우저에서 데이터를 입력하여 form에 있는 데이터를 DTO에 넣어서 전송
2. 해당 DTO를 받은 서버가 DAO를 이용하여 데이터베이스로 데이터를 집어넣음

VO

VO(Value Object) 값 오브젝트로써 값을 위해 쓰임
read-Only 특징(사용하는 도중에 변경 불가능하며 오직 읽기만 가능)을 가짐
DTO와 유사하지만 DTO는 setter를 가지고 있어 값이 변할 수 있음

Vanilla JS 순수 바닐라 - jQuery를 Javascript로 !

hyejin_dev — Thu, 4 Aug 2022 23:27:28 +0900

바닐라 자바스크립트 Vanilla JS?

바닐라 자바스크립트(Vanilla JS)란 프레임워크 또는

라이브러리가 적용되지 않은 순수한 자바스크립트를 뜻한다.

1. 선택자

<div id="app"></div>
<div class="container"></div>

// jQuery
$("#app");
$(".container");

// Jacascript
document.getElementById("app");
document.querySelector("#app");

document.getElementsByClassName("container");
document.querySelector(".container");
document.querySelectorAll(".container");

jQuery
.siblings() : 형제 요소 중 지정한 선택자 모두 선택
.next() : 다음 형제 요소 모두 선택
.nextAll() : 다음 형제 요소 모두 선택
.nextUntil() : 형제 요소 중 지정한 선택자에 해당하는 요소 바로 이전까지의 요소 모두 선택
.prev() : 이전에 위치한 형제 요소 선택
.prevAll() : 이전에 위치한 형제 요소 모두 선택
.prevUntil() : 형제 요소 중 지정한 선택자에 해당하는 요소 바로 다음까지의 요소 모두 선택

Javascript
parentNode : 부모 노드
childNodes : 자식 노드 리스트
firstChild : 첫 번째 자식 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드

2. data 속성 값

<div data-user-name="Vanilla">Hello</div>

// jQuery
$("div").data("user-name");

// Javascript
document.querySelector("div").dataset.userName;

3. Event

// jQuery
$(function() {

});

// Javascript
document.addEventListener("DOMContentLoaded", () => {

});

// jQuery
$(".btn").off().on("click", e => {

});

// Javascript
document.querySelector(".btn").addEventListener("click", e => {

});

// 다른곳에서 이벤트 방출(emit) - 똑같이 click();
$(".btn").click(); 
document.querySelector(".btn").click();

4. 배열

// jQuery
$("li").each( (idx, item) => {

});

// Javascript
Array.from(document.querySelectorAll("li")).forEach( (inx, item) => {

});

5. 비동기 요청

// jQuery
$.ajax({
    url: "./test.jsp",
    type: "GET",
    cache: false,
    dataType: "json",
    data: "",
    success: function(data){

    },
    error: function (request, status, error){        

    }
});


// Javascript
const req = new XMLHttpRequest();
req.open("GET", "/resource", true);
req.onreadystatechange = () => {
  if (req.readyState == 4) { 
        if (req.status == 200 || req.status == 201){
            console.log('success');
        }
        else {
            console.log('fail');
        }                    
    }
}
req.send(null);

// req.setRequestHeader("Content-Type", "application/json");            
// req.send(JSON.stringify(jsonData));

카페24 - 변수 수정하기(고급 활용법) | 모디파이어 꿀팁

hyejin_dev — Thu, 4 Aug 2022 20:45:12 +0900

모디파이어란?

변수들의 데이터 형태를 다양화하기 위해 여러 형태의 모디파이어를 제공합니다.
디자인 편집창에서 변수의 "}" 전에 | (shift + ￦) 를 사용하면 모디파이어 목록이 나옵니다.

1. cut

문자열을 표현할 개수만큼 잘라서 출력

{$product_name|cut:10,...}

3. Date

날짜변환

{$write_date|date:Y-m-d}
{$foo|date:Y-m-d H:i:s}

// |date:년-월-일 시간:분:초

4. Numberformat

상품 판매가에 천단위 콤마를 사용

{$product_price|numberformat}

5. Replace

문자열을 치환

{$foo|replace:a,b}
{$notice_icon|replace:공지,공지사항}

React 완벽정리 (react란? 장점, 단점 등)

hyejin_dev — Wed, 3 Aug 2022 21:11:39 +0900

1. React?

React는 페이스북에서 개발한 유저인터페이스 라이브러리로서 개발자로 하여금 재사용 가능한 UI를 생성 할 수 있게 해줍니다.
이 라이브러리는 현재 페이스북, 인스타그램, 야후, 넷플릭스를 포함한 많은 큰 서비스에서 사용되고 있습니다.

이 라이브러리는 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링합니다. 따라서, 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해줍니다.

1-2. React-native?

모바일 웹을 만들도록 도와주는 library

2. Virtual DOM은 어떻게 작동하지?

데이터가 업데이트되면, 전체 UI 를 Virtual DOM 에 리렌더링 합니다.
이전 Virtual DOM 에 있던 내용과 현재의 내용을 비교합니다.
바뀐 부분만 실제 DOM 에 적용이 됩니다.

무조건 위의 3가지가 처리 되는것이 아니라 개발하는것에 따라 무조건 전체 렌더링 할 수도 있음
실제 DOM을 처리하는 건 비용이 많이 들고 느림
처리해야할 데이터가 많아지면 더 많은 부담이 되는 것을 줄여줌

3. 특징

JSX - JSX는 JavaScript의 Syntax 확장입니다. JSX를 사용하는것이 필수는 아니지만, 사용하는것이 권장됩니다.
Components - React는 전부 Component에 대한 것 입니다. React 개발을 할땐 모든것을 Component로서 생각해야 합니다.
단일방향 (Unidirectional) 데이터 흐름 & Flux - React에선 데이터가 단일방향으로만 흐릅니다. 데이터 흐름을 단방향으로 제한함으로서 데이터를 추적하기 쉽고 디버깅을 쉽게 해줍니다. Flux는 데이터가 단일방향으로 흐르는것을 유지해주는 패턴입니다. ( Flux에 대해선 나중에 자세히 알아보겠습니다. )

4. 장점

React는 JavaScript 객체 형태의 Virtual DOM 을 사용하여 어플리케이션의 성능을 향상시킴 (JavaScript Virtual DOM 처리가 실제 DOM 보다 빠르기 때문)
서버 & 클라이언트 사이드 렌더링 지원을 통해 브라우저측의 초기 렌더링 딜레이를 줄이고, SEO 호환도 가능해짐
Component 의 가독성이 매우 높고 간단하여 쉬운 유지보수, 간편한 UI 수정 및 재사용 용이
React는 프레임워크가 아닌 라이브러리기 때문에 다른 프레임워크와 혼용 가능

5. 단점

VIEW ONLY , VIEW 이외의 기능은 써드파티 라이브러리(Third party library, =패키지, 모듈로 불리기도함)를 이용하거나 직접 구현해야함
IE8 이하 지원하지 않음 (IE8 이하 버전을 지원해야 할 경우 v0.14 버전을 사용 해야함)
React는 inline-template 과 JSX 를 사용하는데, 일부 개발자들에게는 적응이 안 될 수 있음

7. Babel

2015년에 업데이된 ES6를 사용할 때, 이전 문법인 ES5로 변환해주는 변환장치(Preprocessor) 최신버전의 크롬이나 파이어폭스는 지원하지만, 구 버전의 브라우저나 IE를 위해 변환함

Hello World

import React from 'react';    // var React = require('react');  와 동일  

function HelloWorld (props) {   
    return ( <h1>Hello {props.name}!</h1> ); 
}  

export default HelloWorld;

webpack 이라는 도구를 사용하여 마치 Node.js 에서 require 하는것과 같이 모듈을 불러올 수 있게 하는 것!

용어정리

번들링(bundling) : webpack 은 이렇게 import(혹은 require) 한 모듈들을 불러와서 한 파일로 합치는 작업
프롭스(props) : 변수

React - Lifeycle API class/hooks 알아보기

hyejin_dev — Fri, 16 Aug 2019 10:51:56 +0900

LifeCycle API (class)

eact의 컴포너트는 생명주기(Life cycle)을 가진다. 생명주기란 컴포넌트가 생성되고 사용되고 소멸될 때 까지 일련의 과정을 말한다.
이러한 생명주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다.

클래스의 경우 -> constructor -> render -> ref -> componentDidMount
setState/props 바뀔때 - shouldComponentUpdate -> (true) -> render -> componentDidUpdate
부모가 나를 없앴을 때 - componentWillUnmount -> 소멸

class Test extends Component {
  state = { };

  // 컴포넌트가 첫 렌더링 된 후, 비동기 요청을 많이함
  componentDidMount(){

  }

  // props 또는 state가 변경되었을 때, 재랜더링 여부를 return 값으로 결정함 , 컴포넌트 업데이트 직전에 호출
  shouldComponentUpdate(nextProps, nextState, nextContext) {
      return true;
  }

  // 리렌더링 후
  componentDidUpdate(){

  }

  // 컴render() { 
        return (  );
    }을 없앴을때), 비동기 요청 정리를 많이함
  componentWillUnmount(){

  }

  render() { 
      return (  );
  }

}

export default Test;

shouldComponentUpdate(nextProps, nextState, nextContext)

: 구성요소를 업데이트해야 합니까?

컴포넌트 업데이트 직전에 호출되는 메소드
props 또는 state가 변경되었을 때, 재랜더링 여부를 return 값으로 결정함

ComponentDidMount()

: 구성요소가 탑재됨

컴포넌트가 맨 처음 DOM에 redering된 후 호출되는 메소드
setState()를 해도 이 부분은 다시 render 되지 않는다

// 외부 라이브러리 연동: D3, masonry, etc
// 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc
// DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등

componentWillMount()

: 구성 요소가 탑재됩니다

React 엘리먼트를 실제 DOM 노드에 추가하기 직전에 호출되는 메소드
DOM이 생성되지 않았으므로 DOM을 조작할 수 없다
render가 호출되기 전이기 때문에 setState를 사용해도 render가 호출하지 않음
현재 사용 거의 안함 / v16.3 이후부터는 UNSAFE_componentWillMount() 라는 이름으로 사용

LifeCycle API (hooks)

useEffect 는 여러번 사용이 가능하다 (다른 효과를 주고싶을 때)
[] 안에 여러게 사용도 가능하다 ex) [imgCoord, result, score]
배열에는 꼭 useEfect를 다시 실행할 값만 넣기!

// class
componentDIdMount() {
  this.setState({
    imgCoord: 3,
    score: 1,
    result: 2,
  })
}

// hooks
userEffect( () => {
  setImgCoord();
  setScore();
}, [imgCoord, score]);

userEffect( () => {
    setResult();
}, [result]);

// componentDidMount, componentDidUpdate (1대1 대응은 아님)
useEffect( () => {
  interval.current = setInterval(changeHand, 100);

  return () => { // componentWillUnmount 역할
      clearInterval(interval.current);
  }
}, [imgCoord]);

// [] 안에 아무것도 적지않으면 처음 한번만 실행하고 실행하지않겠따!
// [] 안에 값이 바뀔때마다 실행됨!

React 공식문서 - State and Lifecycle

Node로의 접근 완벽 정리! (parentNode,nextSibling...nodeType)

hyejin_dev — Wed, 20 Mar 2019 10:12:54 +0900

Node로의 접근

HTML 문서에서 HTML DOM 노드에 접근하는 방법 2가지

getElementsByTagName() 메소드를 이용하는 방법
노드 간의 관계를 이용하여 접근하는 방법

parentNode : 부모 노드
childNodes : 자식 노드 리스트
firstChild : 첫 번째 자식 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드

nodeName (노드 고유의 이름을 저장하므로, 수정할 수 없는 읽기 전용 프로퍼티)

// HTML 문서의 모든 자식 노드 중에서 두 번째 노드의 이름을 선택함.
document.getElementById("document").innerHTML = document.childNodes[1].nodeName;           // HTML
 
// html 노드의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택함.
document.getElementById("html").innerHTML = document.childNodes[1].childNodes[0].nodeName; // HEAD

nodeValue

// "#heading"인 요소의 첫 번째 자식 노드의 노드값을 선택함.
var headingText = document.getElementById("heading").firstChild.nodeValue;

document.getElementById("text1").innerHTML = headingText;
document.getElementById("text1").firstChild.nodeValue = headingText;

nodeType (노드 고유의 이름을 저장하므로, 수정할 수 없는 읽기 전용 프로퍼티)

// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 타입을 선택함.

var headingType = document.getElementById("heading").firstChild.nodeType; 

document.getElementById("head").innerHTML = headingType;           // 3
document.getElementById("document").innerHTML = document.nodeType; // 9

노드 → 프로퍼티 값
요소 노드(element node) → 1
속성 노드(attribute node) → 2
텍스트 노드(text node) → 3
주석 노드(comment node) → 8
문서 노드(document node) → 9

빈 텍스트 노드의 처리

현재 대부분의 주요 웹 브라우저는 모두 W3C DOM 모델을 지원하지만, 그 처리 방식에 있어 약간씩의 차이가 있다. 가장 큰 차이점은 띄어쓰기와 줄 바꿈을 처리하는 방식이다.

파이어폭스나 기타 브라우저들은 띄어쓰기나 줄 바꿈을 텍스트 노드(text node)로 취급한다.

하지만 익스플로러는 띄어쓰기나 줄 바꿈을 텍스트 노드로 취급하지 않는다.

따라서 자식 노드나 형제 노드를 이용하여 원하는 노드에 접근하려고 하면 브라우저 간에 차이가 발생하게 된다.
이 차이를 없애는 가장 손쉬운 방법은 nodeType 프로퍼티를 사용하여 선택된 요소의 타입을 검사하는 것이다.

var lastNode;

function findLastChild(parentNode) {

    lastNode = parentNode.lastChild;

    while (lastNode.nodeType != 1) {
        lastNode = lastNode.previousSibling;
    }

}

function printLastChild() {
    var parentNode = document.getElementById("parentNode");

    findLastChild(parentNode);
    document.getElementById("nodename").innerHTML = lastNode.nodeName;
}

위의 예제에서 마지막 자식 노드를 찾은 후에, 찾은 노드의 타입이 요소 노드가 아니면 그 앞의 노드를 다시 검사한다.
이 방식을 사용하면 모든 브라우저에서 마지막 자식 노드로 같은 요소 노드를 선택할 수 있게 된다.

ES6 Template처리 및 Taggd Template literals 알아보기

hyejin_dev — Tue, 26 Feb 2019 11:36:35 +0900

Template 처리

ES6에서 문자열 처리를 보다 간편하게 할 수 있는 템플릿을 제공한다.
Template literal을 사용하여 거추장스러운 '+' 이나 '\n'을 더이상 사용하지 않아도 된다.
${ } 안에는 변수 또는 연산식 등의 표현식이 들어갈 수 있다.

let name = "HYEJIN";
// 1 왼쪽에 있는 `
let grettingTemplate = `
    Hi, ${name}!
    Have a nice day!
`; 
console.log(grettingTemplate);
// 결과
// Hi, HYEJIN!
// Have a nice day!

Tagged Template literals

간단한 기본 예제

let name = "HYEJIN";
let num = "010-1234-1234";
console.log(`hi, ${name}! Have a nice day! ${num} is your number`);
// 결과 : hi, HYEJIN! Have a nice day! 010-1234-1234 is your number

tagged template을 사용하여 text와 value로 분리할 수 있다.
text는 공백 문자를 기준으로 배열의 형태로 파라미터가 들어오며,
${ } 안의 표현식은 value라는 파라미터로 String type으로 들어온다.

배열관련 응용된 예제

const data = [
  {
    name: 'COFFEE',
    order: true,
    items: ['americano', ' latte']
  },
  {
    name: 'CAFE',
    order: false,
  },
  {
    name: 'HYEJIN',
    order: true,
    items: ['americano', ' milk', ' green-tea']
  }
]

function fn(tags, name, items){
//   console.log(tags);
  if(typeof items === "undefined"){
    items = "<span style='color: red; margin-top: -20px;'>주문 가능한 상품이 없습니다.</span>";
  }
  return (tags[0] + name + tags[1] + items + tags[2]);
}

data.forEach((valueee) => {
 let template = fn`<h2 style='margin-top: 80px;'>Welcome Come  ${valueee.name} !</h2>
  <h3>주문가능항목 : <span style='font-size: 14px;'>${valueee.items}</span></h2>`;
  document.body.innerHTML += template;
});

// 결과
// Welcome Come COFFEE !
// 주문가능항목 : americano, latte
// Welcome Come CAFE !
// 주문가능항목 : 주문 가능한 상품이 없습니다.
// Welcome Come HYEJIN !
// 주문가능항목 : americano, milk, green-tea

ES6 Map & WeakMap / 가비지 컬렉터 알아보기

hyejin_dev — Mon, 25 Feb 2019 16:25:02 +0900

Map & WeakMap 추가정보를 담은 객체저장하기

Array를 개선한 자료구조 : Set, WeakSet
Object를 개선한 자료구조 : Map, WeakMap

Map : key, value 구조이다.

let wm = new WeakMap();
let myfun = function(){};
// 이 함수가 얼마나 실행됐지? 를 알려고 할때.

wm.set(myfun, 0);

console.log(wm);  // WeakMap {ƒ => 0}

let count = 0;
for(let i=0; i<10; i++){
  count = wm.get(myfun); // get value
  count++;
  wm.set(myfun, count);
}

console.log(wm);  // WeakMap {ƒ => 10}

myfun = null;
console.log(wm.get(myfun)); // undefined
console.log(wm.has(myfun));  // false

WeakMap 클래스 인스턴스 변수 보호하기

WeakMap의 키는 오직 Object형 뿐이다.
키로 원시 데이터형은 허용되지 않는다. (가령 Symbol은 WeakMap 키가 될 수 없음)
다른 강한 키 참조가 없는 경우 모든 항목은 가비지 컬렉터에(하단 내용 참고) 의해 WeakMap에서 제거된다.
WeakMap : new, .has(), .get(), .set(), .delete() 만 지원
WeakSet : new, .has(), .add(), .delete() 만 지원
WeakSet에 저장되는 value, WeakMap에 저장되는 key는 반드시 객체여야 한다.

const wm = new WeakMap();  // 프라이빗한 변수 만들기1


function Area(width, height){
  wm.set(this, {width, height});  // 프라이빗한 변수 만들기2
}

Area.prototype.getArea = function(){
  const {width, height} = wm.get(this);
  return width * height;
}

let myarea = new Area(20,10);
console.log(myarea.getArea()); // 200
console.log(myarea.height); // undefined , 외부에서 접근 불가
myarea = null;

console.log(wm.has(myarea));  // false

1. 메모리의 생명주기

[ 메모리 할당 ]
프로그램이 사용할 수 있도록 운영체제가 메모리를 할당하는 단계
저수준의 언어는 이를 개발자가 명시적으로 처리해줍니다.
고수준의 언어는 개발자가 이를 신경쓰지 않아도 됩니다.

[ 메모리 사용 ]
할당된 메모리를 실제로 프로그램이 사용하는 단계
개발자가 필요에 따라 읽기와 쓰기 작업을 진행합니다.

[ 메모리 해제 ]
프로그램에서 필요하지 않은 메모리를 전체를 되돌려 주어 다시 사용하게 만드는 단계
메모리 할당 작업과 마찬 가지로 저수준은 이를 명시합니다.

var n = 374; // 숫자에 대한 메모리 할당
var s = 'sessionstack'; // 문자에 대한 메모리 할당
var o = { a: 1, b: null }; // 객체 및 그 값에 대한 메모리 할당
var a = [1, null, 'str']; // (객체와 같음) 배열과 그 값에 대한 메모리 할당
function f(a) { return a + 3; } // 함수에 대한 할당 - 함수는 호출할 수 있는 객체
someElement.addEventListener('click', function() { // 함수 표현식 또한 객체를 할당
  someElement.style.backgroundColor = 'blue';
}, false);

변수와 함수를 선언하고 함수의 표현식을 이용하는 것이 전부 메모리를 할당하는 과정이다.

2. 가비지 컬렉션

사용이 완료된 메모리를 정리하는 것

3. 가비지 컬렉터 (Garbage Collector)

프로그래머가 동적으로 할당한 메모리 중 더 이상 사용하지 않는 영역을 자동으로 찾아내어 해제해주는 것

프로그래밍을 하기가 훨씬 쉬워짐
메모리에 관련된 버그가 발생할 확률도 낮아짐

가비지 콜렉션 알고리즘의 핵심 개념은 참조 이다.

// 기본
function Area(height, width){
  this.height = height;
  this.width = width;
}

Area.prototype.getArea = function(){
  return this.height * this.width;
}

let myarea = new Area(10,20);
console.log(myarea.getArea());  // 200
console.log(myarea.height);  // 10

// WeakMap 활용   
const wm2 = new WeakMap();  // 프라이빗한 변수 만들기1

function Area2(height, width){
  wm2.set(this, {width, height});  // 프라이빗한 변수 만들기2
}

Area2.prototype.getArea = function(){
  const {width, height} = wm2.get(this);
  return width * height;
}

let myarea2 = new Area2(10,20);
console.log(myarea2.getArea()); // 200
console.log(myarea2.height); // undefined , 외부에서 접근 불가

ES6 Set & WeakSet 알아보기

hyejin_dev — Mon, 25 Feb 2019 14:02:12 +0900

Set으로 유니크한 배열 만들기

set : 중복 없이 유일한 값을 저장하려고 할때 사용한다.
이미 존재하는지 체크할 때 유용하다.

let mySet = new Set();
// console.log(toString.call(mySet));

mySet.add("중복");
mySet.add("hyejin");
mySet.add("중복");
mySet.add("abcd");
mySet.add("중복");

console.log(mySet.has('중복')); // true

mySet.forEach(function(v){
  console.log(v) // 중복,  hyejin, abcd
});

mySet.delete('중복');

mySet.forEach(function(v){
  console.log(v) // hyejin, abcd
});

WeakSet 으로 효과적으로 객체타입저장하기

WeakSet : 참조를 가지고 있는 객체만 저장이 가능하다. (변수, 함수)
객체형태를 중복없이 저장하려고 할때 유용하다.

let arr = [1,2,3,4];
let arr2 = [5,6,7,8];
let obj = {arr, arr2};

let ws = new WeakSet();

/* 
ws.add(arr); // 변수
ws.add(function(){}); // 함수

아래 3개는 오류 : Invalid value used in weak set
ws.add(111);  // 숫자
ws.add("111"); // 문자
ws.add(null);
*/

ws.add(arr);
ws.add(arr2);
ws.add(obj);

arr = null; // 이것때문에 아래 false가 나옴

console.log(ws);
console.log(ws.has(arr)+ ', '+ws.has(arr2));  // false, true

ES6 Destructuring Array, Object, JSON, event 알아보기

hyejin_dev — Mon, 25 Feb 2019 13:24:49 +0900

Destructuring Array

배열 및 객체에서 원하는 정보만을 뽑아내는 새로운 방법이다.
이 방법을 쓰면 index 번호를 굳이 지정하지 않아도 된다.

const data = [1, 2, 3, 4];
const [d1, d2, d3] = data; // 할당 연산자 왼쪽에 배열 형태의 변수 리스트가 필요하다.  
console.log(d1, d2, d3); // 1 2 3

[선언할변수명, …] 처럼 배열 인덱스 대신 배열 인덱스에 해당하는 위치에 변수명을 넣어서 사용
왼쪽의 변수 리스트와 오른쪽의 배열은 배열의 인덱스를 기준으로 할당된다.

const today = new Date();
const formattedDate = today.toISOString().substring(0, 10);
const [year, month, day] = formattedDate.split('-');
console.log([year, month, day]); // [ '2019', '02', '25' ]

배열에서 필요한 요소만 추출하여 변수에 할당하고 싶은 경우에 유용하다

Destructuring Object

let obj = {
    name: 'hyejin',
    address: 'Korea',
    age: 10
}

let {name, age} = obj;
console.log(name, age); // 결과 hyejin, 10

// 변수명 다르게 줄때
let {name: myName, age: myAge} = obj;
console.log(myName, myAge); // 결과 hyejin, 10

let {프로퍼티명, …} = 객체 : 각각의 프로퍼티가 변수로 추출된다.

{프로퍼티명:지정할변수명, …} : 변수명 다르게 줄때

const todos = [
  { id: 1, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: false },
  { id: 3, content: 'JS', completed: false }
];

// todos 배열의 요소인 객체로부터 completed 프로퍼티만을 추출한다.
const completedTodos = todos.filter(({ completed }) => completed);


console.log(completedTodos); 
// 결과 [ { id: 1, content: 'HTML', completed: true } ]

Destructuring 활용 JSON파싱

let jsonData = [
  {
    title: "첫 번째 입니다",
    author: "1. Hyejin",
    category: { aaa : "1. Javascript"}, // 중첩 객체
    publishDate: "2019-02-25"
  }
  ,{
    title: "두 번째 입니다.",
    author: "2. Hyejin",
    category: { aaa : "2. Javascript"}, // 중첩 객체
    publishDate: "2019-02-26"
  }
]

let [{title: aTitle, author: aAuthor}] = jsonData
console.log(aTitle, aAuthor); // 첫 번째 입니다 , 1. Hyejin

let [, {title: bTitle, author: bAuthor}] = jsonData
console.log(bTitle, bAuthor); // 두 번째 입니다 , 2. Hyejin


// 중첩 객체의 경우 : 2개 모두 불러올 경우
const [p1, p2] = jsonData;
console.log(p1.category.aaa+ ', ' + p2.category.aaa); 
//1. Javascript, 2. Javascript

Destructuring 활용 _Event객체전달

<div>JavaScript</div>

document.querySelector("div").addEventListener("click", function({type, target}){
  console.log(type+ ', '+target.tagName);
}); // 결과 click, DIV