Co-location 이란?

프론트에서 co-location(코로케이션) 은 관련된 코드들을 물리적으로 같은 위치(같은 디렉토리)에 함께 두는 설계 방식을 의미한다.

예시

기존 방식이 이렇다면

components/
  Button.tsx
hooks/
  useButton.ts
style/
  Button.module.css
utils/
  ButtonUtils.ts

co-location 방식

components/
  button/
    Button.tsx
    useButton.ts
    Button.module.css
    ButtonUtils.ts

기능 수정 시 파일 찾는 비용 감소

관련 로직이 가까이 있어 이해가 쉬움

프로젝트가 커질수록 폴더 구조가 자연스럽게 확장됨

너무 큰 컴포넌트나 재사용성이 높은 유틸의 경우 분리하는게 더 나을 수 도 있다.

해당 코드가 이 기능에 강하게 종속되어있는지를 기준으로 삼고 분리하는것이 이상적

도메인 중심(Domain-driven) 구조와의 차이점

도메인 중심 구조 안에서 코로케이션을 적용하는 구조가 많다.