hsunny study blog

웹기반 텍스트 에디터를 만들 때 브라우저마다 다른 스펙에 대응이 어려운점, 편집 핸들링 어려운 점, 사용자마다 사용이 다양한 점 등을 해소하기 위해 나왔다고 한다. 자바스크립트 코드도 많이 써야하는데 브라우저마다 대응을 해야겠냐! 조금이라도 쉽게 할수 있도록 하자! 이런 느낌 InputEvent는 편집가능한 콘텐츠의 내용이 변경되었을 때 발생하는 이벤트다. 대표적으로 편집이 가능한 콘텐츠는 편집가능한 콘텐츠이기 때문에 contenteditable 속성이 true인 것도 물론 포함이다. contenteditable InputEvent는 UIEvent와 Event를 상속받는다. 인스턴스 속성 InputEvent.data 삽입된 글자를 반환한다. 문자가 삭제된 경우는 null이다. InputEvent.data..

자동으로 실행하는 브라우저의 동작들을 자바스크립트로 다루어야 하는 경우들이 있다. 자동으로 실행하는 브라우저 동작 - 링크를 클릭하면, 연결된 링크의 주소로 이동 - 폼 전송을 클릭했을 때, 서버에 폼이 전송 - 마우스를 클릭한채로, 글자를 드래그하면 선택 위 동작들을 막기 위한 방법으로는 2가지가 있다. 1. event 객체 사용한다. event 객체 안에 있는 preventDefault() 메서드를 사용한다. 2. 핸들러가 on에 할당되었을 경우, return false를 반환하게 해 기본 동작을 막는다. 첫번째 방식 두번째 방식 위와 같이 기본동작이 막힌 경우, event 객체 안에 있는 defaultPrevented의 값은 true이다. event.defaultPrevented 값을 사용하여, 버..

EventTarget.addEventListener()의 옵션 중 하나로 passive가 지원된다. passive를 true로 설정함으로써 스크롤 성능을 향상시킬 수 있다. // Chrome 49 부터 EventListenerOptions 지원 document.addEventListener("touchstart", handler, { capture: false, // Chrome 49 once: false, // Chrome 55 passive: false // Chrome 51 }); 어떻게 향상하는걸까? 스크롤 할때 발생하는 터치 이벤트들이 브라우저에서 발생하면, 브라우저는 터치 이벤트 수신기가 스크롤을 취소할지 여부를 알 수 없으므로 항상 수신기가 끝날 때까지 기다렸다가 페이지를 스크롤한다. pas..

1. 정확한 타입을 지정하기 (any 사용 피하기) 타입 지정은 타입스트립트로 코딩할 때 얻을 수 있는 장점 중 하나입니다. 자바스크립트는 런타임 때 데이터 타입이 지정됩니다 타입스트립트에서 데이터 타입을 정의하면 실수로 발생할 수 있는 이상한 런타입에러를 방지할 수 있습니다. 'any' 변수의 데이터 유형을 알고 있는 경우 'any'를 사용하지 마세요. 새 변수를 선언할 때마다 데이터 유형을 정의하는 것이 좋습니다. 2. strict 모드 사용하기 ES5에서 use string 기능이 추가되었습니다. 문자 그대로 '코드는 엄격한 모드에 있어야 함'을 의미합니다. 타입크스립트 코드의 tsconfig 파일에서 'strict' 환경설정을 찾을 수 있습니다. 이는 선언되지 않은 변수를 사용하거나 타입지정을 하..

현재 실행되는 컨텍스트를 말합니다. 여기서 컨텍스트는 값과 표현식이 표현되거나 참조될 수 있음을 의미합니다. 만약 변수 또는 다른 표현식이 해당 스코프 내에 없다면 사용할 수 없습니다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가능합니다. 함수는 자바스크립트에서 클로저 역할을 하기 때문에 스코프를 생성하므로 함수 내에 정의된 변수는 외부 함수나 다른 함수 내에서는 접근할 수 없습니다. 예를 들어 다음과 같은 상황은 유효하지 않습니다. 그러나 다음과 같은 코드는 변수가 함수 외부에 전역에서 선언되었기 떄문에 유효합니다. insight 전역으로 선언한 변수와 동일한 이름의 지역 변수를 사용할 떄 의도하지 않은 결과가 나올 수 있습니다. 따라서 스코프..

throw 문을 사용할 수 있고 try ...catch 문을 사용하는 예외들을 다룰 수 있다. 예외 유형 - Error - AggregateError - EvalError - InternalError - RangeError - ReferenceError - SyntaxError - TypeError - URIError throw 문법 다양한 유형을 던질 수 있다. throw "Error2"; // String type throw 42; // Number type throw true; // Boolean type throw {toString: function() { return "I'm an object!"; } }; ※ 예외를 사용할 때 객체를 명시할 수 있으며, catch 문 안에서 객체의 특성을 참조..

기본적으로 조건문은 아래와 같이 사용한다. if (condition) { statement_1_runs_if_condition_is_true; statement_2_runs_if_condition_is_true; } else { statement_3_runs_if_condition_is_false; statement_4_runs_if_condition_is_false; } 종종 조건문에서 변수를 할당하는 코드들을 마주하기도 한다. if (x = y) { /* statements here */ } 하지만 위 방식은 MDN에서 추천하는 방식이 아니다. 추천하지 않는 이유: 코드를 자세히 보지 않는 경우, 동등비교연산자로 오해할 수 있기 때문에 추천하는 방식은 할당 주위에 추가 괄호를 넣는 것이다. if ((..

let name = getUserName(); // getUserName() 이 리턴해야 하는 값: sunny 위 코드에서 name에 값이 제대로 할당됐는지 판단하기 위해서 아래와 같이 코드를 작성했다. if (!name) { console.error('이름이 없습니다.'); }​ if 안에 들어가는 name이 거짓 상태일 때 콘솔이 찍히도록 코드를 구현하였다. 그렇다면 자바스크립트에서는 어떤 상태들을 거짓으로 판단할까? 자바스크립트에서는 다음 값들을 거짓으로 평가한다. - false - undefined - null - 0 - NaN - the empty string ("") name 에는 sunny라는 문자열이 들어가야하므로, 판단을 위한 코드는 정상적으로 동작한다. 참고 developer.mozil..