2023.04.10 TIL

토깽이연구소 수석연구원·2023년 4월 10일

JavaScript TIL

TIL

목록 보기

6/37

오늘의 나는 무엇을 잘했을까?

컨디션이 회복되지 않았지만 더 이상 공부에 손을 놓고만 있을 수는 없어서 무리하지 않는 선에서 강의를 들었다. 가벼운 마음으로 가볍게 필기하며 들어서 최대한 컨디션에 영향이 가지 않게 하였다.

오늘의 나는 무엇을 배웠을까?

이벤트핸들러
- 이벤트리스너 등록: addEventListener
- 이벤트리스너 삭제: removeEventListener
  - 주의점: 등록 시 전달했던 핸들러함수를 그대로 전달해야 함. 등록 시 삭제를 해야한다면 외부 함수를 만들어서 파라미터로 전달해야함. removeEventListener는 addEventListener로 등록되었던 핸들러만 삭제할 수 있다.

이벤트 객체

이벤트객체: 이벤트에 대한 상세한 정보를 담고 있는 객체이다. 예를 들어 키보드 이벤트 객체라면 어떤 키를 눌렀는지 등의 정보를 담고 있다. 핸들러함수의 첫 번째 파라미터에 기본적으로 위치한다.

이벤트 객체 프로퍼티(공통)

프로퍼티	설명
type	이벤트 이름 ('click', 'mouseup', 'keydown' 등)
target	이벤트가 발생한 요소
currentTarget	이벤트 핸들러가 등록된 요소
timeStamp	이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초)
bubbles	버블링 단계인지를 판단하는 값

이벤트 버블링

특정 요소의 이벤트 핸들러가 호출되면, 해당 요소의 무보 요소의 이벤트 핸들러도 그 뒤를 따라 호출되게 되는 현상. 최상 요소인window객체까지 올라가는 것이 특징이다. 이벤트 버블링이 일어나도 이벤트 객체의 target 프로퍼티는 최초로 이벤트가 발생한 요소로 고정된다. 시작점을 담고 있는 것이다. 만약 이벤트핸들러를 등록한 대상에 접근하고 싶으면 currentTarget이라는 프로퍼티로 접근하면 된다.
- e.stopPropagation()으로 이벤트 버블링을 멈출 수 있다.
이벤트 캡처링

이벤트 버블링은 부모 요소의 이벤트핸들러가 호출되는 현상이지만, 이벤트 캡쳐링은 그 반대의 방향으로 이벤트가 전파되는 방식이다. 이벤트가 발생하면 가장 먼저 window 객체에서부터 target 까지 이벤트 전파가 일어난다. target에 도달하면 비로소 이벤트 핸들러가 동작하고, 이벤트 버블링이 일어나며 다시 window객체로 이벤트가 전파된다. 캡처링 단계에서 target의 이벤트 핸들러 동작 전에 부모의 이벤트핸들러 동작이 필요한 경우는 드물지만, addEventListener에 세 번째 파라미터에 true 또는 { capture: true }를 전달해주면 가능하다.
이벤트 위임

