Vue 3에서 Redux-Saga 패턴 구현하기: Pinia + Composable로 복잡한 비동기 처리 마스터하기

프론트엔드 개발을 하다 보면 Redux-Saga라는 용어를 종종 듣게 됩니다. 특히 React 개발자들 사이에서 많이 사용되는데, Vue 개발자라면 "이게 뭐지? Vue에서도 쓸 수 있나?" 하고 궁금해하실 텐데요.오늘은 Vue 3 환경에서 Redux-Saga의 핵심 패턴을 구현하는 방법을 상세히 알아보겠습니다. Pinia와 Composable을 활용한 실전 예제까지 포함되어 있으니, 끝까지 읽어보시기 바랍니다!Redux-Saga란 무엇인가?Redux-Saga는 Redux 애플리케이션의 사이드 이펙트(비동기 처리, API 호출 등)를 관리하기 위한 라이브러리입니다.주요 특징:제너레이터 함수 기반의 선언적 비동기 처리복잡한 비동기 플로우 제어 가능테스트하기 쉬운 구조세밀한 사이드 이펙트 관리핵심 패턴:ca..

• format_list_bulleted 프로그래밍/Js
• · 2025. 5. 30.
• textsms

[ES6] async/await 완벽 가이드: 비동기를 동기처럼 다루는 방법

Promise, async, await란 무엇인가?JavaScript의 비동기 프로그래밍을 이해하기 위해서는 세 가지 핵심 개념을 알아야 합니다.개념 설명Promise비동기 작업의 결과를 나중에 받을 수 있게 하는 객체async함수를 비동기로 선언하며, 항상 Promise를 반환awaitPromise의 결과가 준비될 때까지 기다림 (async 함수 내부에서만 사용 가능)왜 async/await를 사용해야 할까?비동기 코드의 흐름은 순차적이지 않기 때문에 처리 순서를 명확히 하기 위해 Promise와 async/await를 사용합니다.예를 들어, 다음과 같은 순서로 작업해야 하는 경우:// 서버에서 사용자 정보 가져오고, 가져온 정보로 다시 요청해야 함getUserId() → getUserData(id) ..

• format_list_bulleted 프로그래밍/Js
• · 2025. 5. 30.
• textsms

Array.reduce 여러가지 사용 사례

사례 1 사용: 숫자 합산reduce()의 가장 간단한 사용 사례 중 하나는 여러 숫자를 합산하는 것입니다.정수 배열이 있고 총합을 구하고 싶다고 가정해 보겠습니다.// 반복문 사용const numbers = [1, 2, 3, 4, 5];let sum=0;for(let i=0; iacc+curr, 0);console.log(sum);와우! 코드 한 줄만으로 배열의 모든 요소의 합을 계산했습니다.어큐뮬레이터의 초기 값은 0으로 설정되고 각 반복에서 현재 요소를 어큐뮬레이터에 추가합니다.시작 값을 제외하기로 선택하면 reduce는 배열의 첫 번째 항목만 사용합니다.하지만 저는 항상 초기 값을 포함하는 경향이 있어서 읽기가 더 쉽습니다.사용 사례 2: 배열 평면화여러분은 여러 배열을 보면서 "이걸 하나의 배열..

• format_list_bulleted 프로그래밍/Js
• · 2024. 8. 27.
• textsms

es6 옵셔널 체이닝 에 대해 ?. 샘플 OCP

디자인 패턴의 OCP 를 공부하다 기록해 놓습니다. 아래와 같은 코드가 있습니다. const aa = 't'; if(aa == 't') console.log('ooo'); else consolelog('xxx'); 아주 단순한 코드죠 위 코드를 라우팅 테이블과 라우터로 변경해봅니다. const resultProcess = { table: { "true": () => { console.log('ooo'); }, "false": () => { console.log('xxx'); }, }, router(input) { return this.table[input == 't']?.(input); } }; resultProcess.router('t'); OCP 를 흉내내기 위해서 아주 간단한 코드로 작성했습니다. ..

• format_list_bulleted 프로그래밍/Js
• · 2023. 8. 31.
• textsms

[ES6] 템플릿 메소드 패턴 예제

상속을 이용한 템플릿 메소드 패턴 예제 다형성을 이용하여 load() 메소드 호출시 각각 자식의 _load() 메소드가 호출된다. 다형성 = 내적일관성 + 대체가능성 // 공통 부분 const Order = class { #id; #name; constructor(name) { this.#name = name; } getName() { return this.#name; } load() { const content = "[공통] 부모 > 자식변수 [content]"; this._load(content); // 위임 부분 } _load(v) { throw "override"; } // HOOK } const ord1 = class extends Order { constructor() { super("자식 >..

• format_list_bulleted 객체지향
• · 2022. 5. 9.
• textsms

초보자를 위한 vue 개발 ES6 문법 4개

1. 화살표 함수 // 일반 함수 function(v1, v2) { return v1 + v2 } // 화살표 함수 const test = (v1, v2)=>{ return v1 + v2 } console.log(test(1,2)); // 3 // 화살표 함수 (인자없을때) const test =_=>{ } 2. 템플릿 리터럴 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다. ` 백틱을 사용합니다. `string text` const test =_=>{ return `Hello ${this.name} ` } 3. 모듈..

• format_list_bulleted 프로그래밍/vue
• · 2021. 12. 21.
• textsms