디바운싱(debouncing)이란? -> 변화하는 도중에는 효과가 발생 안 하다가, 멈출 시 효과가 발생하는 것 디바운싱 구현 with setTimeout / clearTimeout 전역 변수로 timer 변수를 정의한다. setTimeout을 실행하는 타이머를 이 timer에 저장한다. 특정 이벤트(여기에서는 input)리스너를 등록한다. 만약 timer 값이 있다면, 아직 타이머에 설정한 시간이 지나지 않았으므로, 다시 타이머를 초기화해준다. (clearTimeout) timer에 setTimeout를 저장하며, 실행될 코드를 안에 작성한다. let timer; $(window).resize(function() { clearTimeout(timer); timer = setTimeout(function..
https://www.youtube.com/@dream-coding www.youtube.com 유튜버 드림코딩님의 자바스크립트 강의를 듣고 정리한 내용입니다. Promise 객체 # Promise 객체 : 비동기 처리에서 사용되는 객체로, promise가 상태를 관리하여 다른 코드가 비동기적으로 실행될 수 있도록 만드는 객체 # Promise 상태 대기 (Pending) 이행 (Fulfilled) 거부(Reject) Promise 만들기 새로운 promise가 만들어질 때, promise 안 excutor 함수가 자동으로 바로 실행된다. 비동기 작업 성공 시 resolve가 실행된다. 비동기 작업 실패 시 reject가 실행된다. const promise = new Promise(function (re..
- 노마드코더의 하단 강의 수강완료 후 작성하는 게시글입니다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co - 소스코드 : https://github.com/cjy921004/mywebpage GitHub - cjy921004/mywebpage Contribute to cjy921004/mywebpage development by creating an account on GitHub. github.com 배경화면은 새로고침시마다 랜덤으로 바뀌도록 함 중앙에는 현재 날씨가 초 단위로 보여짐 오른쪽 상단에 현재위치와, 해당 위치의 날씨와 온도 표시 왼쪽 하단에는 명언과 작가가 표시되는데, 새로고침시마다 랜덤으로 ..
event # event : 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 - 이벤트 이용하여 사용자와 상호작용 가능 - ex) onclick, onchange 버튼 두개로 day/night 모드 전환 버튼 하나로 day/night 모드 전환 - if문 사용
01. 추상화 # 추상화 : 어떤 구체적인 존재를 원하는 방향으로 간략화해서 나타내는 것 - 클래스를 설계하는 것도 추상화 - 클래스 이름, 프로퍼티 이름, 메소드 이름을 직관적으로, 이해하기 쉽도록 잘 정하는 것이 중요 03. 캡슐화 # 캡슐화 : 객체의 특정 프로퍼티에 직접 접근하지 못하도록 막는 것 - 안전성 높일 수 있음 - 멤버변수에 대한 직접 접근을 제한하려는 목적으로(혹은 getter, setter 이름과 구분을 위한 목적으로) 멤버변수의 이름을 언더바(_)로 시작하게 지정 # setter method set email(address){ if(address.includes('@')){ this._email = address; }else{ throw new Error('invaild email..
01. 객체 지향 프로그래밍이란? # 객체 지향 프로그래밍 : 객체 간의 상호작용을 중심으로 하는 프로그래밍 : 프로퍼티와 메소드로 이루어진 각 객체들의 상호작용을 중심으로 코드를 작성하는 것 # 객체 - 변수 : 객체의 상태 - 함수 : 객체의 행동 # 절차 지향 프로그래밍 : 변수와 함수를 가지고 작업의 순서에 맞게 코드를 작성하는 것 02. 객체 만들기 1-1 : Object-Literal # Object Literal : 중괄호 안에 프로퍼티와 메소드를 나열하는 것 03. 객체 만들기 1-2 : Factory function # factory function : 객체를 생성해서 리턴하는 함수 04. 객체 만들기 2 : Constructor function # Constructor function(..
01, 모듈이란? # 모듈 : 간단하게, 자바스크립트 파일 하나 # 모듈화 : 복잡하고 많은 양의 코드를 기능에 따라 각각의 파일(모듈)로 나누어 관리 - 더 효율적인 코드 관리 가능 - 비슷한 기능이 필요할 때 다른 프로그램에서 재사용 가능 02. 모듈 파일의 조건 # 모듈 스코프 : 모듈 파일이 가지는 독립적인 스코프 - 모듈 파일 내에서 선언한 함수나 변수는 모듈 파일 내에서만 사용이 가능 - HTML 파일에서 JS 파일을 불러올 때 모듈 스코프를 갖게 하려면 script 태그에 type 속성을 module로 지정해줘야 함 03. Live Server 설치하기 - 모듈 문법을 활용할 때에는 브라우저에서 직접 파일을 불러오는 방식이 아니라 서버를 통해 html 파일을 실행해야 함 => VS code ..
01. 배열 메소드Ⅰ. forEach와 map # 콜백함수 (CallBack Function) : 다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수 # forEach 함수 (method) Array.forEach(callbackfn: (value: number, index: number, array: number[]) => void, thisArg?: any): void : 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드 - 리턴 값이 없다. (undefined) - array 요소들을 제공된 함수로 한 번 실행 - 기존 배열 변경 가능 - 최대 반복 횟수는 최초 호출 시 요소의 개수 const numbers = [1,2,3,4]; numbers.forEach((x, i, arr)=..
01. 문장과 표현식 문장 (statements) : 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리 표현식 (expressions) : 결과적으로 하나의 값이 되는 모든 코드 표현식인 문장 vs 표현식이 아닌 문장 - 둘을 구분하는 가장 간단한 방법은 우리가 구분하고자 하는 문장을 변수에 할당하거나, 어떤 함수의 아규먼트로 전달해보는 것 let x; x = 3; console.log(if (x < 5) { console.log('x는 5보다 작다'); } else { console.log('x는 5보다 크다'); }); const someloop = for (let i = 0; i < 5; i++) { console.log(i); }; - console.log 메소드의 아규먼트로 if문을 전달하거나..
01. 함수를 만드는 방법 함수 선언(function declaration) : 가장 일반적인 방법, function 키워드를 통해 함수를 선언하는 방식 // 함수 선언 function sayHi() { console.log('Hi!'); } 03. 이름이 있는 함수 표현식 함수 표현식 (function expression) : 변수에 할당해서 함수를 선언 // 함수 표현식 const sayHi = function () { console.log('Hi!'); }; 05. 값으로서 함수 - 자바스크립트에서 함수는 값으로 취급 // 변수에 할당해서 활용 const printJS = function () { console.log('JavaScript'); }; // 객체의 메소드로 활용 const codeit..