개발42 [함수형 코딩] 중복 코드를 없애는 방법: 암묵적 인자 드러내기 암묵적 인자란?이전에 '[함수형 코딩] 더 나은 액션 만들기' 글을 통해 암묵적 입출력에 대해 다룬 적이 있다. 이번에는 '암묵적 인자'라는 말이 나왔는데, 어떤 의미일까?const getUserName = (user) => user['name'];const getUserEmail = (user) => user['email'];const getUserAge = (user) => user['age'];위와 같은 함수가 있다고 했을 때, 이 함수들은 서로 함수명과 읽어올 key 다를 뿐, 전체적인 형태가 동일하다. 함수 이름을 보면 key를 결정하는 문자열이 함수명에 포함되어 있다는 것을 확인할 수 있는데, 이런 상황을 보고 함수 이름에 암묵적 인자가 있다고 할 수 있다. 구분하고자 하는 값을 인자로 직접 .. 2025. 4. 7. 내가 겪은 CSS 스타일링 전략의 변화와 고민들 🤔 프론트엔드 개발을 하면서 다양한 프레임워크와 CSS 전략을 선택하고 경험해 왔다. 각 전략은 프론트엔드 CSS의 트렌드, 그리고 특정 시점의 필요나 프로젝트 상황에 따라 선택되었고, 그 안에서 여러 시행착오와 고민이 있었다. 이 글에서는 CSS 경험 과정을 돌아보고, 현재 관심이 있는 CSS와 앞으로의 방향성을 정리해보고자 한다. CSS-in-JS와의 첫 만남: styled-components처음 React를 사용했을 때는 styled-components를 즐겨 사용했다. 컴포넌트 파일 내에서 함께 선언할 수 있어 구조가 명확했고, 각각의 스타일을 마치 하나의 컴포넌트처럼 다룰 수 있어 직관적이었다. 특히 props를 기반으로 조건부 스타일을 줄 수 있어 유연하게 대응할 수 있었다. 하지만 프로젝트 규모.. 2025. 4. 6. [함수형 코딩] 계층형 설계 - 직접 구현 함수형 코딩에서는 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. 이전 1 2 3 4 ··· 7 다음 반응형
