JavaScript_day2

#3.1 ~ #3.7

아래 강의 중 '바닐라 JS로 크롬 앱 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다.

https://academy.nomadcoders.co/courses

Academy

 

1. submit

submit이란 어떤 것이다라고 정의하기는 힘들다. submit을 의미하는 것이 포괄적이기 떄문이다. 예를 들어,

HTML에서 버튼을 생성하고 브라우저에서 입력을 한 뒤 엔터를 누르는 것. 이 엔터를 누르는 것을 submit 한다(엔터 == submit)라고 한다. 나는 이것을 '사용자가 발생시킨 이벤트를 브라우저에 제출한다'라고 이해했다.

 

여기서 중요한 것은 submit의 의미 자체가 아니라, submit을 할 때 브라우저에서는 default 값의 행동이 있다는 것이다. 웹 페이지를 만드는 나는 '사용자가 submit을 하면, 이러한 행동을 하도록 해야지'라는 이러한 행동에 대한 처리가 이루어지도록 해야하는데, 브라우저는 submit에 대한 default 행동이 처리한다. 따라서 이 default 행동을 지우고 내가 하고 싶은 행동을 하도록 하기 위해, event.preventDefault를 사용해 default값을 지우고 submit을 처리하는 함수(ex. handleSubmit)를 통해 이벤트를 처리해야 한다.

function handleSubmit(event) {
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value = "";
}

 

 

2. createElement

html 파일과 js 파일을 나눠서 관리하는 것이 좋은 방법이라고 했다. createElement는 js 파일에서 html에 새로운 요소를 생성하는 방법이다. 

const li = document.createElement("li");
const delBtn = document.createElement("button");
const span = document.createElement("span");

 

3. JSON(JavaScript Object Notation)

JSON이 정확히 무엇인지에 대한 이해는 아직 부족하다. 아래 참조된 사이트에서 JSON에 대해 잘 알아보도록 하고, 우선 이 강의에서 나온 JSON 사용법에 대해 정리를 하고자 한다. 객체를 스트링으로 변환하는 방법(JSON.stringify), 스트링을 객체로 변환하는 방법(JSON.parse) 두 가지의 기능을 배웠다.

//object to string
function saveToDos() {
    localStorage.setItem(TODO_LS, JSON.stringify(toDos));
}

//string to object
const parseToDos = JSON.parse(loadedToDos);

 

#reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON

JSON

 

 

4. forEach

배열이 가진 특징으로, 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다. 매개변수로 각 요소에 대해 실행할 함수를 받으며, 이 함수의 인자로 배열을 받는다. 함수를 호출하는 것이 아니라 바로 만드는 것이다. forEach 안에 만든 함수를 따로 떼서 만들고 이를 호출할 수도 있다.

for의 기능과 비슷한것 같다.

const parseToDos = JSON.parse(loadedToDos);
parseToDos.forEach(function(toDos){
    paintToDo(toDos.text);
})

 

#reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach()

 

 

5. filter

forEach와 비슷한 것으로, 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 메서드이다. 매개변수로 각 요소에 대해 시험할 함수를 인자로 받으며 이 값이 true이면 요소를 유지하고, false면 요소를 버리는 것이다.

python에서의 filter와 비슷한 기능인 것 같다.

//todoList의 x표시를 눌렀을 때 HTML상에서 삭제하는 기능
//id가 같으면 false를 반환하고, 이 값을 배열에서 삭제
const cleanToDos = toDos.filter(function(toDo){
    return toDo.id !== parseInt(li.id);
})

 

#reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter()

 

 

6. addEventListener_type

addEventListener를 사용하면서 첫 번째 인자로 받는 값이 무엇인지 궁금했다. 아래 예시에서 보이는 "click", "submit"과 같은 것들이 무엇인지 궁금했다. 내장된 keyword인 것 같은데 정확히 무엇인지, 종류가 얼마나 있는지 더 찾아보았다.

delBtn.addEventListener("click", deleteToDo);

toDoForm.addEventListener("submit", handleSubmit);

 

우선, addEventListener는 지정한 이벤트가 발생했을 때 지정된 함수를 호출하는 메서드이다. 여기서 지정한 이벤트가 바로 첫 번째 인자이며, 지정된 함수가 두 번째 인자이다. 첫 번째 인자는 반응할 이벤트 유형을 나타내는 문자열로 type이라 지칭한다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 정해진 표준 이벤트 목록이 있으므로 이를 찾아 사용하면 된다. "click"은 마우스 이벤트, "submit"은 폼 이벤트로 분류된다. 아래 링크를 통해 들어가면 카테고리별 이벤트 목록을 볼 수 있다.

 

#reference

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조