이벤트 위임은 부모 요소에 핸들러 하나를 등록하여 모든 자식 요소에도 동일 이벤트에 대한 핸들러를 등록한 것과 같은 효과를 내는 현상이다. 예를 들어 ul태그 안에 모든 li태그에 대해서 각각 핸들러를 등록하는 것은 함수가 많아질 뿐더러, 다른 li태그가 추가되면 또 따로 등록해줘야 하지만, ul태그에 한번에 핸들러를 등록하면 하위요소인 li태그들도 해당 핸들러가 등록되는 효과가 있다. 하지만 ul안에 li말고도 다른 태그가 있을 수 있고, 우리는 li태그에만 핸들러를 등록하고 싶다. 이 때 이벤트 객체의 target 프로퍼티를 잘 활용하여 조건문을 if (e.target.tagName === ‘li’)와 같이 만들어 사용할 수 있다.
```
const list = document.querySelector('#list'); // ul태그

list.addEventListener('click', (e)=>{
	if(e.target.tagName === 'li'){
		e.target.classList.toggle('done');
	}
});
```
keyboard 이벤트
- e.key: 사용자가 누른 키가 가지고 있는 값
- e.code: 누른 키의 물리적인 위치
- e.shiftKey: 이벤트가 발생한 시점에 shift키를 눌렀는지 boolean값 다음 코드는 채팅창에 글자입력 후 엔터를 쳐서 전송할 수 있는 기능을 개발하는 코드의 일부이다. 보다시피 시프트키와 엔터를 함께 눌렀을 때는 메세지를 전송하는 것이 아닌 줄바꿈을 실행한다. 또한 preventDefault를 통해 메세지창에 엔터를 쳤을 때 전송과 동시에 줄바꿈이 이루어지는 것을 방지한다.
```
const sendMyTextByEnter = (e)=>{
  if(e.key === "Enter" && !e.shiftKey){
    sendMyText();
    e.preventDefault();
  }
}
```

모던 자바스크립트

Nullish Coalescing operator 연산자 왼쪽의 값이 null 또는 undefined일 때만 오른쪽 값 할당. falsy값이랑은 상관 없음.

const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'Codeit' ?? 'JavaScript'; // Codeit

console.log(example1, example2, example3); // I love Codeit

function키워드 선언과 let, const, var키워드로 함수를 할당하는 것의 차이
```
function func(){
	console.log('func');
}

const func2 = function(){
	console.log('func2');
}
```
- function 키워드 선언은 호이스팅이 이루어짐. 또한 함수 레벨 스코프를 가짐.
- let, const, var키워드로 선언된 함수는 호이스팅 후 초기화가 이루어지지 않으며, 블록레벨 스코프를 가진다.
기명 함수 표현식
```
let countdown = function printCountdown(n) {
  console.log(n);
  if (n === 0) {
    console.log('End!');
  } else {
    printCountdown(n - 1);
  }
};

let myFunction = countdown;

countdown = null;

myFunction(5); // 정상적으로 동작
```
- 위와 같이 함수 표현식을 쓰는데 printCountdown이라는 함수 이름을 함께 써주면 (기명 함수 표현식) 위와 같이 countdown에 null값이 들어가더라도 myFunction은 정상적으로 허출된다. 보통 재귀 함수를 함수 표현식으로 선언할 경우 기명 함수 표현식을 써준다.
arguments 객체
- 함수의 arguments라는 기본 객체가 있다. arguments객체는 유사 배열이므로 배열 메서드를 사용할 수는 없다.
rest parameter
```
function printArgument(...args){
	console.log(args.splice(0, 2));
	console.log('----------------');
}
```
- 레스트 파라미터인 args는 배열이기 때문에 splice와 같은 배열 메서드들을 사용할 수 있다. 일반 파라미터와 함께 사용할 수도 있다. 이럴 때는 항상 파라미터의 마지막 위치에 와야 한다.
arrow function
- arrow function은 기본적으로 간결하게 함수 표현식을 작성하기 위해 나온 문법이다.
- arrow function에는 arguments객체가 없다.
- 익명 함수라서 이름을 가질 수 없다.
- this값은 arrow function이 선언되기 직전의 this값과 동일하게 고정된다.
this
- 객체 메서드를 만들 때 유용하게 사용되는 키워드
- 함수를 호출한 객체를 가리키는 키워드. 코드가 작성될 때 this 값이 결정되는 것이 아닌 함수 호출 시점에 동적으로 값이 바뀐다.

모던한 프로퍼티 표기법

const title = 'Codeit';
const birth = 2017;
const job = 'Developer';

const user = {
	title: title,
	birth: birth,
	job: job,
}

//위와 같이 키 밸류 값이 동일하다면 아래와 같이 간단하게 입력도 가능하다.
const user2 = {
	title,
	birth, 
	job,
}

