far

(프로토타입 기반 객체지향 모델을 폐지하고 클래스 기반 객체지향 모델을 제공하는 것은 아님) 생성자 함수와의 유사패턴1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다.2. 클래스는 상속을 지원하는 extends와 super키워드를 제공한다. 생성자 함수는 X3. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다.4.클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode를 해제할 수 없다. 하지만 생성자 함수는 X5. 클래스의 constructor, 프로..

textarea의 autosize를 구현하는데 계속 스크롤이 위로 올라가는 현상이 발생했다. 스크롤 이벤트 자체를 textarea에만 사용했기에 코드가 꼬인것도 아닌데 왜 이상하게 작동이 됐을까? const textareaResize = (event) => { event.style.height = 'auto'; event.style.height = (event.scrollHeight) + 'px'; } 내가 처음 사용했던 식이다. 당연히 script 부분이 잘못 됐을거라 생각해 식을 아래와 같이 수정했다. const textareaResize = (event) => { let scrollTop = event.scrollTop event.style.height = 'auto'; event.style.hei..

작업을 하다 전송 버튼을 연타하면 데이터를 받아올 때 꼬이는 현상이 나타나는걸 발견했다. 이런 경우 클릭을 연속해서 할 수 없도록 막아버리는게 최선의 방법이라고 생각했다. index.html HTML은 설명에 필요한 부분만 남겼다. translate.js const langBtn = document.getElementById('langBtn'); const result = document.getElementById('result'); //... let clickable = true; langBtn.addEventListener("click", () => { if (clickable === true && result.textContent !== '') { clickable = false resultTran..

1. 태그란? 태그란 HTML에 작성한 내용 그대로 표현을 할 수 있도록 도와주는 태그이다. 즉, 태그는 이나 &nbsp를 사용하지 않아도 엔터나 공백을 활용할 수 있게 해준다. A BC D EFG 결과: A BC D EFG 결과: 2. 태그 사용시 텍스트가 영역을 초과하는 현상이 발생하는 경우 작업을 하면서 태그 내부의 텍스트가 부모 의 영역을 넘어가는 현상이 생겼다. 그래서 word-break를 사용했는데 해결이 되지 않았다. white-space: pre-wrap; 해결 방법은 간단했다. HTML에 작성한 내용 그대로 표현 해주는 white-space: pre에 -wrap을 붙여 주면 된다.

번역기를 만들기 위해 커스텀 셀렉트로 언어 선택창을 만들었는데, 두개의 선택창이 동시에 열려있으면 모양새가 조금 이상했다. 그래서 한쪽이 열리면 다른쪽 선택창은 자동으로 닫히도록 만들기 위해 태그 외부를 클릭하면 자동으로 선택창이 닫히도록 만들어봤다. index.html English Korean English Japanese Chinese French German Italian Portuguese Russian Polish ... Korean Korean English Japanese Chinese French German Italian Portuguese Russian Polish 간단히 말하면 언어를 선택할 수 있는 부분이 Button이고 li가 select태그의 option값이 된다. 굳이 sel..

이번에 vanilla javascript로 간단한 화면을 만들 일이 있어서 다크 모드를 적용해봤다. 처음에는 미디어 쿼리를 이용해 prefers-color-scheme라는 방법으로 적용했는데, 자체적인 컬러모드 적용이 어렵고, 사용자가 다크 모드를 on/off 전환 할 수 없다는 문제가 있어 dataset으로 구현을 해봤다. base.html Dark Mode HTML에 다크 모드 on/off를 선택하기 위한 버튼을 만든다. style.css /* light mode */ body { height: 100vh; overflow-x: hidden; background-color: rgb(255, 255, 255); } /* dark mode */ body[data-theme='dark'] { backgro..

1. 클로저 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } innerFunc(); } outerFunc(); 위의 예시를 보면 innerFunc의 상위 스코프는 outerFunc의 스코프다. 이 때 innerFunc는 outerFunc의 렉시컬 환경 안에 있는 변수 x에 접근이 가능하다. 1.1. 렉시컬 스코프 자바스클비트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라고 한다. 1.2. [[Environment]] 함수는 자신의 내부..

innerHTML, innerText, textContent 모두 HTML의 텍스트값에 접근하고 수정 할 수 있지만 약간의 차이가 있다. 1. innerHTML innerHTML은 엘리먼트의 속성으로 엘리먼트내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정할 수 있다. // 기본 문법 const content = element.innerHTML; element.innerHTML = htmlString; // 활용 const animal = "Cat"; el.innerHTML = animal; animal = ""; el.innerHTML = animal; 위의 '활용' 코드 같은 경우 innerHTML로 삽입된 값을 설정할 때도 innerText는 텍스트값만 설정하기 때문에 태그를 문자열로 인..

1. 소스코드의 평가와 실행 자바스크립트 엔진은 소스코드를 "소스코드의 평가"와 "소스코드의 실행" 2개의 과정으로 나누어 처리한다. 소스코드 평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로하여 실행 컨텍스트가 관리하는 스코프에 등록한다. 소스코드 평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행되기 시작한다.(런타임 시작) 이때 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 취득한다. 그리고 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다. 2. 실행 컨텍스트의 역할 코드를 실행하려면 스코프, 식별자, 코드 실행 순서 등의 관리가 필요하다. 실행 컨텍스트는 소스코드를 실..

1. this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 똔느 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. this는 지역 변수처럼 사용할 수 있지만 this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. const circle = { radius: 5, getDiameter() { return 2 * this.radius; } }; console.log(circle.getDiameter()); // 10 const circle = { th..