<zinny/>

지난 주에는 비동기 흐름과 타임라인 다이어그램을 통해 함수의 실해 순서를 어떻게 관리리할지를 배웠다. 이번 주에는 함수형 프로그래밍 스타일로 아키텍처를 설계하면 뭐가 좋은지에 대한 답을 내보겠다! 📌 반응형 아키텍처란?말 그대로, 무언가에 반응한다 라는 흐름이다.효과와 그 효과에 대한 원인을 분리해 코드의 복잡한 부분들 풀어내는 방식이다. 📌 예시 (일반적인 아키텍처) 핸들러 함수가 너무 많은 책임을 지고 있다.장바구니 업데이트, 계산, 화면 갱신까지 모두 몰려 있는 구조다.let shopping_cart = {};const add_item_to_Cart=(name, price)=>{ const item = make_cart_item(name, price); shpiing_cart = add_..

지난 주에 타임라인 다이어그램이라는 개념을 읽었다.비동기 환경에서 작업 순서를 시각화 하는 이 다이어그램은,흐름을 이해하고 문제를 디버깅 하는데 유용한 친구였다. 하지만 단순히 다이어그램만 그린다고 문제가 사라지는 것은 아니다. 이번 주에는 그 흐름을 어떻게 제어할 것인가,즉 실제 문제를 해결하는 방법에 대해서 정리할 것이다.⁉️ 자바스크립트에 큐 자료구조가 없다?사실 나도 처음 알았다. 자바스크립트에는 Queue라는 내장 자료구조가 없다. 큐 자료구조는 간단하게 설명하면 선입선출(FIFO)을 의미하는데,다행히 배열 메서드로 선입 선출 방식의 큐를 흉내낼 수 있다.const queue = [];queue.push("A"); // 데이터 넣기queue.push("B");console.log(queue.sh..

시간의 흐름을 따라가는 타임라인타임라인이란 말 그대로 시간에 따른 순서를 의미한다. 그런데 함수형 코딩에서는 이 타임라인이 단순한 순서를 넘어, 버그를 발견하고, 흐름을 설계하는 도구로 사용되기도 한다는데..! 타임라인 다이어그램?-> 시간에 따른 액션의 실행순서를 시각적으로 표현한 도구이다. 각 이벤트가 언제, 어떤 순서로 처리되었는지 확인 가능하다. 다이어그램을 그리면 의외로 많은 버그를 발견하게 되는데, 특히나 비동기 흐름에서 발생하는 버그의 원인을 시각적으로 파악하는데 큰 도움이 된다. 📌 타임라인은 순서를 보장하지 않는다. 제대로된 다이어그램 없이 생각에 의존해 코드를 짜다보면,타임라인의 순서를 오해해 다음과 같은 문제가 발생한다.어떤 요청은 먼저 시작했지만 늦게 끝난다.짧은 작업은 오래걸리고..

지난번에는 함수 하나를 잘 ~ 만드는 법 ( 일급함수 ) 에 대한 내용을 다뤄봤다이번 주에는 그 잘 ~ 만든 함수를 어떻게 조립할 수 있을지에 대해서 이야기해보려 한다. 책에서는 이를 함수형 도구 체이닝 이라고 부르는데,여기에는 고차 함수 라는 강력한 무기가 있다.체이닝 " 고차 함수들로 구성된 함수형 도구들의 연결 방식 " 함수형 도구 체이닝이 무엇일까?우리는 이미 .filter(), .map(), .reduce() 같은 체이닝을 매일 사용한다위 같은 함수들을 줄줄이 연결해 데이터 흐름을 구성하는 방식을 함수형 도구 체이닝 이라고 한다. 📌 예시const emails = users .filter(u => u.active) .map(u => u.email) .join(', '); 🔷 이런 ..

지난 주차에는 계층형 설계에 대해서 이야기 나눴다.이번 주는 책의 흐름이 한번 바뀌는 파트로 일급 함수에 대해서 이야기하도록 하겠다. 일급 함수(First-Class-Function)함수형 프로그래밍에 대해서 공부하다 보면 계속 등장하는 단어가 있다.바로 일급 함수(First-Class-Function) 자바스크립트에서 "함수는 값이다"라는 말은, 함수를 숫자나 문자열처럼 변수에 담고, 전달하고, 리턴할 수 있다는 것이다. 이렇게 다룰 수 있는 함수는 일급 함수라고 부른다. 뭔말인지 모르겠으니 예시를 만들어보았다. 📌 예시// 값으로 다룰 수 있다. const add1 = a => a + 2;// 변수에 담을 수 있다const greet = () => console.log("hi");// 함수의 인..

지난주에는 계층형 설계의 기본 구조와 직접 구현 패턴에 대해 이야기했었다. 이번엔 그 흐름을 이어서,코드를 더 명확하고 안전하게 만들기 위한세 가지 설계 패턴을 정리해보려고 한다! 1️⃣ 추상화의 벽 (Abstraction Barrier)상위 계층은 하위 계층의 구현 세부사항을 몰라도 동작할 수 있어야 한다는 원칙 즉, 하위 함수가 어떻게 작동하는지는 몰라도,“그 기능이 어떤 의미를 갖는지만 알고” 사용할 수 있어야 한다. 📌 예시function getActiveUsers(users) { return users.filter(user => user.active);}function getUserEmails(users) { const active = getActiveUsers(users); // ✅ 의미..

소프트웨어 설계: 코드를 만들고 테스트하고, 유지보수하기 쉬운 프로그래밍 방법을 선택하기 위해 미적 감각을 사용하는 것추상적 계층: 구체적인 코드에서 멀어지고 무엇을 할지만 보여주는 상위 레벨의 설계 단위이다. 소프트웨어 설계를 위한 미적 감각을 키우기 위해서는 계층형 설계라는 것을 사용하면 좋다고 책에서 제안하고 있다. 계층형 설계(stratified design)란?책에서는 소프르웨어를 계층으로 구성하는 기술로,각 계층에 있는 함수는 바로 아래 계층에 있는 함수를 이용해 정의하는 방법 이라고 설명하고 있다.  이렇게만 읽으면 물음표 같으니 쉽게 설명하면,"복잡한 문제를 처리할 때는 한번에 처리 하지 않고, 의미 단위로 계층을 나눠서 설계하자"는 것이다. 🔹 그래서 계층은 어떻게 나누는데?Low-Le..

함수형 코딩책에서 사용하는 개념어들은 이렇게 바꿔서 생각하면 쉽다.액션 -> 부수효과 , 계산 -> 순수함수, 데이터 -> 불변성 이번에 읽은 챕터에서는 더 다양한 이야기를 하고 있지만,책을 읽으면서 가장 중요하다고 생각되는 불변성과 그에 따른 복사 개념들을 정리해 보려고 한다. 책에 있는 내용과 내가 찾아본 내용을 추가해 작성했다! 🚀 불변성은 왜 중요할까? 책에서 액션을 줄이는것 만큼이나 중요한 것은 불변성을 유지하는 것이 중요하다고 말하고 있다.  불변성이란 말 그대로, 값을 바꾸지 않고 새 값을 만든다는 것인데 예를 들면, 📌 가변 방식const arr = [1, 2, 3];arr.push(4); //원본이 바뀜const user = { name: 'Lee', age: 30 };user.age..

🚀 프로그래밍에서 액션과 계산이란? 버그의 대부분은 예측할 수 없는 동작 에서 발생된다.특히나 외부 상태를 변경할때 우리가 의도하지 않은 결과가 나올 수 있다. 함수형 프로그램밍은 액션은 최소화, 계산은 최대화 하는 방식으로코드를 더 예측 가능하고, 유지보수하기 쉽게 만든다.  함수형 코딩책에서 사용하는 개념어들은 이렇게 바꿔서 생각하면 쉽다.액션 -> 부수효과 , 계산 -> 순수함수, 데이터 -> 불변성 🚀 계산 이란? - 동일한 입력 -> 동일한 결과를 반환- 외부 상태를 변경하지 않는다. - 암묵적 입력과 출력이 없는 함수 📌 잘못된 예let total = 0;function addToTotal(value) { total += value; // 외부 상태(total)를 변경 ❌ return..

지난 회사에서 XML로 작성된 코드를 React로 변경하는 업무를 진행하면서, 리팩터링 작업에 대한 고민을 굉장히 많이했다.리팩터링의 가장 중요한 포인트는 ' 결과의 변경 없이 코드의 구조를 재조정 하는 것 ' 인데,특히나 작업시 가장 고민되었던 포인트는 ' 어떤 기준으로 코드를 재 조정할껀데? ' 였다. 위 책을 통해 그 고민에 대한 답을 찾을 수 있을 것 같아서 스터디를 시작하게 되었다.  WEEK1에서는 액션, 계산, 데이터의 구분에 대한 내용을 다뤘다.액션, 계산, 데이터함수형 프로그래밍에서는 코드를 액션, 계산, 데이터로 나눈다.액션계산데이터실행 시점과 횟수에 의존 = 부수효과, 부수효과가 있는 함수, 순수하지 않은 함수 ex) 이메일 보내기, DB읽기입력으로 출력을 계산, 호출 시점이나 횟수에..