본문 바로가기

Ecmascript/Javascript

 (14)
[JsDoc] 타입체크 하는 자바스크립트 코딩 타입체크 하는 자바스크립트 코딩 타입스크립트 없이 vscode의 설정과 jsDoc으로 좀 더 타입세이프 하게 코딩 가능 jsconfig.json 생성 compilerOptions에 아래와 같은 값들 추가 { "compilerOptions": { "jsx": "react", "module": "commonjs", "target": "es2020", "checkJs": true }, "exclude": ["node_modules"] } JsDoc 작성법 /** * @param {array} * @param {...*} args * @param {DOMElement} node * @param {ReactElement} element */ /** * optional한 param: 타입= * @param {obj..
(styled-component의 근간을 이루는) Tagged Template Literal Template Literal의 문제점 객체 타입인 경우에는 대입이 안된다 const obj = { a:1, b:2, c:3} console.log(`${obj}`); // [object Object] 함수의 경우 함수 자체가 담긴다. var obj = () => { return { a:1, b:2, c:3} } console.log(`${obj}`); // () => { return { a:1, b:2, c:3} } Template Literal의 문제점 극복 함수 자체가 담긴다는 성질을 이용해서 극복 Template Literal을 통해 만든 함수(Tagged Template Literal)는 성질이 다름 Tagged Template Literal의 이해 첫번째 인수에는 배열로 텍스트들이 분할되서 담..
[비공개] 디바운스와 스로틀링 // 디바운스 : 입력하다가 특정시간동안 대기하고 있으면 마지막에 입력된 내용을 바탕으로 서버 요청 function debounce(func, delay) { let inDebounce; return function(...args) { const context = this; if (inDebounce) { clearTimeout(inDebounce); } inDebounce = setTimeout( () => func.call(context, ...args), delay); } } const run = debounce(val => console.log(val), 1000); run('a'); run('b'); run('2'); // 1초뒤 2 출력 // 스로틀링..
[Web Storage] 총 정리 및 모듈 구현 Web Storage Origin(host:port) 단위로 관리된다. (같은 URL은 같은 스토리지를 사용한다는 것) 객체와 매우 비슷(key-value 타입, iterator 미구현) local과 session 2가지 존재 배열처럼 length 구현(Array.prototype과는 무관하며, 데이터를 순회하기 위해서 구현한 것으로 보임) 모든 데이터를 문자화(toString)해서 삽입한다.(즉 참조형 데이터는 JSON 처리 필요 -> 코드 참고) 쿠키 역할 대체 가능(만료시간은 직접 구현해야 함) Web Storage와 Cookie와의 차이점 항목 스토리지 쿠키 크기 5MB 4KB 만료시간 없음 있음 서버통신 없음 HTTP 헤더에 담아 송신 Local storage 창/탭 전반에 걸쳐 데이터 공유 가..
[ES6] Proxy 객체와 Symbol Proxy 객체 이름처럼 대리자 역할을 해주는 객체 객체의 값이 변경이 일어나면 대신 나서준다 변경 동작에 맞는 메서드를 실행할 수 있다. 값의 변경을 감지하는 get, set, has, deleteProperty, defineProperty등의 내장메서드가 구현이 되어있다. 특정 객체의 값이 바뀌었을때 화면의 글씨를 바꾼다던지 할때 유용함 -> 화면과 데이터의 양방향 바인딩 구현 용이! // 점수 계산 var dummy = { score: 0, lines: 0 } var prx = new Proxy(dummy, { set: (obj, prop, value) => { // 대상 객체, set이 일어난 대상, 할당된 값 console.log("set동작", obj, prop, value); }, get: ..
[ES6 ] 객체 리터럴 응용 객체 리터럴(Object literal) 자바스크립트에서 객체는 인스턴스와 자료구조(key, value)라는 2가지 역할을 다 할 수 있다. 객체 리터럴은 key, value 형태의 자료구조로써의 역할을 주력한다. ES6에 와서 객체 리터럴에 많은 기능 추가/개선이 이뤄져서 다양하게 응용이 가능해졌다. 비구조화 할당(Destructuring Assignment) 객체를 받는 변수를 {}로 감싸면 해당 키값을 변수로 사용할 수 있다. 객체의 이름으로 변수를 만들고 값을 '복사'해서 대입한 것이다. = 초기값을 대입(값이 없을때 대입되는 기본값) : 뒤에 있는 이름으로 변수명 변경 생략하면 그대로 변수명으로 할당 let state = {user:{}}; state.user = { loading..
[자료구조] Map과 Set Map : 중복되지 않은 '키'의 집합 자바의 Map과 특성이 유사한 자료구조 값 가공 메서드 : set(key, value), get(key), has(key), delete(key) 객체 리터럴과의 차이점 임의의 형으로 키를 설정 가능 객체는 프로퍼티로 가능한 요소(문자,숫자)를 키로 하지만 맵은 무엇이든 가능하다. 맵의 사이즈를 취득 가능 -> size() 메서드 열거 가능 : keys()로 모든 키를, values()로 모든 값을, entries()로 모든 키와 값을 취득 할 수 있다. 넣은 순서가 유지된다. const idols = new Map(); idols.set('외모', '아이린'); idols.set('몸매', '설현'); idols.set('이상형', '연우'); // const i..
[Array] useful method every() Array.every(callbackfn: (value: any, index: number, array: any\[\]) => unknown, thisArg?: any): boolean Determines whether all the members of an array satisfy the specified test. 배열의 모든 요소를 순회해서 모든 요소가 조건을 만족 하는지 여부를 검사 every로 체크하면 다중 if문이 쓸 상황이 줄어든다. const array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every((v) => v < 40)); // true some() Array.some(callbackfn: (value: any, index..

티스토리툴바