const user = {
	firstName: 'Tess',
	lastName: 'Jang',
	getFullName: function(){
		return `${this.firstName} ${this.lastName}`;
	},
}

//위와 같이 메서드를 객체 내부에서 선언할 경우, function키워드를 생략가능하다
const user2 = {
	firstName: 'Tess',
	lastName: 'Jang',
	getFullName(){
		return `${this.firstName} ${this.lastName}`;
	},
}

const propertyName = 'birth';
const getJob = () => 'Job';

const user = {
	['topic' + 'Name']: 'Modern Javascript',
	[propertyName]: 2017,
	[getJob()]: 'Developer',
}

//위와 같이 프로퍼티 이름에 대괄호를 이용하면 표현식을 쓸 수 있다. 함수의 리턴값이나 변수명, 계산식 등이 키에 들어갈 때 활용한다.

Destructuring

두 값의 한줄 swap

let firstName = 'Cho';
let lastName = 'Kenny';

[firstName, lastName] = [lastName, firstName];

Destructuring을 활용한 객체 분해

const macbook = {
	title: '맥북 pro',
	price: 3690000,
	memory: '16GB',
	storage: '1TB SSD'
}

// macbook 객체의 title 프로퍼티를 product라는 변수 이름으로 담는다.
// title 프로퍼티 외의 나머지 프로퍼티는 객체의 형태로 모아서 rest라는 변수에 담는다.
const { title: product, ...rest } = macbook;

Content-Type 헤더

request와 response는 헤드와 바디로 이루어져 있다. 헤드에는 각종 부가 정보(사용하는 메소드, user-agent, status code 등)가 들어있고, 바디에 실제 주고받는 데이터가 들어간다. 크롬 개발자 도구에서 network 탭에 들어가 실제 통신의 내용을 볼 수 있는데, 이 떄 request headers와 같이 header라는 탭이 있다. 이 header라는 것이 바로 요청/응답의 헤드에 들어있는 키 - 밸류 쌍 하나를 뜻한다. 예를 들어 status code : 200 OK는 하나의 헤더이다.

여기서는 중요한 헤더중 하나인 content-type에 대해서 알아보자. content-type은 현제 요청 또는 응답의 바디에 들어있는 데이터가 어떤 타입인지를 나타낸다. 보통은 JSON형식 데이터겠지만 사실 텍스트, 이미지, 영상 부터 정말 다양한 종류가 들어갈 수 있다. 이런 데이터들의 타입 정보가 content-type헤더에 들어있는 것이다.

content-type은 “주 타입/서브 타입” 형식으로 나타나게 된다. 예를 들자면, “text/Javascript” 라면 주 타입이 text, 서브 타입이 자바스크립트 코드라는 뜻이다. 주 타입은 text, image, audio, video, application이 있다. 그리고 json형식 데이터는 content-type이 application/json이다.
- Content-Type 설정하기
```
      const newMember = {
        name: 'Jerry',
        email: 'jerry@codeit.kr',
        department: 'engineering',
      };

      fetch('https://learn.codeit.kr/api/members', {
        method: 'POST',
        headers: { // 추가된 부분
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(newMember),
      })
        .then((response) => response.text())
        .then((result) => { console.log(result); });
```

오늘의 나는 어떤 어려움이 있었을까?

입병이 많이 난 데다가, 하나가 나으면 다시 생기고 있다. 혀가 아파서 공부하는 중간중간에 신경이 꽤 쓰였다.
저번주를 거의 스킵하다시피 했더니 저번주 내용과 이번주 내용을 변행하고 있다. 큰 어려움은 아니지만 내용이 왔다 갔다 하니 양도 많고 은근히 헷갈린다.

내일의 나는 무엇을 해야할까?

강의 계속 듣기

토깽이연구소 수석연구원

Let's get after it

이전 포스트

2023.04.03 TIL

다음 포스트