컴퓨터/JavaScript_typescript
-
navigator.onLine컴퓨터/JavaScript_typescript 2021. 11. 22. 11:46
* navigator.onLine return true or false (boolean) 온라인 상태인지, 오프라인상태인지 확인할 수 있다 * Returns the online status of the browser. The property returns a boolean value, with true meaning online and false meaning offline. The property sends updates whenever the browser's ability to connect to the network changes. The update occurs when the user follows links or when a script requests a remote page. For ex..
-
타입스크립트 타입시스템에 대한 이해컴퓨터/JavaScript_typescript 2021. 8. 4. 23:53
* 단순히 런타임에 예외를 던지는 코드에 오류를 표시하는 것뿐 아니라, 의도와 다르게 작성된 코드까지 찾으려한다. * 잉여 속성 체크와 할당 가능 검사는 별도 과정이다. * 잉여 속성 체크 = 엄격한 객체 리터럴 체크 객체리터럴에 알 수 없는 속성을 허용하지 않는다. 타입 단언문 사용시 적용되지 않는다 ex. const o = {title:'free'} as Options; 잉여 속성 체크를 원하지 않는다면 인덱스 시그니처를 사용한다 * 인덱스 시그니처 interface Options { darkMode?: boolean; [ket:string]:unknown; } * 약한(week) 타입: 선택적 속성만 가지는 타입
-
Emmet + visual studio code extensions 추천컴퓨터/JavaScript_typescript 2021. 3. 22. 23:30
source : www.youtube.com/watch?v=m7wsrVQsVjI * ide : integrated development environment compiler, devugger, linker, performance 분석 가능 * text editor : visual studio code, atom, sublime * command palette cmd+shift+p * Emmet(formerly Zen Coding) [ 안되면] 파일-기본설정-설정-확장-emmet-trigger expansion on tab 체크하기 settings.json에 추가 "emmet.includeLanguages": { "javascript": "javascriptreact" } [ HTML 자동 완성 ] ! +..
-
개별 모듈로 분할하기: CommonJS vs ECMAScript module컴퓨터/JavaScript_typescript 2021. 2. 18. 13:39
* 개별 모듈로 분할하기 ES2015 이후 개별 모듈로 분할하는 방법이 여러 가지 생겼다. 1) 태그 사용하기 2) 직접 갖다 붙이기 (manual concatenation) 3) Makefile 기법 4) NodeJS 스타일의 require 구문 (CommonJS 모듈) 5) AMD 스타일의 define 콜백 6) 타입스크립트 자체 모듈 시스템 7) ECMASCript 모듈 ⭐️ * CommonJS 모듈 시스템: require & module.exports https://nodejs.org/api/modules.html javascript 자체가 지원하는 패키지 읽는 법 module.exports = foo; // 가능: var foo = require('foo'); exports.bar = bar; ..
-
[JavaScript] new FormData(form), Object.fromEntries(iterable), how to seriazlie form data컴퓨터/JavaScript_typescript 2021. 1. 31. 13:46
* forms with multiple fields that have the same name * How to serialize form data with vanilla JS 1) FormData object FormData object provides an easy way to serialize form fields into key/value pairs. Form fields must have a name attribute to be includes object. Otherwise, they're skipped. Title Body Soak up the sun and swim in the ocean. Submit // Get the form let form = document.querySelector(..
-
[ JavaScrip ] 객체 생성 방식, OrdinaryObjectCreate컴퓨터/JavaScript_typescript 2021. 1. 21. 19:22
source : 이웅모, 자바스크립트 deep dive * 자바스크립트는 프로토타입 기반 객체 생성 메커니즘을 지닌다 [ 객체 생성 방식 ] 1. 객체 리터럴 2. Object 생성자 함수 3. 생성자 함수 4. Object.create 메서드 5. 클래스 ( ES6 ) => 프로토타입 체인은 모든 객체 생성 방식에 의해 생성된 인스턴스에 동일하게 적용된다. * 추상연산 OrdinaryObjectCreate 각 방식마다 객체 생성 방식의 차이는 있으나 추상연산 OrdinaryObjectCreate에 의해 생성된다는 공통점이 있다. OrdinaryObjectCreate : 필수적으로 자신이 생성할 객체의 프로토타입을 인수로 전달받는다. ex. 객체 리터럴, new Object() : Object.proto..
-
<script> 태그를 어디에 둘까, async, defer컴퓨터/JavaScript_typescript 2020. 12. 11. 09:05
source: youtube 드림코딩 엘리 강의 이웅모, 자바스크립트 deep dive * html을 파싱하면서 js파일을 다운로드 받는다. 이후 다운로드가 완료되면 html을 파싱하는 일은 잠시 멈추고, js 파일을 실행한다. 실행이 다 끝나면 parsing HTML을 다시 시작한다fetching이 parsing과 병렬적으로 일어난다. => 다운로드 받는 시간을 절약할 수 있다.단점 : 만약 js 파일에 querySelector를 이용해서 dom을 조작하려고 한다면 아직 parsing이 끝나지 않아서 정의되어 있지 않은 element의 경우 에러날 수 있다.또한 parsing html이 완전히 끝나는데(중간에 block된다) 오래 걸려서 사용자가 불편할수 있다. 스크립트 태그의 순서보장도 X [ js ..
-
[JavaScript] 같음 비교컴퓨터/JavaScript_typescript 2020. 10. 5. 11:39
* Object.is(value1, value2) : 두 값이 같은 값인지 결정한다 == : 같음을 테스트하기 전 양 쪽이 같은 형이 아니라면 다양한 강제(coercion)를 적용한다 "" === false // true Object.is는 강제하지 않는다 Object.is('foo', 'foo'); // true Object.is(window, window); // true Object.is('foo', 'bar'); // false Object.is([], []); // false var test = { a: 1 }; Object.is(test, test); // true Object.is(null, null); // true // 특별한 경우 Object.is(0, -0); // false Obje..