909 Devlog

리액트에서 input을 다루다 보면 자주 사용하게 되는 e.target과 e.currentTarget, 두 요소의 차이점을 알아보자. 코드로 알아보기 전에, MDN 문서를 한 번 읽어보자. 먼저, Event 인터페이스의 읽기 전용 요소인 target은 이벤트를 발생시킨 객체에 대한 참조이다. 이어서, Event 인터페이스의 읽기 전용 요소인 currentTarget은 이벤트 핸들러가 부착된 element를 식별한다. 즉, target은 이벤트 버블링에 의해 부모의 이벤트를 위임받은 자식을 가리키고, currentTarget은 이벤트 핸들러가 부착된 요소를 가리킨다. 쉽게 말해서 target은, 실제로 이벤트가 발생된 요소를 가리킨다고 보면 된다. 이제 코드로 한 번 알아보자 강아지 고양이 우선 위와 같이..

목차 sort 메서드란? sort 알아보기 sort 메서드란? sort 메서드는 배열의 요소를 정렬한 후 그 배열을 반환하는 메서드입니다. const strs = ['d', 'b', 'a', 'c']; console.log(strs.sort()); // 결과 = ['a', 'b', 'c', 'd'] 위 코드의 결과는 a, b, c, d로 우리가 일반적으로 생각하는 정렬이 된 상태로 출력되는 것을 볼 수 있습니다. const nums = [7, 3, 8, 2, 10]; console.log(nums.sort()); // 결과 = [10, 2, 3, 7, 8] 반면에, 위 코드의 결과는 10, 2, 3, 7, 8로 우리가 원하는 대로 정렬이 되지 않은 것을 볼 수 있습니다. 원하는 대로 정렬을 할 수 있도록..

목차 forEach 메서드란? forEach 알아보기 forEach 메서드란? 배열에서, 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드입니다. 아래와 같은 배열이 있을 때, 기존의 for문을 사용하여 각 요소들을 로그하려면 const numbers = [1, 2, 3, 4, 5]; for (let i = 0; i < numbers.length; i++) { console.log(numbers[i]); } // 1 // 2 // 3 // 4 // 5 위와 같은 코드를 짜야 했었습니다. forEach 메서드를 사용하면 더 간편하고 짧게 코드를 짤 수 있습니다. const numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(value) { console.log(..