SPA 예제

8.13(화)

0. 함수생성3가지

0-1. 함수선언식

function add(a, b) {
    return a + b;
}

// 함수 호출
console.log(add(5, 3));

👉 호이스팅 가능

---

0-2. 함수표현식

const multiply = function(a, b) {
    return a * b;
};

// 함수 호출
console.log(multiply(4, 2))

👉 호이스팅 불가능

---

0-3. 화살표함수 표현식

const subtract = (a, b) => a - b;

// 함수 호출
console.log(subtract(7, 2)); 

---

1. 축약형 표현

📌 공통코드

const name : '홍길동'
const age : 16

📌 기본코드

const obj = {
name: name,
age: age
}

📌 축약코드

const obj2 = {name,obj}

---

2. 화살표(람다)함수생성 / 구조분해할당

const print = (param) => {
        const name = param.name
        const age = param.age
        console.log(name,age)
    }

    const obj2 = {name:'이순신',age:20}
    print(obj2)

👉 함수생성 방법3가지중 화살표를 이용한 함수생성 방법
👉 print라는 함수는 param이라는 파라미터를 한개 받는다
👉 obj2의 name과 age가 함수내부의 param.name, param.age로 들어가서 name age의 객체가 생성된다.

---

const print = ({name,age}) => {
        console.log(name,age)
    }

    const obj2 = {name:'이순신',age:20}
    print(obj2)

👉 param의 값을 없애고 다이렉트로 name,age를 파라미터로 받는 방법.
👉 구조분해할당

---

3. 객체리터럴이란

//객체리터럴 생성
const person = {
    name: '이순신',
    age: 20,
    city: '서울'
};

// 구조 분해 할당
const { name, age } = person;

console.log(name); // 이순신
console.log(age);  // 20

---

4. 동적프로퍼티 계산기

const calcaulator = {} // 빈 객체생성
calcaulator.add = (a,b) => a+b // add메서드를 객체에 추가
calcaulator.sub = (a,b) => a-b // sub메서드를 객체에 추가


const oper = prompt('JOB') // job이라는 문구에 입력창 생성
const a = parseInt(prompt('A')) // a라는 문구에 입력창 생성하여 숫자로 변경
const b = parseInt(prompt('B')) // b라는 문구에 입력창 생성하여 숫자로 변경

console.log(calcaulator[oper](a,b))

---

5. querySelector / querySelectorAll

5-1. querySelector

<h1 id="target">AAA</h1>
<script>
    const target = document.querySelector('#target')
    //브라우저의 값을 변경하기위해서 ID값을 target로 사용하는 브라우저의 객체를 가져오기 위해 
   //document.querySelector를 사용한다.

    console.dir(target)

    target.innerHTML = 'BBBB'
</script>

👉 querySelector는 단일요소를 반환한다
👉 h1에 target이라는 이름의 id를 정해주고, script태그내에 document.querySelector('#target')을 작성.
👉 이는 id를 target이라는 이름을 가진 브라우저 객체에 대한 정보를 const target이라는 변수에 넣는다.
👉 console.dir(target)을 해보면 h1#target 이라는 값과 아래에 h1에 대한 property가 나온다.
👉 즉, h1의 내부구조를 볼 수 있다는 말. 그러면 내부구조를 가져와서 변경이 가능하다는것인데, 그것이 target.innerHTML = 'BBBB'이다.

---

5-2. h1의 내부구조

<h1 id="target">AAA</h1>
    id: "target"
    innerHTML: "AAA"
    localName: "h1"
    nodeName: "H1"
    nodeType: 1
    tagName: "H1"
    ...

---

5-3. querySelectorAll

<ul>
    <li>1</li>
</ul>
<script>
    const arr = document.querySelectorAll("li")
    
    console.dir(arr)

</script>

👉 querySelectorAll은 배열요소를 반환한다.
👉 반환값으로 nodeList를 반환한다.

---

6. 리플로우 / 리페인트

