harubanbo 님의 블로그

그러면 이런 이슈들은 언제 어디서 확인할 수 있지?Peer Dependency 경고는 보통 패키지 설치 시점에 확인할 수 있다.예를 들어 pnpm install 등을 실행하면 패키지 매니저가 peer dependency 관련 문제를 알려준다.WARN Issues with peer dependencies foundpackages/next└─┬ next-intl 3.5.0 └── ✕ unmet peer next@^14.0.0: found 15.0.0이런 peer dependency 이슈는 보통 빌드가 아니라 설치 시점에 먼저 드러난다.다만 패키지 매니저나 설정에 따라 단순 경고로 끝날 수도 있고, 설치가 실패할 수도 있다.설치가 되었다고 해서 무조건 안전한 것도 아니다. 빌드는 성공할 수도 있고, 런타임..

가끔씩 패키지 업데이트를 하는 경우 종종 문제가 있어서 정리차원에서 남긴다.Breaking Change브레이킹 체인지는 패키지나 모듈을 업데이트했을 때 기존 코드가 더 이상 정상 동작하지 않게 되는 변경사항을 의미한다.예를 들어 패키지 A가 v1에서 v2로 업데이트되면서 다음과 같은 변경사항이 생겼다고 해보자.함수 이름이 변경됨함수의 매개변수가 달라짐기존에 있던 기능이 deprecated되거나 사라짐반환값의 형태가 변경됨기존 사용 방식이 더 이상 지원되지 않음프로젝트 코드가 v1 기준으로 작성되어 있었다면, v2로 업데이트했을 때 기존 코드가 깨질 수 있다. Semantic Versioning(SemVer) 기준으로는 버전을 MAJOR.MINOR.PATCH 형태로 표현한다. 이 중 기존 버전과 호환되지 ..

구조분해 할당, 전개 연산자, 나머지 연산자 정리구조분해 할당, 전개 연산자, 나머지 연산자는 객체나 배열의 값을 더 쉽게 꺼내거나 복사할 때 자주 사용된다.이름이 비슷하고 ... 문법도 같이 사용되다 보니 처음에는 헷갈릴 수 있다.코드 보다가 가끔씩 헷갈려서 단순 정리용으로 남기는 글이다.1. 예제 객체아래는 예제에서 사용할 객체다.const a = { aa: 1, bb: 2, cc: 3, ss: { aaa: 1, bbb: 2 } };a 객체는 aa, bb, cc, ss 속성을 가지고 있다.그리고 ss 속성의 값은 다시 객체다.{ aaa: 1, bbb: 2}2. 구조분해 할당구조분해 할당을 사용하면 객체나 배열의 값을 변수로 바로 꺼낼 수 있다.const { aa, bb, cc, ss } = a;c..

git worktree로 브랜치별 작업 디렉토리 분리하기보통 Git 저장소를 clone하면 하나의 .git 디렉토리와 하나의 워킹 디렉토리를 가지고 작업한다. 이 디렉토리 안에서 브랜치를 바꾸고, 파일을 수정하고, 스테이징하고, 커밋하는데 일반적인 작업 흐름은 아래와 비슷하다.git checkout maingit checkout -b feature/a# 작업git checkout maingit checkout -b feature/b# 작업문제는 하나의 디렉토리 안에서 브랜치를 계속 바꿔가며 작업한다는 점이다. 예를 들어 feature/a 브랜치에서 아직 커밋하지 않은 작업을 하고 있는데, 갑자기 main 기준으로 급한 수정이 필요할 수 있다. 이때 보통은 stash 기능을 사용한다.git stashgit..

pnpm 버전을 업데이트했는데도 pnpm -v를 찍어보면 예전 버전이 나오는 경우가 있다. 터미널을 껐다 켜도 동일한 이슈가 발생하는데 pnpm의 경우에는 내부 corepack과 시스템 설정 우선순위가 달라서 살펴볼 필요가 있다. 시스템에 pnpm이 여러 개 설치되어 있을 수 있고, Corepack을 사용 중이라면 실제로 실행되는 pnpm이 내가 생각한 것과 다를 수 있다.정리용으로 남기는 글이다.1. 먼저 현재 잡히는 pnpm 확인하기가장 먼저 할 일은 현재 터미널에서 어떤 pnpm이 실행되는지 확인하는 것이다.pnpm -v 현재 실행되는 pnpm 버전을 확인한다.which pnpm 현재 pnpm 명령어가 어느 경로의 실행 파일을 보고 있는지 확인한다.type -a pnpm type -a pnpm은 현..

