codinghatso

DOM( Document Object Model) EventTarget ↑ Node ↑ ↖ ↖ Document Element Text ↑ HTMLElement ↑ ↖ HTMLInputElement HTMLDivElement 브라우저가 HTML 파일을 읽어 어플리케이션이 이해할 수 있는 오브젝트 형식으로 변환한다. 또 그 모델은 트리형태를 띈다. CSSOM( CSS Object Model) DOM + CSS = CSSOM DOM으로 HTML 파일을 오브젝트로 만든 후 CSS 파일을 오브젝트에 매핑시켜 파일을 적용 시킨다. 이때 사용자 지정 스타일 또는 inline 즉 브라우저가 기본값으로 정의하고 있는 스타일이 적용된다. cascading rules 에 따라 위 작업이 완료가 되면 compute style..

브라우저에서 좌표찾기 getBoundingClientRect() 사용법 Element.getBoundingClientRect(); 예시 const sbox = document.querySelector(".sbox"); document.addEventListener("click", (e) => { const rect = sbox.getBoundingClientRect(); console.log(rect); console.log(`clinet: ${e.clientX}, ${e.clientY}`); console.log(`page: ${e.pageX}, ${e.pageY}`); });

nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다. a ?? b의 평가 결과는 다음과 같습니다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다. x = (a !== null && a !== undefined) ? a : b; 예시 let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? las..

Javascript는 함수형 개발 언어에 최적화 되어있습니다. 우리가 개발을 할 때 함수를 만들때는 주의사항이 있습니다. 함수는 항상 어떤 목적을 수행하기 위한 하나의 기능 단위로 만들어져야 한다는 것입니다. 함수를 사용하는 이유 1. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때(그리고 나중에 재사용할 때) 2. 입출력기능을 만들 때 Arrow fucntion 장점 1. 함수 본연의 기능을 아주 잘 표현하는 문법입니다. 함수 본연의 입출력기능을 아주 직관적으로 잘 표현해줍니다. input을 집어 넣어 output을 출력하는 함수의 본 개념을 뜻함. 파라매터로 값을 받아 return을 이용하여 뱉어내는 것. 2. 소괄호 생략이 가능합니다. var someFunc = x => { return x *..

JS는 window라는 거대한 오브젝트 안에서 구현되는 형식을 취하고 있다. 전역에서 this를 출력하면 window 오브젝트가 호출되는 모습을 볼 수 있다. window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체이다. this는 나를 담고 있는 오브젝트를 출력해준다. function person(){ this.name = 'kim' } 여기에서 this는 새로 생성되는 오브젝트(instance)이다. constructor(생성자) 안에서 사용하면 constructor로 새로생성되는 오브젝트를 뜻합니다. constructor는 오브젝트를 복사해서 생성해주는 장치입니다.

클래스의 상속은 만들어 놓은 클래스의 기능들을 그대로 가져다 쓸 수 있으면서도, 상속받은 클래스의 고유한 기능을 추가할 수 있기 때문에 체계적으로 구조화 된 서비스를 개발하는데 아주 중요한 역할을 합니다. 키워드 // 1. extends - 상속받을 클래스를 지정하는 지시자입니다. class ChildClass extends ParentClass {} //이런 방식으로 부모 클래스(Parent Class)를 상속받게 됩니다. 호출하지 않으면 부모 클래스의 생성자에서 초기화한 변수나 //메서드를 사용할 수 없게 됩니다. //2. super - 부모 클래스의 생성자(constructor()) 를 호출합니다. 자식 클래스의 생성자에서 호출하며, //부모 클래스의 생성자를 호출합니다. class ChildCla..

// 1. class 클래스명 {} 으로 클래스 외형을 정의합니다. class Estimate {} // 2. 클래스 내부에 생성자(constructor) 함수를 정의합니다. // 클래스 1개에 생성자는 1개만 올 수 있습니다. 필수 함수이며, function 키워드는 사용하지 않습니다. class Estimate2 { constructor() {} } // 3. 생성자에 파라메터를 추가합니다. // new 키워드로 클래스를 생성할 때 인스턴스 변수는 "const" 로 설정하는 것이 기본입니다. // ES6의 클래스에는 "let unit=[];" 과 같은 변수 선언 X, 메서드만 O. // 따라서 클래스 객체를 가리키는 this 지시자로 클래스 안에 변수 값을 대입해 동적으로 생성해야 합니다. class..

Flexbox의 구성 container item container display flex : container에 display의 속성, flex 값을 주어야 flexbox 기능이 적용된다. flex-direction row: 요소들을 텍스트의 방향과 동일하게 정렬합니다. row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다. column: 요소들을 위에서 아래로 정렬합니다. column-reverse: 요소들을 아래에서 위로 정렬합니다. flex-wrap nowrap (default) wrap wrap-reverse flex-flow 다음의 속성들을 간략히 한 속성입니다. flex-direction and flex-wrap. justify-content flex-start (default) ..