📌 우선 브라우저가 어떻게 DOM(HTML 구조)이 변경된 것을 알 수 있는지 알아야한다.

<script>
    const menuUL = document.querySelector('.menuUL')
    console.log(menuUL)

    const m1 = document.createElement('li')
    m1.textContent = '아메리카노'
    menuUL.appendChild(m1)
</script>

👉 해당코드는 ul 태그를 querySelector를 통해서 객체의 정보를 가져오고, createElement('li')를 통해서 동적으로 li의 요소를 추가하는 코드이다.
👉 여기서 document.createElement 를 통해 DOM이 업데이트 되는데, 이러한 추가하는 방법을 통해서 DOM이 업데이트되어 리페인트 작업이 발생하여 브라우저에 즉시 전달된다.

6-1. 리플로우

👉 브라우저가 페이지의 레이아웃을 계산하는 과정
👉 요소의 추가, 삭제, 크기 변경 등으로 인해 페이지의 레이아웃이 변경되면 브라우저는 리플로우를 수행
👉 width, height, margin, padding, border 해당 내역들이 변경되거나 추가될때 발생함.

6-2. 리페인트

👉 리페인트는 브라우저가 페이지의 시각적인 부분을 다시 그리는 과정
👉 background-color, color 등의 색상과 관련된 내용이 변경되면 발생함.

📌 리플로우 및 리페인트를 자주 진행할수록 지웠다 그렸다를 반복하는것 이기 때문에 포퍼먼스가 떨어질수 밖에 없다.

---

7. classList.toggle

	<style>
      .show{
        display: block;
    }
    </style>  


    <div class="box b1 show">
        <h1>메뉴</h1>
    </div>

<script>
    const target = document.querySelector('.b1')
    setTimeout(()=> {
        target.classList.toggle('show')
    },2000)

</script>

👉 우선 b1이라는 이름을 가진 클래스에 대한 객체의 정보를 target이라는 변수에 넣는다.
👉 b1이라는 애는 div 감싸져있는 메뉴임.
👉 setTimeOut은 2초뒤에 내부에 있는 함수를 실행하겠다 라는 말.
👉 내부의 classList.toggle('show')는 show라는 클래스가 있다면 제거, 없다면 생성해주는 역할임.
👉 예제로 classList.add('show')는 추가해주는역할, classList.remove('show')는 제거해주는 역할임.
📌 현재 b1은 show라는 블럭의 형태를 가지는 클래스를 가지고있지만, 2초뒤에는 show클래스가 없어지면서 형태가 사라지게된다. div class="box b1 show" 👉 div class="box b1"

---

8. SinglePageApplication(SPA) 키오스크 예제

8-1. style,html 태그

<style>
    .box{
        border:1px solid black;
        box-sizing: border-box;
        height: 50vh;
        width: 100vw;
        display: none;
    }
    .b1{
        background-color: orange;
    }
    .b2{
        background-color: darkgreen;
    }
    .show{
        display: block;
    }

</style>

<div class="container">
    <div class="menu">
        <ul>
            <li onclick="showMenu('b1')">메뉴</li>
            <li onclick="showMenu('b2')">장바구니</li>
        </ul>
    </div>

    <div class="box b1 show">
        <h1>메뉴</h1>
    </div>

    <div class="box b2">
        <h1>장바구니</h1>
    </div>
</div>

---

8-2. showMenu

<script>

    const b1 = document.querySelector('.b1')
    // b1클래스에 대한 정보(div)를 b1변수에 할당한다.
    // querySelector를 자주하면 포퍼먼스를 많이 떨어트리므로 자주 검색하지 않게 변수로 빼놓기.
    const b2 = document.querySelector('.b2')
	// b2클래스에 대한 정보(div)를 b2변수에 할당한다.
  
  	const cart = []
  	// 내용물을 담는 카트 배열생성
  
    function showMenu(target){ // target이라는 파라미터로 받고 b1||b2가 들어올 예정
        document.querySelectorAll('.box').forEach(box =>{
  	// 모든 박스클래스에 대한 정보를 가져와야하기 때문에 all을 사용한다.
            box.classList.remove('show')
  	// forEach문을 통해 모든 box들이 가지고있는 정보를 하나씩 보면서 show라는 클래스를 삭제한다.
        })
        document.querySelector(`.${target}`).classList.add('show')
  	// onclick을 하면 target에 대한 클래스가 들어오니까 그 클래스에다가 show를 추가해준다.
    }

