<ziny/>

git push 하기전에 자동으로 build 확인하기

프로젝트를 운영하다 보면, 실수로 빌드가 깨진 코드를 push 하는 경우가 생깁니다.이런 문제를 사전에 방지하기 위해git push 하기전에 build를 자동으로 하도록 처리하는 방법에 대해서 알아보겠습니다. 💡 작업 순서 1. 프로젝트의 루트에서 .git/hooks/pre-push 파일생성 2. pre-push에 코드 추가#!/bin/shnpm run build 3. 터미널에서 실행 권한 부여chmod +x .git/hooks/pre-push git push를 하면 자동으로 npm run build가 먼저 실행됩니다.build에 실패하면 push가 중단되고, 성공해야만 push도 성공합니다. 🔴 마주하는 다양한 에러들 [에러1] pre-push 파일이 안 보이는 경우 🔎 원인: pre-push ..

지난 주에는 zustand의 기본핵심인 createStore에 대해서 알아보았습니다.🎯 이번주 학습목표" 미들웨어 redux.ts 와 subscribewithSelector.ts 파일 분석하기 " Redux 패턴의 zustand의 구현방식에 대해서 알아보고,subscribewithSelector.ts 의 선택적 구독 패턴의 구현방식에 대해서 알아보도록 하겠습니다.🔨 redux.ts의 전체 구조와 주요 설명 zustand는 아주 간단한 상태 관리 라이브러리 이지만,내부적으로 미들웨어를 통해 Redux의 패턴도 지원합니다. ❓ Redux 패턴을 사용하는 이유 1. 상태 변화의 흐름이 명확 Redux의 핵심" 상태는 항상 dispatch -> reducer -> 새로운 상태 " - 상태 변화의 원인을 추..

상태관리 라이브러리 중 하나인 zustand는 많은 프론트엔드 개발자들에게 사랑 받고 있습니다.이번 스터디에서는 그 핵심을 더 깊게 이해하기 위해서,zustand를 싹싹 훑어 보려고 합니다! 🎯 이번주 학습목표" zustand의 내부 로직이 구현되어있는 vanila.ts 파일을 분석하기 " 이 파일은 상태를 생성하고 관리하는 zustand의 핵심 엔진부분입니다.자주 사용하는 crate함수의 바탕이 되는 코드로,파일에 담긴 함수와 인터페이스를 살펴보고 이해해 보도록 하겠습니다🔨 vanila.ts의 전체 구조와 주요 설명 ❓ 상태 생성 원리 - createStoreconst createStore = ((createState) => createState ? createStoreImpl(createSta..

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