[TIL] 240109 (화) JS 개인과제 리뷰 / 이벤트(event) 객체

오늘의 공부📖

1. 개인과제 코드 리뷰
2. Git & Github 2차 특강

오늘 공부한 내용 정리💁🏻‍♀️

🧐 개인 과제 코드리뷰 및 해설

1) innerHTML : '문자열' 이다.

→ 이 문자열을 <ul> 태그 안의 <li> 태그로 넣어줘라.

2) array.join( ) : 배열의 join( ) 메서드

: 배열을 '문자열'로 만들어 줘.

const elements = ['Fire', 'Air', 'Water'];

// 1. 인자없이 빈 메소드 형태 사용 -> ,(콤마)로 구분
console.log(elements.join());  // "Fire,Air,Water"

// 2. ''(빈 문자열) 인자 -> 합치기
console.log(elements.join(''));  // "FireAirWater"

// 3. -인자 
console.log(elements.join('-'));  // "Fire-Air-Water"

3) #id

: CSS에서 id 속성을 사용할 때는 id 이름 앞에 #을 붙이고 사용!

• id 와 class의 차이는?

id : 태그에 유일한 이름을 붙이고 싶을 때 사용 / 사람으로 치면, 고유한 이름
→ CSS : #id 이름으로 사용
class : 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 사용 / 학생, 직장인 등 비슷한 분류끼리의 묶음
→ CSS : .class 이름으로 사용

4) 이벤트 핸들러

-   eventCapuring은 따로 option을 줘야 가능

* 이벤트 위임(event bubbling) : 자식을 눌렀을 때, 부모에게 이벤트가 전파되는 현상

** 이벤트 발생 시 이벤트 전파 흐름

• event.target : event 가 발생한 요소 (ex, child를 클릭했으면, child가 event.target)
• event.currentTarget : event handler가 등록되어 있는 요소 (ex, parent가 이벤트 핸들러이면, chile를 누르면 event 발생(onclick event일 경우))

5) form 태그

: 아주 sematic한 tag로, 폼 내부에 사용자로부터 입력을 받고 제출하는 UI가 있을 것으로 예측
form 태그에 submit event가 발생했을 때, 기본적으로 새로고침 동작이 발생한다.

preventDefault() : submit event가 발생했을 때, 새로고침이 되는 것을 막아줘.

// form 태그의 기본 새로고침 없애기
const form = document.querySelector("#search-form");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  cardSearch(searchInput.value); 
});

6) addEventListener ( )

: 이벤트 핸들러란? 이벤트가 발생했을 때 실행되는 함수

매개변수로 event 객체를 받을 수 있다!

Element.addEventListner('click', function (event) {
    console.log(event);
})

7) async / await

• async 함수는 항상 promise로 반환한다!!!
• await 뒤에 있는 건 항상 promise이다.

: 비동기 작업을 수행하고자 하는 함수 앞에 async 함수 내부에서 실질적으로 비동기 작업이 필요한 위치마다 await를 붙여준다.

// fetch로 데이터 불러오기

async function fetchMovieData() {
  const options = {
    method: "GET",
    headers: {
      accept: "application/json",
      Authorization:
        "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJiYzFjNzNiNzQ4N2IwMTM5ZTI2MDU5MjFhZTBhMjA0MCIsInN1YiI6IjY1OTY1YTFmMzI2ZWMxNGU2ZDA2YzFkMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.h6L2OeVyMqWiyUQs3Qi5f-6rwiWL-k8Oku-0G_5f6S0"
    }
  };
  const response = await fetch("https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1", options);
  const data = await response.json();
  return data.results;
}

하루를 마치며...🤔

개인 과제 해설 강의를 듣고 과제 2차 제출을 했다. 혼자서 강의를 듣고 코드를 구현하려고 하니 어디서부터 진행 해야할지, 뭐부터 해야할지 참 막막했는데, 막상 해설을 보다보니 이 코드는 이래서 이렇게 구성되었구나 라고 이해가 되었다. 언제 저렇게 혼자 스스로 할 수 있을까 라는 생각이 들었지만, 그만큼 더 많이 코드를 쳐보고, 연습해보면서 하나하나 새롭게 배우는 것들을 익혀나가고 이해해 나가면서 발전해야겠다.

한 줄 회고😎

사다리타기로 첫 팀 과제에서 팀장을 맡았다. 아무것도 할 줄 모르는 팀장이 될텐데 큰일이 난 것 같다🥲 할 수 있는 한 정말 열심히 제대로 해봐야겠다. 이번 계기로 많이 배우고 성장 할 수 있었으면 좋겠다.