티스토리

개발감성

검색하기

블로그 홈

개발감성

developefeel.tistory.com/m

파리외 개발자 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

JS 에러 핸들링 5편 - 에러 객체 커스텀 에러는 생성자를 가지는 객체이기 때문에 얼마든지 객체처럼 다룰 수 있다. 에러 객체 상속 class authenticationError extends Error { constructor(message) { super(message); this.name = "authenticationError"; this.favoriteSnack = "chitos"; } } const a = new authenticationError("cause err"); console.log(a.favoriteSnack); 인증 에러라는 새로운 클래스를 생성하고 Error 객체를 상속받은 후 부모의 멤버변수인 message를 생성자에 집어넣고 커스텀 하고 싶은 속성인 name과 favoriteSnack을 정의했다. 해당 생성자로 생성.. 공감수 0 댓글수 0 2023. 10. 30.
JS 에러 핸들링 4편 - async error handling 일반적인 try catch문은 비동기 코드에선 동작하지 않기에 Promise에서 따로 catch문을 지원한다. 하지만 또다시 async함수로 작성하게 된다면 Promise의 catch가 아닌 일반 try catch문의 문법대로 에러 핸들링을 하게 된다. async함수 내에서 정의된 try catch문은 비동기 오류를 잡아낼 수 있다. (async function () { try { await Promise.resolve("async fail #1"); await Promise.reject("async fail #2"); } catch (err) { console.log(err); } console.log("isnt still good?"); })(); 사용법은 일반 try catch문과 동일하다. try.. 공감수 0 댓글수 0 2023. 8. 9.
JS 에러 핸들링 3편 - promise catch 일반적인 try catch문의 문제는 비동기적 코드에는 대응하지 못한다는 것이다. 그렇기 때문에 Promise에는 비동기만을 위해 지원하는 catch문이 따로 존재한다. Promise catch문 사용법 Promise.resolve("async fail") .then((res) => { throw new Error("#1 fail"); return res; }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); return err; }) Promise에는 정상동작일 때를 위한 then문과 오류처리를 위한 catch문이 존재한다. 첫 번째 then문에서 의도적으로 #1 fail이라는 에러를 생성했고 따라서 두 번째 then문.. 공감수 0 댓글수 0 2023. 7. 31.
JS 에러 핸들링 2편 - catch try catch문 //how catch err in program function fail() { try { consol.log("just do"); // throw new Error("second err"); } catch (error) { console.log("Its,,,fail", error); } } fail(); 위 try문의 console.log메서드를 일부러 오타를 내서 실행시켰다. try가 정상동작하지 않으면 자동으로 catch문으로 넘어가며 catch문은 인자로 에러를 받아서 catch문 내에서 에러인자를 자유롭게 사용할 수 있도록 해준다. try { try { never(); } catch (e) { throw new Error(e); } } catch (e) { console.lo.. 공감수 0 댓글수 0 2023. 7. 29.
JS 에러 핸들링 1편 - Error 생성자 다른 변수와 비슷하게 에러 또한 생성자가 존재한다. 에러 생성자는 다른 생성자와 마찬가지로 new 연산자를 통해 생성이 가능하며 콘솔에 에러 메시지를 지정해서 보여줄 수 있다. throw throw는 프로그램 동작을 멈추게 되는데 에러 생성자는 보통 throw와 함께 사용된다 에러 객체 생성자로 생성된 에러는 객체 형태를 가지는데 에러 객체의 message는 에러 메시지 stack은 에러가 발생한 위치를 알린다. 이 외에 name속성이 기본적으로 있다. function a() { const b = new Error("in a"); return b; } a(); //stack a().stack; 함수 a는 에러 객체를 리턴하며 a를 실행시키면 메시지와 스택이 함께 출력된다. 항상 콘솔에서 보던 에러 메시지.. 공감수 0 댓글수 0 2023. 7. 28.
JS 모듈 4편 - ES6 module CommonJS에 이어서 JS는 모듈 시스템을 ES6에서부터 공식지원한다. //ES6 module import module1 from "module1"; //fight import module2 from "module12"; export function fight(a) { return a; } 모듈을 가져올 때는 import문을 내보낼 때는 앞에 export를 붙여준다. import import는 require과 다르게 파일의 최상단에만 작성해야 한다. 공감수 0 댓글수 0 2023. 7. 25.
JS 모듈 3편 - commonJS & AMD History 코드의 양이 많아짐에 따라 변수명 중복, tight coupling 등의 문제가 생김 script파일을 나눠도 서로 간섭이 가능하여 생기는 side effect가 발생 function scope, IIFE, Closure를 사용해 각 script파일이 개별적인 scope를 보장받도록 하는 module pattern개발 module pattern은 여전히 global scope duplicate, dependency resulution of declared order 등의 문제가 있음 CommonJS, AMD 등의 모듈 시스템 개발 CommonJS // CommonJS var module1 = require("module1"); //.fight var module2 = require("mod.. 공감수 0 댓글수 0 2023. 7. 23.
JS 모듈 2편 - IIFE Module Pattern 이번 글인 모듈패턴을 이해하기 위해서는 즉시실행함수(IIFE)와 Scope, Clusure 개념을 이해하고 있기를 권장합니다. Module Scope Global Scope Module Scope function Scope block Scope Scope는 자신만의 고유의 공간을 가지므로 일반적으로 다른 scope에 영향을 끼칠 수도, 받지도 않는다. 이를 이용하여 모듈 또한 scope를 가지게 만들어서 이름이 겹치거나, tight coupling을 방지할 수 있다. IIFE (function (a) {return a+1}) (a)처럼 함수를 괄호로 감싼 형태로 정의되는 즉시실행함수는 함수이기에 function scope를 가진다. 모듈을 IIFE로 정의하여 자신만의 scope를 가지도록 한다. Clos.. 공감수 0 댓글수 0 2023. 5. 22.
JS 모듈 1편 - 모듈의 필요성 Why do we need modules? Tight Coupling user = {}; function signin(user) { var textfield = "text"; } function isHuman(user) { // ... } // ...more extends // tight coupling 만약 위와 같은 signup과 isHuman이라는 user 인자를 받아서 처리를 하는 두 함수가 있다고 보자, user객체에는 두 함수에 필요한 모든 데이터를 저장할 필요가 있을 것이다. 그리고 user를 사용하는 함수가 계속해서 늘어나면 날수록 coupling은 더 높아지게 된다. user객체를 함부로 수정했다가는 연관되는 함수들에서 파생되는 문제가 커지게 되기 마련이다. 그럼 이 문제를 여러 js파일.. 공감수 0 댓글수 0 2023. 5. 21.
JS 비동기 7편 - job queue 콜백 큐 JS 동작원리 5편 - 런타임 (Event Loop, Callback Queue, 비동기) 지금까지 JS가 V8엔진을 통해 어떻게 기계어로 번역되고 실행되는지 알아봤다. 하지만 JS가 브라우저에서 동작할 때는 다른 얘기가 된다. Node.js 위 사진은 노드 js의 전체 시스템 아키텍처이다. JS developefeel.tistory.com 콜백 큐에 대한 기본적인 내용을 알고 있다는 전제하에 글 작성을 한다. 콜백 큐에는 세 종류의 큐가 있는데, Task Queue, Job Queue, Animation Frame이다. Task Queue //1 Callback Queue - Task Queue setTimeout(() => { console.log("1"); }, 0); //not js, w.. 공감수 0 댓글수 0 2023. 4. 26.
JS 비동기 6편 - allSettled, any allSettled const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 6000)); const promise2 = new Promise((resolve, reject) => setTimeout(reject, 3000)); Promise.all([promise1, promise2]) .then((data) => console.log(data)) .catch(() => console.log("err")); promise 두 개중 하나는 6초 뒤 성공, 하나는 3초 뒤 실패를 하도록 세팅하고 all을 사용해 promise를 실행시키면 catch문만 실행된다. //allSettled Promise.allSettled([promise1, .. 공감수 0 댓글수 0 2023. 4. 18.
JS 비동기 5편 - parallel, race, sequencial parallel, race, sequencial은 promise 다중처리를 할 때의 정책이다. promise 다중처리 //3 promise const promisify = (item, delay) => new Promise((resolve) => setTimeout(() => resolve(item), delay)); const a = () => promisify("a", 100); const b = () => promisify("b", 5000); const c = () => promisify("c", 3000); api통신들이 시간차를 두고 도착하는 것을 명확하게 보이기 위해서 promise를 setTimeout에 의해 실행되도록 했다. parallel //parallel async function .. 공감수 0 댓글수 0 2023. 4. 13.
JS 비동기 4편 - for await of ES9에서 추가된 for await of는 비동기 처리 반복문이다. const urls = [ "https://jsonplaceholder.typicode.com/users/1", "https://jsonplaceholder.typicode.com/users/2", "https://jsonplaceholder.typicode.com/users/3", "https://jsonplaceholder.typicode.com/users/4", ]; //for await of const getData = async () => { try { const [one, two, three, four] = await Promise.all( urls.map(async (url) => { const res = await fetc.. 공감수 0 댓글수 0 2023. 4. 12.
JS 비동기 3편 - finally ES9에서 추가된 finally는 promise가 모두 실행된 후 마지막으로 무조건 실행을 시켜주는 기능을 한다. (결과의 성공, 실패에 영향 없음) //finally const urls = [ "https://jsonplaceholder.typicode.com/users/1", "https://jsonplaceholder.typicode.com/users/2", "https://jsonplaceholder.typicode.com/users/3", "https://jsonplaceholder.typicode.com/users/4", ]; Promise.all( urls.map((url) => { return fetch(url).then((peaple) => peaple.json()); }) ) .then.. 공감수 0 댓글수 0 2023. 4. 10.
JS 비동기 2편 - async async await async함수는 ES8부터 비동기처리를 위해 만들어진 함수 형식이다. //async await ES8 fetch("https://jsonplaceholder.typicode.com/users") .then((res) => res.json()) .then(console.log); async function fetchUsers() { const res = await fetch("https://jsonplaceholder.typicode.com/users"); const data = await res.json(); console.log(data); } fetchUsers(); fetch는 response를 promise객체 형태로 리턴한다. 일반 함수에 async를 붙이고 api통신을 기.. 공감수 0 댓글수 0 2023. 3. 20.
JS 비동기 1편 - Promise Promise promise는 비동기에서 사용되는 연산으로, 리턴하는 프로미스 객체는 대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. 세 가지 형태 중 하나로 나타난다. resolve, reject const promise = new Promise((resolve, reject) => { if (true) { resolve("Worked"); } else { reject("Error"); } }); 프로미스에 성공 시 수행할 연산을 암묵적으로 resolve라 하고 실패 시 수행할 연산을 암묵적으로 reject라 한다. promise는 성공을 하면(resolve가 실행되면) fulfilled 상태.. 공감수 0 댓글수 0 2023. 3. 18.
FP vs OOP 함수형 프로그래밍 operation이 많고 fixed data(회사의 사업자 등록 번호나 제품의 시리얼 번호 등) 서버와 독립적인 stateless pure declerative, 직관적인 코드 객체지향형 프로그래밍 operation이 적고 common data(고객의 이름이나 주소 등) 서버와 연관된 stateful side effect imperative, 절차에 집중된 코드 OOP - inheritance //Inheritance > what it is //tight coupling //fragile base class problem class Parent { constructor(name) { this.name = name; } sleep() {} } class Child1 extends pare.. 공감수 0 댓글수 0 2023. 3. 16.
JS FP 9편 - 함수형 프로그램 FP FP 패러다임으로 프로그램이 어떻게 작성되는지에 대한 예시코드다. UseCase //shopping const user = { name: "Kim", active: true, cart: [], purchase: [], }; let amzHistory = []; //Shopping usecase // 1. Add items to cart // 2. Add 3% tax to item in cart // 3. Buy item: cart --> purchase // 4. Empty cart // 5. Accept refunds // 6. Track user history 사용자 객체에는 이름, 활성여부, 장바구니, 구매내역이 있다. 상품을 장바구니에 담을 수 있다. 담긴 상품은 3%의 부가세가 부과된다. .. 공감수 0 댓글수 0 2023. 3. 15.
JS FP 8편 - 함수 합성(Compose, Pipe, Arity) Compose //Compose //data >> fn >> data >> fn >> data const compose = (f, g) => (data) => f(g(data)); const multiplyBy3 = (num) => num * 3; const makePositive = (num) => Math.abs(num); const multiplyBy3AndAbsolute = compose(multiplyBy3, makePositive); multiplyBy3AndAbsolute(-50); multiplyBy3은 3을 곱해주는 함수이다. makePositive는 절댓값으로 변경해 주는 함수다. compose는 커링기법으로 두 함수 f와 g를 인자로 먼저 받고 데이터를 이후에 받아서 먼저 받은 두 함.. 공감수 0 댓글수 0 2023. 3. 13.
JS FP 7편 - Memoization Memoization 메모이제이션은 함수의 동일 동작을 반복해서 처리하지 않고 저장하여 불필요한 반복행위를 방지하는 것이다. function addTo5(n) { console.log("calculation..."); return n + 5; } addTo5(5); addTo5(5); addTo5(5); 함수를 실행할 때마다 매번 같은 연산을 실행한다. //only one time calculation function memoizedAddTo5() { let cache = {}; return function (n) { if (n in cache) { return cache[n]; } else { console.log("calculation..."); cache[n] = n + 5; return cache.. 공감수 0 댓글수 0 2023. 3. 12.
JS FP 6편 - 부분 적용 함수(Partial Application) 부분 적용과 커링의 차이 커링 //Currying const add = (a, b, c) => a + b + c; const curriedAdd = (a) => (b) => (c) => a + b + c; curriedAdd(1)(2)(3); //currying expect one arg at time 커링은 한 번에 하나의 인자를 전달하는 것이 원칙이다. 또한 마지막 인자가 완성되기까지 원본함수인 add는 대기한다. 부분적용 //Partial Application const add = (a, b, c) => a + b + c; const partialAdd5 = add.bind(null, 1); partialAdd5(2, 3); //second call expect all the arg 부분 적용은 호.. 공감수 0 댓글수 0 2023. 3. 11.
JS FP 5편 - 함수형 프로그래밍의 핵심기술(Hof, clusure, currying) HOF - 고계함수 JS 클로저 3편 - HOF(고계함수, Higher Order Function) HOF hof는 여러 상황에 유동적으로 대응할 수 있는 일반화된 함수를 말한다. 기본적인 함수가 전편에서 설명했던 first class의 기능을 가질 때 HOF로 만들어질 수 있다. 로그인 기능을 예시로 HOF를 만 developefeel.tistory.com //HOF const hof = () => () => 5; hof()(); const hoF = (fn) => fn(5); hoF(function a(x) { return x; }); 고계함수는 함수를 인자로 받고 함수를 리턴한다. 위 코드에서 hof는 인자로 받은 함수에 5라는 인자를 전달하여 리턴한다. 그리고 전달된 함수 a는 인자값을 그대로 리.. 공감수 0 댓글수 0 2023. 3. 10.
JS FP 4편 - 불변성(Immutability) JS의 불변성 불변성이란 함수등의 동작을 거쳐도 대상이 되는 변수의 값이 변하지 않는 것을 의미하며 side effect의 중요성이 있는 FP에서는 불변성을 지키는 편이 좋다. const obj = { name: "Kim" }; obj.name = "Park"; 객체 obj가 있을 때 name 속성을 park로 바꿀 수 있다면 obj는 불변성이 지켜지지 않는 것이다. const는 재할당이 불가능하다, 하지만 그게 불변성이 지켜진다는 것은 아니다. //Immutability const obj = { name: "Kim" }; function clone(obj) { return { ...obj }; //this is pure } function updateName(obj) { const obj2 = clon.. 공감수 0 댓글수 0 2023. 3. 9.
JS FP 3편 - 선언형과 명령형(Imperative vs Declarative) 객체 지향 프로그래밍은 명령형 프로그래밍이다. 함수형 프로그래밍은 선언형 프로그래밍이다. 깊게 파고들어 간다면 위처럼 단정 지을 수 없지만 OOP와 FP의 차이를 이해하기 위해서는 이렇게 이해해도 무방하다고 생각한다. 친구와 약속을 잡은 상황에서 친구는 먼저 약속장소에 도착했고 나에게 기다리는 장소를 알려주는 상황이다. 명령형 - How 버스에서 내려서 앞으로 120미터 직진 후 우측 82도 각도로 회전하여 40미터 직진하면 내가 기다리는 장소야! 선언형 - What 올리브 영에서 기다리고 있을게! 명령형은 어떻게 프로그램의 절차를 밟아가는지에 집중했다고 볼 수 있다. 위 예시에서 기다리는 장소로 오기 위해서 해야 할 절차를 설명하고 있다. 선언형은 무엇을 원하는지에 집중했다. 위 예시에서 장소를 알려주.. 공감수 0 댓글수 0 2023. 2. 20.
JS FP 2편 - 참조 투명성과 멱등성(Idempotence) 함수형 프로그래밍에서 참조 투명성을 가진다는 것은 함수의 결괏값이 예측이 가능하다는 것을 의미한다. //Idempotence function notGood(num) { return Math.random(num); //인자에 영향받지 않는 다른 결과 console.log(num); //인자에 영향받는 같은 결과 } notGood(5); notGood이라는 함수에 어떤 인자를 넣어도 랜덤값을 출력한다. 5를 인자로 아무리 넣어도 항상 랜덤한 값을 출력하며 100을 인자로 전달해도 랜덤값을 출력한다. 이 함수는 인자에도 영향을 받지 않고 결과를 예측할 수 없으며 이런 함수를 참조 투명성을 가지지 않는다.(결과 예측 불가능) 순수합수다.(외부의 어떤 값을 변화시키지는 않음) 멱등성을 가지지 않는다.(차후 설명).. 공감수 0 댓글수 0 2023. 2. 19.
JS FP 1편 - side effect 함수의 사이드 이펙트 함수의 side effect는 함수를 동작시키면서 함수 외부에서 무언가를 변화시키는 것을 의미한다. //side effect //input -> output const array = [1, 2, 3]; function mutateArray(arr) { arr.pop(); } mutateArray(array); console.log(array); mutateArray함수는 side effect를 일으킨다. 해당 함수에 인자로 전달된 배열인 array는 함수가 동작하면 pop으로 인해 변화하기 때문이다. function mutateArray2(arr) { arr.forEach((item) => { arr.push(1); }); } mutateArray2(array); console.lo.. 공감수 0 댓글수 0 2023. 2. 16.
JS OOP 6편 - 다형성(Polymorphism) 다형성이란 상황의 변화에 따라 유연하게 대응하는 성질이다. JS OOP의 다형성 //Polymorphism class Animal { constructor(name) { this.name = name; } attack() { return "attack with " + this.weapon; } } class Cat extends Animal { constructor(name, nail) { super(name); this.weapon = nail; } } const naby = new Cat("Naby", "sharp nail"); naby.attack(); 동물 클래스를 상속하는 고양이 클래스는 이름과 공격 외에 무기 속성을 별도로 가지고 있다. 그리고 고양이 나비는 발톱을 이용해 공격한다. class.. 공감수 0 댓글수 0 2023. 2. 15.
JS OOP 5편 - Class private 문법(#) ES2022부터 클래스에 private도입이 정식스펙으로 도입되었다. Private 이전엔 IIFE 등으로 클래스 내부의 자원을 외부로부터 개입하지 못하도록 막았지만 이제는 #을 통해 private으로 설정하면 변수와 메서드를 외부에서 접근하지 못하도록 할 수 있다. //ES2022 private class class Employee { #name = "Test"; //private field constructor(name) { this.#setName(name); //ok } #setName(name) { //private method this.#name = name; } sayName() { return this.#name; } } const emp = new Employee("New"); //ok .. 공감수 0 댓글수 0 2023. 2. 14.
JS OOP 4편 - extends(JS 클래스 상속) JS의 OOP에서는 extends를 통해 상속을 구현하고 부모클래스의 구성요소를 자식요소가 가져다 쓸 수 있도록 한다. 상속이 필요한 경우 class Elf { constructor(name, weapon) { this.name = name; this.weapon = weapon; } attack() { return "attack with" + this.weapon; } } const fiona = new Elf("Fiona", "ninja stars"); const ogre = { ...fiona }; console.log(ogre); ogre.__proto__; //empty obj console.log(fiona === ogre); //false ogre.attack(); //not func err.. 공감수 0 댓글수 0 2023. 2. 13.
JS OOP 3편 - this 바인딩(new, implicit, explicit, arrow) OOP의 new연산자 this 바인딩 JS에서 클래스를 사용한 OOP방식의 코드작성에는 new 연산자를 사용해 this값을 생성되는 인스턴스에 바인딩해서 this가 인스턴스를 가리키게끔 한다. 그 외에 this를 바인딩하는 방식들이 JS에는 여러 개 존재한다. Default JS는 lexical scope를 기본적으로 따르지만 this를 계산할 때는 dynamic scope방식을 따른다. 따라서 실행 익스큐션의 this value는 작성된 위치에서 계산되는 것이 아닌 실행하는 global객체를 기본적으로 가리키게 된다. new binding //new binding this function Person(name, age) { this.name = name; this.age = age; } const pe.. 공감수 0 댓글수 0 2023. 2. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.