반응형 개발/JavaScript32 input 에서 자동 완성 끄기, 캐시 삭제하기 자바스크립트 전체 링크 로그인 폼에서 아래와 같이 자동 완성되는 경우가 있다. 아래와 같이 autocomplete 속성에 off를 주면 자동완성을 막을 수 있다. 만약 자동 완성된 목록의 캐시를 삭제하고 싶다면 크롬 오른쪽 상단의 목록 → 도구 더보기 → 인터넷 사용 기록 삭제를 누른다. 삭제할 여러 목록이 있는데, 이 중 양식 데이터 자동 완성을 선택해서 삭제하면 자동 완성 목록만 지울 수 있다. 구글 검색으로 자동 완성된 목록도 삭제되므로 필요한 경우 캐시를 삭제하자. 2022. 3. 9. 자바스크립트 - 객체 속성 기술자 (Object Property Descriptor) 자바스크립트 전체 링크 자바스크립트의 모든 객체는 자기 자신에 대한 정보를 담은 속성 기술자(Property Descriptor)를 가지고 있다. value 객체의 값 writable false라면 값 변경 불가 enumerable false라면 for in, Object.key 나열 불가 configurable false라면 속성 기술자 변경 불가 getOwnPropertyDescriptor를 통해 속성 기술자 객체를 확인해볼 수 있다. let car = { name: "tesla", color: ["red", "blue", "green"], }; console.log(Object.getOwnPropertyDescriptor(car, "name")); console.log(Object.getOwnPro.. 2021. 10. 4. 자바스크립트 - 태그드 템플릿 리터럴 (Tagged Template Literals) 자바스크립트 전체 링크 태그드 템플릿 리터럴을 이용하면, 템플릿 리터럴의 표현식을 분해할 수 있다. 다음과 같은 literal이 있다면, ABC, EFG, HIJ(,+ "")와 value1, value2, value3로 분해한다. `ABC${value1}EFG${value2}HIJ${value3}` 아래의 taggedTemplateLiterals의 str과 rest를 console로 출력해보자. taggedTemplateLiterals 뒤에 literal을 붙여주면 실행된다. function taggedTemplateLiterals(str, ...rest) { console.log(str); console.log(rest); return 0; } let value1 = 10; let value2 = "t.. 2021. 8. 20. 자바스크립트 - 자기 자신을 정의하는 함수 (Lazy Function Definition) 자바스크립트 전체 링크 자바스크립트에서 함수는 동적으로 할당할 수 있다. 이것은 자기 자신도 가능하다. 함수가 자기 자신을 재정의하면 최초로 A를 실행하고, 이후 B를 실행할 수 있다. let test = function() { console.log("hello!"); test = function() { console.log("world!"); }; }; test(); // hello! test(); // world! test(); // world! 첫 번째 test가 hello를 출력하고, test를 다시 새롭게 정의하였다. 따라서 다음부터는 world가 출력된다. 이러한 패턴을 Lazy Function Definition 이라고 한다. 이 패턴을 이용하면 초기화 준비 작업을 한 번만 수행할 수 있다... 2021. 8. 17. 자바스크립트 Symbol 자바스크립트 전체 링크 심볼(Symbol)은 유일한 토큰을 나타낼 수 있다. 심볼은 항상 유일하며, 어떤 심볼과도 일치하지 않는다. 심볼은 Symbol() 생성자로 만들 수 있다. const SYMBOL0 = Symbol(); const SYMBOL1 = Symbol("SymBol1"); const SYMBOL2 = Symbol("SymBol1"); console.log(SYMBOL0 === SYMBOL1); // false console.log(SYMBOL1 === SYMBOL2); // false console.log(SYMBOL0.description); // undefined console.log(SYMBOL1.description); // SymBol1 console.log(SYMBOL2.des.. 2021. 8. 14. 자바스크립트 this 자바스크립트 전체 링크 this는 함수를 어떻게 호출하냐에 따라 값이 달라진다. 아래의 person1 object에서 show를 호출하면 show의 this는 person1을 가르키게 된다. const person1 = { name: "blood", show() { return this.name; }, // show: function() { return name; }, }; console.log(person1.show()); //blood 이제 person2를 추가하고, name은 "strawberry"로 선언하자. const person1 = { name: "blood", show() { return this.name; }, // show: function() { return name; }, }; co.. 2021. 8. 11. 자바스크립트 async await 자바스크립트 전체 링크 프로미스 외에도 async await을 이용하면 프로미스를 반환할 수 있다. 아래의 코드를 보자. async function getData(data) { return data; } console.log(getData("test 1")); getData("test 2", 3000).then(data => console.log(data)); getData("test 3", 1000).then(data => console.log(data)); getData("test 1")이 Promise를 반환하는 것을 알 수 있다. getData가 Promise를 반환하기 때문에 then을 이용하여 반환된 값을 출력할 수 있다. await은 async 함수 내에서 사용한다. await은 프로미스의 .. 2021. 8. 3. 자바스크립트 - 시간 지연 함수 setTimeout, sleep 자바스크립트 전체 링크 setTimeout을 이용하면 함수를 X ms초 뒤에 실행할 수 있다. function show(str) { console.log(str); } setTimeout(show("test 1"), 3000); // 잘못된 사용 setTimeout(function() { show("test 2"); }, 3000); setTimeout(() => show("test 3"), 3000); 첫 번째 setTimeout은 잘못 사용한 경우다. setTimeout은 callback 함수를 받기를 원하지만, show("test 1")을 실행하여서 시작하자마자 test 1이 출력되었다. setTimeout(show("test 1"), 3000); // 잘못된 사용 따라서 아래와 같이 함수를 넘겨야.. 2021. 8. 1. 자바스크립트 프로미스 - Promise all, race 자바스크립트 전체 링크 Promise.all을 이용하면 여러 개의 프로미스를 병렬로 처리한다. 비동기 함수 간에 서로 의존성이 없는 경우 사용할 수 있다. 아래 getData는 동시에 실행된다. function getData(response, number) { return new Promise((resolve, reject) => { if(response) resolve(`resolve ${response} ${number}`); else reject(`reject ${response}`); // or reject(new Error(`reject Error! ${response}`)); }); } getData(true, 1).then(result => console.log(result)); getDat.. 2021. 7. 31. 이전 1 2 3 4 다음 반응형
