본문 바로가기

JavaScript/javascript 기초 공부하기

JavaScript/javascript 기초 공부하기 2020. 12. 6. javascript - requestAnimationFrame requestAnimationFrame setInterval을 대체 할 수 있는 함수로써 백그라운드의 동작및 비활성화상태일때 중지를 하며 1초에 60번 동작 내부의 동일한 타이머를 사용한다. 취소 sample 함수내 requestAnimationFrame 을 통해 sample을 호출 하기 때문에 무한 루프로 돌게 된다. 따라서 setInerval과 유사하게 동작한다.
JavaScript/javascript 기초 공부하기 2020. 5. 5. prototype, class 비교하기 동일한 기능을 하지만 유지보수에 용이한 리팩토링 function fullstack(backend, frontend) { this.backend = backend; this.frontend = frontend; fullstack.prototype.getBackend = () => this.backend; fullstack.prototype.setBackend = () => (this.backend = backend); fullstack.prototype.getFrontend = () => this.frontend; fullstack.prototype.setFrontend = () => (this.frontend = frontend); } const Fullstack = new fullstack('javas..
JavaScript/javascript 기초 공부하기 2020. 5. 2. javascript 객체지향을 위한 class 생성하기 javascript는 함수형프로그래밍, 객체지향형 프로그래밍 두가지 모두 가능한 멀티 패러다임 언어이다. javascript에서도 java와 같이 class를 생성하여 생성자 생성및 그 안에 함수들을 선언하는것이 가능하다 또한 extends를 통해 확장해나갈수 있다. 'use strict'; // 캐시를 관리하기위해 //캐시매니저 혹은 db매니저를 관리하기위해 주로 class를 사용한다. class cacheManager { //생성자 //비동기 문법을 사용할 수 없다 constructor() { this.config = []; } addConfig(obj = {}) { this.config.push(obj); } getConfig() { return this.config; } } module.expor..
JavaScript/javascript 기초 공부하기 2020. 5. 2. 커링 함수 currying function Currying은 여러 개의 인자를 가진 함수를 호출 할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법을 말한다. 즉 커링은 함수 하나가 n개의 인자를 받는 과정을 n개의 함수로 각각의 인자를 받도록 하는 것이다. 커링함수 구현에 대해 생각해보았다. 1. 먼저 기초 구현 메소드를 작성한다 (간단한 할인율 계산 함수) 2. 할인율을 바인딩 해둔 cur 함수를 구현한다 3. 실행 //커링함수를 구현해보자 //1. 할인을 구현하는 메소드를 작성하기 //2. 퍼센트를 집어넣고 고정시키는 cur메소드 작성 //3. 실행 const getDiscount = (price, rate) => price * rate; const getTenpercentOff = 0.1; ..
JavaScript/javascript 기초 공부하기 2020. 5. 2. every, some, Set, startsWith, includes, endsWidth every 렌더링시에 조건을 만족하는 경우에 자주쓰는 every 모든 조건을 충족해야 true가 반환된다 const arr = [2, 3, 4]; const isBiggerThenOne = arr.every(key => key>1); console.log(isBiggerThenOne); // true some 하나의 조건만 충족해도 true를 반환한다 const arr = [1, 2, 0, -1, -2]; const res = arr.some((key) => key < 0); console.log(res); // true Set Set은 중복되지 않은 자료구조이다, const test = new Set(); test.add(1); test.add(1); test.add(2); test.add(2); te..
JavaScript/javascript 기초 공부하기 2020. 1. 26. async / await Promise를 더욱 쉽게 사용할수 있게 해준다 함수를 선언할때 async를 붙여주고 promise의 앞부분에 await를 붙여주면 해당 프로미스가 끝날떄까지 기다렸다가 작업을 수행한다 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function process() { console.log('안녕하세요!'); await sleep(1000); // 1초쉬고 console.log('반갑습니다!'); } process(); 또한 함수에서 async를 사용하면 결과값으로 Promise를 반환한다 즉 then이 사용 가능해진다 function sleep(ms) { return new Promise(resol..
JavaScript/javascript 기초 공부하기 2020. 1. 25. callback hell, Promise 함수안에 인자로 함수를 넣어주는걸 반복하는걸 callback 다섯번째 걸쳐서 1초마다 1씩 더해주는 코드를 setTimeout으로 구현하기 위해서는 해당과 같은 작업을 해야한다 function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); } }, 1000); } increaseAndPrint(0, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { cons..
JavaScript/javascript 기초 공부하기 2020. 1. 25. spread, rest 문법 spread 연산자 ... 을 활용한 연산자 ...slime 을 하면 해당 내용이 담긴다 const slime = { name: '슬라임' }; const cuteSlime = { ...slime, attribute: 'cute' }; const blueCuteSlime = { ...cuteSlime, color: 'blue' }; console.log(slime); console.log(cuteSlime); console.log(blueCuteSlime); 배열에서도 사용 가능하다 const animals = ['개', '고양이', '참새']; const anotherAnimals = [...animals, '비둘기']; console.log(animals); console.log(anotherAnim..

티스토리툴바