LEO Devlog LEO Devlog

DOM 정리 DOM HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 방식이다 DOM은 자바스크립트를 사용해서 웹 화면의 구조를 추가,수정,삭제하거나 이벤트를 처리할 수 있도록 프로그래밍 인터페이스를 제공 HTML을 동적 구조로 조작할 수 있게 도와주는 모델 DOCUMENT window의 document 속성은 창이 포함한 문서를 참조 document는 모든 종류의 문서에 대한 공통의 속성과 메소드를 제공 document의 querySelector 메소드는 선택자를 인자로 전달받아 전달받은 선택자와 일치하는 문서 안의 첫 번째 요소(element)를 반환한다. textContent 속성은 노드가 포함하고 있는 텍스트 컨텐츠를 표현 EVENT 이벤트란 '시스템 내에서 일어나는 사건' (클릭,..

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() 괄호 안에 넣는 것으로 구분하여 배열로 바꿔 주..