</script>

👉 코드의 동작은 모든 box의 show를 다 꺼둔다음 html에서 onclick을 통해 선택된 클래스(b1 || b2)가 showMenu의 파라미터값으로 들어와서 해당 클래스에 show를 추가해주는 기능.
📌 querySelector를 자주하면 포퍼먼스를 많이 떨어트리므로 자주 검색하지 않게 변수로 빼놓기.

---

8-3. makeMenu

 function makeMenu(){
        let str = '<ul>' // ul태그로 시작해서

        for(let i = 0; i<10; i++){
              str += `<li data-name="Menu${i}" data-pno="${i}" data-price="${i*1000}">Menu ${i}</li>` 
              // 백틱 사용해서 str에 중첩된 문자열을 만들기
              // 일일이 수동으로 해당하는 값들을 집어넣는것이 아닌 
              // 사용자 정의 데이터 속성으로 data-xxx=""를 사용하면 된다.
        }

        str += '</ul>' // ul태그로 종료된다.
        b1.innerHTML = str // 위에서 만들어놓은 str이라는 문장들을 동적으로 b1의 innerHTML에 추가해주는것.
    }
    makeMenu() // 메뉴 호출해서 추가하기

👉 b1(메뉴)에 10가지의 메뉴를 추가하는 함수

---

8-4. b1의 ul 이벤트 처리함수

b1.querySelector('ul').addEventListener('click',e=>{ 
  // b1에 대한 document는 위에 진행했으니 제외하고
  // ul태그의 정보를 찾고, 클릭을 하면 내부 함수 실행
        const target = e.target
        // 클릭된 요소를 가져온다.
        const name = target.dataset.name
        // data-name 속성 값을 가져옴
        const pno = target.dataset.pno
        const price = target.dataset.price
  

        const obj = {name,pno,price}
        //obj에 속성값들을 넣어 obj라는 객체를 생성
        console.log(obj)
  
  		target.remove()
  		//클릭한 요소들을 삭제하는기능
  
  		cart.push(obj) // 카트에 내용물 담기
  		showCart() // 함수 실행해주기
        showMenu('b2') // 카트에 내용물을 담으면 장바구니 자동으로 보여주기


    },false)

📌 이벤트 처리함수를 사용해야하는 이유
1. 기존의 html내부에 <.li onclick>과 같이 사용을 했었는데, 이러한 방법은 html의 순수함을 해치기 때문에 사용하지 않아야함.
2. onclick 때문에 한가지의 행동밖에 할 수 없음.

📌 이벤트 처리함수의 가장 첫번째 파라미터는 e(event)가 들어가야함.

📌 이벤트 처리함수의 생성위치는 예를들어, b1클래스의 ul태그에 대한 클릭성 이벤트를 생성하고 싶다면, b1클래스의 ul태그 생성 이후 아래에 이벤트처리함수 코드가 작성되어야 한다.

📌 이벤트 처리함수중에 어떤태그를 처리할지 선택(ul처럼)하는데 한가지만 선택해야 포퍼먼스가 떨어지지 않는다. 그리고 ul 아래 li태그가 있는것 처럼 li각각의 이벤트처리를 하면 포퍼먼스가 떨어지므로 ul태그 처럼 한개에 처리를 하는것을 권장한다.

📌 ul태그로 이벤트처리함수를 선택하더라도 실제로 li태그를 눌렀을때 target으로 설정이된다. 이는 맨처음 selector의 값이 타겟이 아니라, 진짜 이벤트를 발생시키는것이 타켓이다.

