전체 글68 [함수형 코딩] 계층형 설계 - 직접 구현 함수형 코딩에서는 4개의 계층형 설계 패턴을 소개한다. 직접 구현, 추상화 벽, 작은 인터페이스, 편리한 계층 중 이번 글에서는 직접 구현에 대해 다루려고 한다.직접 구현 패턴이 뭘까?앞서 간단히 소개한대로, 직접 구현은 계층형 설계 패턴의 한 종류이다. 하지만 챕터8을 읽으며 "왜 직접 구현이라고 했을까?"라는 의문이 계속 들었다. 전체적으로 읽으며 정리해본 결론은 다음과 같다.함수가 수행하는 작업을 코드에서 직접적으로 확인할 수 있다.추상화가 따로 없기 때문에 코드의 의도가 명확하게 보인다.함수 내부에서 모든 로직을 직접 제어하는 것이 가능하다.호출 그래프를 통한 계층 구분호출 그래프를 통해 함수의 계층들을 시각화함으로써, 직접 구현 패턴이 잘 지켜지고 있는지를 점검할 수 있다. 코드를 구성하는 함수.. 2025. 4. 2. [함수형 코딩] 데이터 불변성을 위한 카피온라이트, 방어적 복사 불변성을 지켜야 하는 이유?데이터를 가공하는 과정에서 예상치 못한 변화를 막기 위해자바스크립트에서 객체와 배열을 할당하는 변수는 참조값을 가진다. 참조에 의해 복사가 일어나기 때문에 string, number와는 다르게 복사했을 때 독립적이지 않다. 즉, 만약 객체 A를 새로운 변수 B에 할당 했다고 했을 때, A와 B는 동일한 참조를 가지게 되어 B 객체의 value만을 변경했다고 하더라도 A 객체에까지 영향을 미치게 된다. 자바스크립트를 처음 공부했을 때는 이 개념이 많이 헷갈렸어서, 간단한 예제를 준비했다. 아래 예시를 확인하면 좀 더 어떤 말인지 더 와닿을 거라고 생각한다.const soyoon = {name: '소윤', age: '28'}const soyoon2 = {name: '소윤', age.. 2025. 3. 26. [시나브로 자바스크립트] History API와 SPA 라우팅 History APIHistory API를 사용하면 브라우저 세션 기록에 접근이 가능하고, 이를 조작할 수 있다.history.back(); // 뒤로가기 버튼이랑 동일하게 동작한다.history.forward(); // 앞으로가기 버튼이랑 동일하게 동작한다.history.go() // 현재 페이지를 새로고침history.go(-1) // 현재 페이지 기준 1페이지 이전history.go(2) // 현재 페이지 기준 2페이지 이후history.pushState(); // 지정된 경로와 데이터를 브라우저 세션 기록 stack에 추가한다.history.replaceState(); // 지정된 경로와 데이터를 브라우저 세션 기록 stack의 가장 최근 항목에 업데이트 한다.history.pushState(st.. 2025. 3. 21. [함수형 코딩] 더 나은 액션 만들기 이전 글인 '액션, 계산, 데이터란?'에서, 액션을 잘못 사용했을 경우 전체 코드에 액션이 퍼질 수 있고 테스트가 어려워질 수 있다고 이야기 했었다. 하지만 그렇다고 액션이 나쁘고 불필요한 것은 아니다. 오히려 액션이 있어야 동작하는 웹을 구현할 수 있는만큼 액션은 필요하다. 때문에 우리는 좋은 액션을 만들기 위해 노력해야 한다.비즈니스 요구 사항과 설계를 맞추기예시로 살펴보는 것이 가장 이해가 잘 된다. 아래 예시를 보면 gets_free_shipping이라는 함수가 있다. 이 함수는 장바구니에 담긴 제품을 주문할 때 무료 배송인지 확인하는 역할을 한다. 하지만 인자로 장바구니를 넘기는 것이 아닌, 제품의 총합과 가격으로 확인하고 있다. 때문에 이 부분은 요구 사항과 맞추기 위해 장바구니를 인자로 받도.. 2025. 3. 19. [시나브로 자바스크립트] Monorepo란? 몇 년 전부터 모노레포에 대한 이야기가 계속 나오고 있고, 채용 공고에서도 지원 자격이나 우대 사항에 모노레포와 관련된 내용이 종종 보이곤 한다. 모노레포가 어떤 것이고 어떤 장점이 있기 때문에 이야기가 나오는 것인지, 한번 정리해보기로 했다. 모노레포란?다수의 프로젝트를 한 개의 레포 안에서 관리하는 개발 전략 모노레포를 구성하기 위해 다음과 같은 방법을 사용할 수 있다.TurboRepoNxLerna모노레포를 통해 해결할 수 있는 점협업 시 유리 : 한 레포에서 관리하기 때문에 여러 사람이 여러 서비스에 보다 간편하게 접근할 수 있다.관리 및 개발 생산성에 유리 : 코드 컨벤션이나 lint 규칙을 통일하여 관리할 수 있기 때문에 관리에 유용하며, 이러한 점 외에도 코드 재사용이 증가하며 개발 생산성 또.. 2025. 3. 14. [함수형 코딩] 액션, 계산, 데이터란? 프론트엔드에서 클린 코드를 고민했을 때, 코드 개선에 실질적인 도움이 되었던 부분이 액션 함수와 순수 함수에 대한 개념이었다. 기존에 짠 코드들을 봤을 때, 순수 함수는 거의 존재하지 않았고, 대부분의 함수가 액션 함수였다. 물론 액션 함수가 있어야 웹에서 기능을 구현할 수 있지만, 순수 함수가 거의 없는 프로젝트는 각각의 함수가 여러 기능을 담당하게 되면서 가독성이 떨어졌고 이로 인해 전반적인 흐름을 이해하기도 쉽지 않았다. 이를 깨닫고 순수 함수를 최대한 분리하고 난 후, 이전보다 코드가 많이 개선되었던 기억이 있다. 그래서 함수형 프로그래밍에 대해 조금 더 딥하게 공부해 보고자 '쏙쏙 들어오는 함수형 코딩' 스터디를 시작했다.이어지는 내용은 1~3 챕터까지를 읽으며 핵심이라고 생각한 액션, 계산, .. 2025. 3. 12. 이전 1 2 3 4 ··· 12 다음 반응형
