TIL 14일차

KHW·2021년 8월 24일

목록 보기

13/39

이벤트 작성하는 방법

기존 작성법

querySelectorAll로 li태그를 전부 받아서 전부 핸들러를 거는 것
=> 매번 핸들러를 전부 각각 설정해야해서 좋은 방법은 아니다.

$DomAll.querySelectorAll('li').forEach($dom=>{
  $dom.addEventListener('click',(e)=>{
    li관련 함수 실행
  })
})

새로운 방법

li를 묶는 전체에 이벤트를 걸고 해당 이벤트 클릭시 e.target의 className (class)를 확인하여 만약 li에서 가지고 있는 클래스라면 어떤 코드가 실행 되게 만드는 방식이다.

$Dom.addEventListener('click',(e)=>{
    const $li = e.target.closest('li')
    if($li){
      if(e.target.className === 'reject'){
        reject 관련 함수실행
      }
      else {
        그외 관련 함수 실행
      }
    }
  })

함수 매개변수를 undefined 처리하지 않게하기

매개변수에 = 초기값 설정을 한다.

function a(name,age){
    console.log(name,age)
}
a('msk') 	// 'msk' undefined

function a(name,age=15){
    console.log(name,age)
}
a('msk') 	// 'msk' 15

전개구문사용

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj1ToObj2 = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }


var mergedObj2ToObj1 = { ...obj2, ...obj1 };
// Object { foo: "bar", x: 42, y: 13 }

obj1에서 foo와 obj2에서 foo가 합쳐지면 마지막 대상을 기준으로 바뀌게 된다.
순서가 반대면 결과도 마찬가지로 반대다

낙관적 업데이트

서버에 값을 전송할때 해당 값을 브라우저에서 바로 볼 수 있게 하려면 전송하고 처리가 끝난 후 받아 값을 처리하는 것이 아닌 서버보다 먼저 브라우저에 낙관적으로 데이터를 눈에 먼저 보여주는 방법이다.

주의 : 결제 시스템 같은 경우는 이를 사용하지않는 것이 낫다

네트워크

OSI vs TCP/IP

TCP / IP는 클라이언트 - 서버 모델입니다. 즉, 클라이언트가 서비스를 요청하면 서버가 제공합니다. 반면 OSI는 개념 모델

TCP / IP는 인터넷을 포함한 모든 네트워크에 사용되는 표준 프로토콜이지만 OSI는 프로토콜이 아니라 시스템 아키텍처를 이해하고 설계하는 데 사용되는 참조 모델

우리가 서버로 사용하는 것은 TCP/IP 형태이다.

3-way-handShake

TCP/IP로 통신전에 서버와 미리 3번의 확인을 서로 확인하는 것으로 이를 통해 신뢰성을 확보하고 그 후 정보를 제공받는다.
클라이언트 (syn)-> 서버
클라이언트 <-(syn+ack) 서버
클라이언트 (ack)-> 서버
클라이언트 <-(관련 html 및 정보 전송) 서버