---

8-5. showCart

function showCart(){ // cart배열안에 있는 요소들을 li태그로 내보내는것
        let str = '<ul>'

        str += cart.map(({pno,name,price}) =>
            `<li>${pno} -- ${name} -- ${price}</li>`).join('')
        // item 하나하나가 li태그가 되어야하고, 문자열 하나가 되어 ul에 들어가야함. 
  		// join을 통해 문자열 하나로 결합
        // 하지만 여기서는 item을 사용하지 않고 다이렉트로 파라미터값 받음

        str += '<li><button class="clearBtn">CLEAR</button></li>'
        str += '</ul>'
        b2.innerHTML = str
    }

👉 b1에서 cart에 담았던 요소들을 b2에서 보여주는 기능

---

8-6. b2의 삭제버튼 이벤트처리함수

 b2.addEventListener('click', e=>{ // 삭제버튼 이벤트 처리함수, b2에 걸어놓은 이유는 
   								  // 맨 처음에는 clear버튼이 생성되어있지 않기 때문에 b2에 걸어놓음
        const target = e.target
        if(target.classList.contains('clearBtn')){ // b2에서 clearBtn이 있다면 아래 기능이 작동
            cart.length=0 // 배열의 내용을 다 없애버려서 지움
            showCart() // 지워진거 보여주기
        }
    },false)

---

9.bubbling / capturing

👉 버블링은 inner의 박스에서 outer의 박스로 나가는방향
👉 캡쳐링은 outer의 박스에서 inner의 박스로 들어가는방향

---

10. stopPropagation / preventDefault

👉 stopPropagation는 해당 코드의 동작을 막는것
👉 preventDefault는 해당 이벤트가 상위의 부모클래스로 전파되는것을 막는것

---

10-1 preventDefault 예시

<a class ="link" href="domEx.html">domEx</a>

<script>

    document.querySelector('.link').addEventListener('click', e=>{
        e.stopPropagation() // 이벤트 전파막기
        e.preventDefault() // 이벤트 동작막기
        console.log("link")
    })
</script>    

👉 해당코드는 a태그의 동작을 막기 위한 코드인데, a태그는 이벤트처리함수가 없어도 기본적으로 이벤트 처리함수의 기능이 내포되어있기 때문에 자동으로 처리되는것이다.

👉 a태그를 선택하게 되면 다른 브라우저로 이동하게 되는데, preventDefault를 통해서 a태그의 이벤트처리 기능을 막아버려 작동하지 않게 된다.

👉 stopPropagation / preventDefault 두가지는 거의 같이 사용된다.

📌 현재 개발하고있는 SPA에서는 하나의 페이지에서 진행되어야 하니까 A태그를 절대 사용할 수 없다. 그렇기 때문에 A태그 대신 Router를 사용해야한다.

📌 Router : 이때까지 만들었던, 메뉴를 누르면 메뉴 장바구니를 누르면 장바구니가 나오는것

---

10-2. stopPropagation 예시

<div class="outer">
    <div class="inner">
    </div>
</div>

document.querySelector('.inner').addEventListener('click', function(e){
        e.stopPropagation() //브라우저에서 클릭을 하더라도 outer인 부모요소에 도달되지 않는다.
        console.log('inner')
    },false) // false를 줘야 캡쳐링을 하지 않겠다는 의미가 포함됨.
    document.querySelector('.outer').addEventListener('click', function(e){
        console.log('outer')
    },false)

👉 div outer 내부에 inner가 있는 형태로 되어있으면 버블링 때문에 inner를 선택했을때 inner 선택 이후 outer클래스도 자동으로 선택된다.

👉 그렇게 되면 이벤트를 inner에 걸었을때 outer또한 처리가 되므로 부모클래스에 이벤트 처리의 전파를 방지하기 위해서 stopPropagation를 사용한다.

👉 addEventListener의 false는 캡쳐링을 하지 않겠다는 의미가 내포되어있으므로 false를 적는것을 권장한다.