본문 바로가기
반응형

언어68

[js] 콜백지옥 코드 수정 콜백지옥이란? 1. 콜백지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 2. 콜백함수를 이용해서 비동기 로직처리 시, 코드가 깊어지는 것을 말한다. 3. 일반적으로 콜백지옥을 해결하는 방법에는 Promise 나 async & await를 사용하는 방법이 있다. 콜백지옥 -> Promise -> async & await 순서로 수정한다. 콜백지옥 예시 코드) class UserStorage{ loginUser(id, password, onSuccess, onError){ setTimeout(() =>{ if( id === 'kfdd6630' && password === '123' ) { onSuccess(id); } else{ onError(new Error('error.. 2023. 3. 23.
[js] try...catch, finally 정리 try...catch문, finally 블록 정리 1. try...catch문이란? 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정한다. try { // 수행하고싶은 로직을 수행한다. doSomething(); } catch (error) { console.error(error); } 위 코드에서 doSomething() 부분에서 error 발생시 console에 error가 출력된다. 2. try...catch문 문법 try { try_statements } [catch (exception_var) { catch_statements }] [finally { finally_statements }] try_statements: try 블록에서 실행될 선언들이다... 2023. 3. 23.
[js] async & await 정리 async & await 사용방법, useFul Promise APIs(Promise.all(), Promise.race()) async & await란? 1. async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 2. 비동기 방식을 사용함에 있어 Promise보다 명확한 방식이라고 할 수 있다. 3. 비동기 처리 동작은 기본적으로 callback, Promise와 동일하지만 앞 둘의 단점을 보완했다. 1 .async 사용방법 동기적 실행 // 1. Sync function fetchUser() { // 네트워크 응답이 10초 걸린다고 가정한다. return 'userName'; } const user = fetchUser(); console.log(user); con.. 2023. 3. 22.
[js] Promise 정리 Promise정리 [ State, Producer, Consumer(then, catch, finally), Promise Chaining, Error Handling ] Promise란? 1. Promise는 비동기 작업에 대한 javascript 개체이다. 2. Promise는 State라는 상태값을 가지고 Promise 생상부분과 사용부분으로 나눌 수 있다. 3. 비동기 처리 동작은 기본적으로 callback과 동일하지만 단점(콜백지옥)을 보완했다. 1) State state: pending -> fulfilled or rejected (보류 중 -> 이행 또는 거부됨) pending 상태 = 값을 아직 알 수 없을 때 (data가 정확하게 할당되지 않았을 때 등) fullfilled 상태 = 반환.. 2023. 3. 22.
[js] 콜백함수(callback) 콜백함수란? 콜백함수를 매개변수로 받는 함수 만드는 방법, 콜백지옥이란? 콜백함수(Callback function)란? 1. 콜백함수는 다른 함수에 매개변수로 넘겨준 함수를 말한다. (함수에 파라미터로 들어가는 함수) 2. 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출된다. 3. 함수를 순차적으로 실행하고 싶을 때 사용한다. 콜백함수를 매개변수(parameter)로 받는 함수 만드는 방법 예제코드) function sayOne(params){ console.log(1); params(); } function sayTwo(){ console.log(2); } sayOne(sayTwo); 1. sayOne은 콜백함수 필요한 함수 2. sayTwo가 콜백함수이다. 3... 2023. 3. 21.
[js] 코드 최적화 - falsy값, 삼항 연산자, fallback값(nullish값 체크) falsy값 체크, 삼항 연산자, fallback값(nullish값 체크)의 코드 최적화 방법 (클린코드) 1. falsy값 체크 타입스크립트가 아니라 자바스크립트를 사용한다면 꼭 해야하는게 타입 체크이다. 특히, null ,undefined ,0 ,false ,NaN , "" 값을 체크해서 점검해야 할 때가 있다. 논리 부정연산자인 "!" 를 이용하면 쉽게 쓸 수 있다. const isFalsy = (value) => { if ( value === null || value === undefined || value === 0 || value === false || value === NaN || value === "" ) { return true; } return false; }; // 위 코드를 아래와 .. 2023. 3. 12.
[js] 코드 최적화 - 반복문(for-of, for-in), 조건문(if문, switch문) [js] iterable객체의 반복문, if문, switch문의 코드 최적화 방법 (클린코드) * iterable 객체란? 2023.02.18 - [언어/Javascript,TypeScript] - [js] iterable 객체, Array.from [js] iterable 객체, Array.from iterable(반복 가능한) 객체, Array.from 메소드 iterable(반복 가능한) 객체란? 1. 반복 가능한(iterable, 이터러블) 객체는 배열을 일반화한 객체이다. 2. for..of 반복문을 적용할 때 Symbol.iterator를 호출하는 kfdd6630.tistory.com 1. iterable객체의 반복문 배열과 객체의 내부에 접근할 때 단순 for문을 사용하는 것을 지양하고 자바.. 2023. 3. 7.
[js, ts] 함수를 파일로 따로 빼서 정리하는 방법 [JavaScript, TypeScript] 함수를 파일로 따로 빼서 정리하는 방법 만들고 싶은 함수를 정리한 예를 들면 calculator.ts 파일을 만든다. const plus = (number1: number, number2: number): number => { return number1 + number2; }; const minus = (number1: number, number2: number): number => { return number1 - number2; }; const multiply = (number1: number, number2: number): number => { return number1 * number2; }; const divide = (number1: number,.. 2023. 3. 5.
[js] 무작위 날짜 생성하기, 무작위 숫자 생성하기 [Javascript] 무작위 날짜 생성하기, 무작위 숫자 생성하기 1. 무작위 숫자 생성함수(범위) function getRandomNumberRange(min, max) { if(min === max) return ('equal Number'); return Math.floor(Math.random() * (max - min + 1)) + min; } - min이상 max이하인 숫자 생성함수 - min = 1, max = 99일때, 1~99까지 무작위 숫자 반환 - min, max는 숫자(number)여야 하고 다른 값이어야 함 2. 무작위 숫자 생성함수(자리 수 이하) function getRandomNumberDigit(digit) { if(digit < 1) return ('parameter i.. 2023. 2. 21.
[js] iterable 객체, Array.from iterable(반복 가능한) 객체, Array.from 메소드 iterable(반복 가능한) 객체란? 1. 반복 가능한(iterable, 이터러블) 객체는 배열을 일반화한 객체이다. 2. for..of 반복문을 적용할 때 Symbol.iterator를 호출하는 데 iterable한 객체가 아니라면 에러가 발생한다. - Symbol.iterator는 반드시 이터레이터(iterator, 메소드 next가 있는 객체) 를 반환해야 한다. - for..of는 반환된 객체(이터레이터)만을 대상으로 동작한다. - for..of에 다음 값이 필요하면, for..of는 이터레이터의 next()메소드를 호출한다. - next()의 반환 값은 {done: Boolean, value: any}와 같은 형태이어야 한다. -.. 2023. 2. 18.
반응형

티스토리툴바