TIL 14일차
이벤트 작성하는 방법
기존 작성법
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 및 정보 전송) 서버
서버와의 통신
- url 요청
- DNS확인
- socket 열고
- 3-wayhandshake
- 데이터(html,css,js)받아오기
더 구체적인것은 이곳을 참조
Author And Source
이 문제에 관하여(TIL 14일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@khw970421/TIL-14일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)