etc..

1. 전체적인 코드 스타일을 리펙토링 한 이유

배경

기존에는 코드 자체의 _깔끔함_을 중심으로 설계함. 즉, 하나의 페이지에 섹션을 나누고 이에 맞춰 하나하나 컴포넌트를 분리했음.

---

문제점

위 배경처럼 설계를 했지만 페이지, 컴포넌트는 깔끔하지만 폴더와 파일은 많아짐에 따라 더러워지고, 이에따라 depth가 발생함

1. 엄청 많은 폴더 및 파일들이 생성됨.
2. 굳이 나눌 필요 없는 파일들도 분리되어있음. (ex. 하나의 컴포넌트 or 페이지에서 사용하는 훅들)
3. 파일을 나눌수록 깊어지는 depth들...

---

해결 방법

전체적인 코드 스타일 변경 인턴 때 경험을 살려 폴더와 파일 구조 전체적인 변경을 하고자 함.

• 재사용하지 않는 것들은 분리 하지 않음을 중심 (예외도 있음)
• 컴포넌트 import시 경로 최소화 (index, type, component 분리)

1) 최소한의 파일 생성 및 폴더 생성 쓸모없는 섹션 분리 자제

<ChartTop5 tracksList={tracksList} />

->

<section className="lg:mt-24 md:mt-16 mt-12 lg:gap-12 gap-8 lg:mx-auto mx-4 lg:w-fit lg:p-8 md:p-6 p-4 flex md:flex-row flex-col items-center justify-between bg-[#fdfbf7] border-4 border-black shadow-[6px_6px_0px_#000] ">
        <div className=" relative group">
         ...
        </div>
</section>

위 사진처럼 적용하여 props 전달을 최소화하고자 함

---

2) 컴포넌트의 타입 폴더 분리

아무래도 깔끔함을 좋아하기 때문에 타입 파일과 index파일을 생성하여 import 경로 최소화하고자 함

export { default } from './InterviewList';
export * from './types';

export interface InterviewListProps {
  artistName?: string;
  className?: string;
  slice?: number;
}

결과

• 불필요한 파일 / 폴더 삭제
• depth 최소화
• 간단해진 import 경로

Before

• 컴포넌트 단위는 명확했지만 구조가 과도하게 분산됨

After

• 재사용 기준에 맞게 통합하여 구조 단순화 및 의존성 감소