React에서 Context 개념이 정리용으로 요약해서 남기는 글이다.1. 컨텍스트란?React Context는 props drilling 문제를 해결하기 위한 기능이다.상위 컴포넌트가 데이터를 제공하면, 하위 컴포넌트는 props로 전달받지 않고 직접 사용 가능핵심 3요소: createContext → Provider → useContextContext 사용 방식에는 useContext 훅을 사용하는 방법과 Consumer라는 것을 사용하는 방법이 있으나 함수형에서는 useContext가 사실상 표준으로 Consumer는 클래스 컴포넌트나 일부 조건부 렌더링 같은 특수 케이스에서만 쓴다고 한다.2. 기본 사용 예제import { createContext, useContext } from 'react';..

FSD 적용 중 주의점UI의 큰 재사용 블록 widget만약 모든 페이지에 공통적으로 쓰이는 헤더 UI가 있다고 가정해보자, 이 헤더 UI를 모든 페이지에 구현하는 것은 비효율적이므로 재사용 로직으로 분리하고 싶을 것이다. 이미 shared라는 코드 재사용에 용이한 레이어를 알고있지만 shared 레이어에 큰 UI 블록을 넣는 것은 주의할 점이 있다.UI 블록이 크더라도 단순 API 호출 등 내부 구현 로직이 굉장히 간단하면 문제가 없으나 서로 다른 도메인의 데이터를 가져와서 UI 구성요소를 구현해야하는 복잡한 경우에는 보통 features나 entities 레이어에 관련 요소들이 위치할 것이다. 레이어 참조 제약 조건에 따라서 shared 레이어는 상위 레이어인 features나 entities의 요소..

슬라이스와 세그먼트슬라이스는 레이어 내부를 비즈니스 도메인 별로 나눈다. 슬라이스의 역할은 제품, 비즈니스, 애플리케이션 관점에서 서로 관련 있는 코드를 하나로 묶는 것이다. 그러므로 슬라이스 이름은 고정된 규칙이 없고 수에 제한도 없으며 애플리케이션의 비즈니스 도메인에 맞춰 정한다. 이 규칙이 응집도는 높이고 결합도는 낮추는 장점이 있다.사진 갤러리: photo, effetcts, gallery-page소셜 네트워크: post, comments, news-feed참고로 shared 레이어는 비즈니스 로직이 전혀 없으므로, 제품 관점에서 슬라이스로 나눌 의미가 없다. app 레이어 또한 애플리케이션 전체를 다루기 때문에, 여기서 다시 슬라이스로 나눌 필요가 없다.슬라이스는 다른 슬라이스와 최대한 독립적(..

1. 엔티티 간 관계와 상호작용원칙적으로는 엔티티 슬라이스끼리는 서로를 모르는 상태가 이상적이다. 하지만 실제 애플리케이션에서는 한 엔티티가 다른 엔티티를 포함하거나 여러 엔티티가 서로 상호작용하는 일이 자주 발생한다. 이런 경우 두 엔티티 간의 구체적인 상호작용 로직은 상위 레이어(features, pages 등등)로 올려서 처리하는 것이 좋다.만약 한 엔티티의 데이터 안에 다른 엔티티가 포함되어야 한다면 @x cross-import 표기법을 사용해서 교차 public API를 통해 연결되었음을 명시해야 한다.import type { Song } from "entities/song/@x/artist";export interface Artist { name: string; songs: Arra..

현재 프론트 아키텍처 중 얘기가 많이 나오는 FSD 아키텍처에 대해 숙지할 필요가 있어서 FSD 공식문서를 읽고 두 번에 걸쳐서 내용을 정리할 예정이며 본 포스팅은 FSD 아키텍처의 기본적인 개념에 대해 정리하고 두 번째에서 FSD를 쓰면 무엇이 좋은지 주의할 점은 없는지 좀 더 세부적인 내용을 기록할 예정이다.1. 개요FSD (Feature-Sliced Design) 는 프론트엔드 애플리케이션 코드를 구조화하기 위한 아키텍처 방법론이다. 이 방법론은 요구사항이 바뀌어도 코드 구조가 무너지지 않고, 새 기능을 쉽게 추가할 수 있는 프로젝트를 만드는 것으로 FSD가 얼마나 많은 책임을 가지는지, 다른 모듈에 얼마나 의존하는지에 따라 계층화한다.2. 당장 적용할 필요가 있는가?단순 라이브러리보다 웹, 모바..