LEO Devlog LEO Devlog

고차 함수 함수를 리턴할 수 있는 함수 고차함수 = 함수를 전달받거나 함수를 리턴한다 = 사고(함수)에 대한 복잡한 로직은 감추어져 있다 = 사고 수준에서의 추상화 콜백 함수 다른 함수의 인자로 전달되는 함수 '함수를 리턴하는 함수'와 '함수를 인자로 받는 함수' 모두, 용어를 고차 함수로 사용 고차함수 map 하나의 데이터를 다른 데이터로 맵핑(mapping) 할 때 사용 배열의 각 요소가 특정 로직에 의해 다른 요소로 지정(map)된다. 고차함수 filter 조건에 맞는 데이터만 분류(filtering) 할 때 사용 true인 경우만 따로 분류한다. 고차함수 reduce 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용 배열의 각 요소를 특정 로직에 따라 원하는 하나의 형태로 응축한다.

DOM DOM (Document Object Model) : 이름에서 유추해보자면, HTML의 엘리먼트를 객체로 가져와서 사용 가능한 모델 DOM으로 HTML을 조작할 수 있다. createElement - CREATE querySelector, querySelectorAll - READ textContent, id, classList, setAttribute - UPDATE remove, removeChild, innerHTML = "" , textContent = "" - DELETE appendChild - APPEND innerHTML과 textContent의 차이 -> 가급적 textContent를 사용하는 것이 좋다. 성능과 보안에 강점이 있고, innerHTML은 보안에 취약하다. DOM (..

Spread 문법 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용 spread 문법은 기본 배열을 변경하지 않는다. (immutable) 테스트 함수 expect 함수 사용법 expect(테스트하는 값).기대하는 조건 expect(isMost(3)).to.be.true // => 'isMost(3)'의 결과값은 참(true)이어야 한다'. expect(1 + 2).to.equal(3) // => 'sum(1, 2)의 결과값은 3과 같아야(equal) 한다'. -> '기대하는 조건'에 해당하는 함수를 matcher라고 한다. '참인 것이어야 한다' => to.be.true '3과 같아야 한다' => to.equal(3) expect('테스트하는 값).to.equal('기대하는..

원시 자료형과 참조 자료형 원시 자료형 -> string, number, boolean, undefined, (null) : 모두 각각 하나의 데이터를 가지고 있다. 데이터 보관함 안에 하나의 데이터만 넣을 수 있다. 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담긴다. 참조 자료형 -> 배열([])과 객체({}), 함수(function(){}) (원시 자료형이 아닌 모든 것) : 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장합니다. 변수에 넣을 수 있는 데이터 크기가 제한되기 때문에 "데이터의 크기가 동적으로 변하는" 특별한 데이터 보관함이 필요해서 등장! 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다. 원시 자료형의 변수에 값 자체가 담기는 예시..

CSS Selector 셀렉터 h1 { } div { } 전체 셀렉터 * { }​ Tag 셀렉터 section, h1 {}​ ID 셀렉터 #only {}​ class 셀렉터 .widget { } .center { } attribute 셀렉터 (암기할 필요 x) a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { }​ 후손 셀렉터 header h1 {} 자식 셀렉터 (후손 셀렉터와의 차이를 반드시 알고 있어야 합니다) header > p {}​ 인접 형제 셀렉터 section + p {}​ 형제 셀렉터 section ~ p {..

Array​..slice() slice() 메소드는 start부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 수정되지 않는다. slice(start, end) start: 추출 시작점에 대한 인덱스. undefined인 경우: 0부터 slice 음수를 지정한 경우: 배열의 끝에서부터의 길이. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출한다. 배열의 길이와 같거나 큰 수를 지정한 경우: 빈 배열을 반환한다. end: 추출을 종료할 기준 인덱스. (end를 제외하고 그 전까지의 요소만 추출.) 지정하지 않을 경우: 배열의 끝까지 slice 음수를 지정한 경우: 배열의 끝에서부터의 길이. slice(2, -1)를 하면 세번째부터 끝에서 두번째 요소까지 추출 배열의 ..

mutable / immutable 1. mutable 변할 수 있다는 뜻 참조타입 해당 데이터 주소를 찾아서 값을 변경함 2. immutable 불변, 변할 수 없다는 뜻 원시타입 해당 데이터 주소와 별개의 새로운 주소에 값이 할당 타입과 메소드 mutable / immutable 자바스크립트 문자열은 변경 불가능한 값(immutable value) 'primitive values' 라 한다. (변경이 불가능하다는 뜻은 메모리 영역에서의 변경이 불가능하다는 뜻이다. 재할당은 가능하다) String Method - immutable (원본은 훼손하지 않는다.) String.slice() (새로운 배열 생성 시 자주 사용!) String.replace() String.split() Array Method ..

오늘 공부하고 적용하는 과정에서 헷갈리는 부분에 대해서 개념을 다시 정리하는 시간을 가진다. 개념을 정확히 인지하지 못하는 순간, 문제에서 원하는 것이 무엇인지 정확하게 파악하지 못하게 되기 때문에 개념의 중요성은 몇 번이고 중요하다고 생각이 든다. 그래야 필요할 때 즉시 꺼내어 사용할 수 있기 때문이다 ! .split() 문자열을 배열로 바꾸는 메소드이다. 사용 시, 괄호 안에 들어가는 내용에 대해서 유의하기! let str = 'I love coding!'; str.split(' '); (3) ['I', 'love', 'coding!'] // 이렇게 문자열에 .split을 이용하면 문자열을 배열로 바꿀 수 있다. // 주의할 점은, str.split() 괄호 안에 넣는 것으로 구분하여 배열로 바꿔 주..