본문 바로가기
반응형

웹개발80

[2020.10.06] 9월 마지막주 ~ 10월 첫째주 회고록 원래는 10월 2일 날 올렸어야 했는데 추석이 겹쳐서 추석을 보내고 이제야 회고록을 올린다. 9월 마지막주부터는 JavaScripts 내장 함수들을 직접 구현해보면서 내장 함수들에 대한 이해에 시간을 쏟았다. 내장 함수를 편하게 쓰기만 했었지 그 구조를 이해하고 내가 직접 구현해보려 하니 너무 어려웠다. 예를 들어 concat() 함수는 두 배열을 합쳐서 새로운 배열을 반환해주지만 이것을 직접 구현하기 위해서는 반복문이나 reduce()를 이용해서 새로 선언된 배열에 다 넣어준 뒤 이 배열을 반환해줘야 한다. 이렇게 새롭게 함수 내부를 구성해주기 위해서는 원래 있던 내장함수에 대한 이해가 필요했는데 제대로 된 이해를 하지 못하면 함수를 제대로 만들지도 못하고 어딘가에서 오류가 날 뿐만 아니라 테스트 케이.. 2020. 10. 6.
[JavaScript] element.childNodes, element.children, Node.contain 오늘은 element.childNodes, element.children, Node.contain에 대해서 공부했다. 동적으로 생성한 html 요소를 조회하는데 유용한 기능들이었다. element.childNodes 는 주어진 요소의 자식 노드 모음( collection )을 반환해주고, element.children은 호출된 요소의 모든 자식 노드의 elements를 담고있는 실시간 HTMLCollection을 반환한다. (비 요소 노드 제외) childNodes와 children의 역할이 헷갈려서 둘의 차이를 알아봤는데 childNodes의 경우 요소가 아닌 비 요소 노드도 포함해주는 반면, element.children은 요소 노드만 배열 형태로 반환해준다. (HTML DOM은 노드(node)라고 .. 2020. 10. 5.
[JavaScript] apply(), call(), bind()와 this 키워드 오늘은 .apply(), .call(), .bind() 함수와 this 키워드에 대해서 알아보았다. apply() 메서드는 주어진 this 값과 배열 (또는 유사 배열 객체)로 제공되는 arguments로 함수를 호출해준다. call()과 기능이 거의 동일하지만 call()은 인수 목록을 받는 반면에 apply()는 인수 배열 하나를 받는다. bind() 메서드는 호출되면 새로운 함수를 생성한다. bind()의 첫 인자는 this 키워드로 설정하고, 이어지는 인자들은 바인드 된 함수의 인수에 제공된다. 여기서 this는 함수가 실행되는 동안 자동적으로 생성되는 특수한 식별자로 함수의 범위를 나타낸다고 보면된다. (또는 부모 객체) 설정이 안 되어있는 경우 기본적으로는 window 객체를 가리킨다고 한다... 2020. 10. 1.
[JavaScript] Array.prototype.sort() 배열 내장함수 - 정렬 오늘은 배열의 내장 함수 중 sort()에 대해서 알아보았다. sort() 함수를 이용해 배열의 요소들을 쉽게 정렬할 수 있는데 , 기본으로는 오름차순으로 정렬해준다. 또한 sort()함수의 인자로 function을 넣어주면 원하는 형태로 정렬이 가능하다. let array = [1, 4, 2, 5, 3, 6, 7]; array.sort(); // [1, 2, 3, 4, 5, 6, 7]; function compareReverse(a, b){ return b - a; // b - a 값이 양수인지 판별하여 b를 a보다 낮은 색인으로 정렬 (내림차순 정렬) // return a -b; -> a-b값이 음수인지 판별하여 a를 b보다 낮은 색인으로 정렬 (오름차순 정렬) // 만약 a === b 이면 a - .. 2020. 10. 1.
반응형

티스토리툴바