[Typescript] Typescript 웹 프로젝트 폴더 구조 정리(feat.Redux(리덕스) + 챗GPT)

728x90

이제 요구사항 모두 작성했고, 깃허브 레파지토리, 프로젝트 생성까지 마무리 했습니다.

매번 새로운 프로젝트를 확인할 때 폴더구조를 제일 먼저 보게 되는데 내 프로젝트가 아닌 이상 폴더구조를 파악하는데 시간이 오래 걸리는 편이었습니다. 물론 파악을 하는 하루 종일 걸리는 건 아니었지만, 이게 어디에 있지? 어디서 import한거지?를 찾는 데 투자한 시간이 아깝다고 느껴졌습니다. 그래서 일단 타입스크립트 프로젝트를 생성할 때 어떤 폴더구조를 찾는지 궁금했습니다. 또한 프로젝트에서 Redux(리덕스)도 사용해보고자 하며 폴더구조에 대해 알아보겠습니다.

기본적인 타입스크립트의 폴더 구조

처음 프로젝트를 생성했을 때 볼 수 있는 폴더 구조 입니다.

위와 같이 src/, index.html, package.json, ... 등이 있습니다.

하지만 프로젝트를 진행하게 되면, 페이지별 코드 구별도 해야하고, 컴포넌트도 구별해야하고, 리덕스 정의해두는 폴더, 타입 지정하는 폴더 등이 필요합니다.

** 리덕스 폴더는 Store이라고 합니다! ~~(내가 꼭 기억해야 함...!)~~

어떤 폴더가 있는 지 확인하는 블로그입니다.

https://velog.io/@leejungoo1396/vite-typeScript-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0

vite) typeScript 프로젝트 폴더 구조

1) assets 폴더: 정적 자원을 저장하는 디렉토리 2) axios 폴더: Axios 라이브러리를 사용하여 HTTP 요청을 수행하는 디렉토리 3) components 폴더: 프로젝트에서 사용되는 리액트 컴포넌트들을 보관하는 디

velog.io

그래서 제일 처음 GPT한테 물어봤습니다ㅎㅎㅎ 폴더구조 찾는것도 시간 투자가 아깝기 때문에 최대한 GPT를 사용해보겠습니다! 더 자세하게 알아보고 싶으신 분들은 위 블로그와 아래에 참고링크로 첨부해두겠습니다!

대중적인 폴더 구조

1. 기본적인 프로젝트 폴더 구조

my-project/
├── src/                       # 소스 코드 폴더
│   ├── index.ts               # 메인 엔트리 파일
│   ├── components/            # 컴포넌트 폴더 (컴포넌트 기반의 프로젝트라면)
│   │   └── MyComponent.ts
│   ├── models/                # 데이터 모델 정의 폴더
│   │   └── User.ts
│   ├── services/              # 비즈니스 로직, API 호출 등
│   │   └── ApiService.ts
│   ├── utils/                 # 유틸리티 함수
│   │   └── helpers.ts
│   └── types/                 # 전역 타입 정의
│       └── index.d.ts
├── dist/                      # 컴파일된 JavaScript 파일 (빌드 출력)
├── tests/                     # 테스트 코드
│   └── example.test.ts
├── node_modules/              # 설치된 패키지
├── tsconfig.json              # TypeScript 설정 파일
├── package.json               # 프로젝트 메타데이터 및 의존성
└── README.md                  # 프로젝트 설명 파일

src/: 모든 소스 코드를 포함하는 기본 폴더입니다.
- index.ts: 애플리케이션의 시작점이 되는 파일입니다.
- components/: (선택) 컴포넌트 기반 구조를 사용하는 경우 컴포넌트를 관리합니다. 주로 React와 같은 UI 라이브러리에서 사용됩니다.
- models/: 데이터 구조나 엔티티 모델을 정의합니다.
- services/: API 서비스나 데이터 처리와 같은 비즈니스 로직을 관리합니다.
- utils/: 프로젝트 전반에서 사용되는 재사용 가능한 함수들을 모아 둡니다.
- types/: 전역 타입이나 인터페이스 등을 정의합니다.
dist/: TypeScript가 JavaScript로 컴파일된 파일이 저장되는 폴더입니다.
tests/: 테스트 파일을 포함하며, 파일 이름에 .test.ts 또는 .spec.ts 확장자를 사용하는 경우가 많습니다.
node_modules/: 프로젝트에서 사용하는 패키지가 설치되는 폴더로, package.json에 의해 관리됩니다.
tsconfig.json: TypeScript 컴파일러 옵션을 설정하는 파일입니다.

2. 페이지별로 나누는 폴더 구조

my-project/
├── src/                       
│   ├── pages/                 # 페이지별 폴더
│   │   ├── Home/              # Home 페이지 관련 폴더
│   │   │   ├── Home.tsx       # Home 페이지 컴포넌트
│   │   │   ├── Home.module.css # Home 페이지 스타일 (선택)
│   │   │   └── Home.types.ts  # Home 페이지 타입 정의 (선택)
│   │   ├── About/             # About 페이지 관련 폴더
│   │   │   ├── About.tsx
│   │   │   ├── About.module.css
│   │   │   └── About.types.ts
│   │   └── Contact/           # Contact 페이지 관련 폴더
│   │       ├── Contact.tsx
│   │       ├── Contact.module.css
│   │       └── Contact.types.ts
│   │
│   ├── components/            # 공통 컴포넌트 폴더
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── Button.tsx
│   │
│   ├── assets/                # 이미지, 폰트, 아이콘 등
│   │   └── logo.png
│   │
│   ├── utils/                 # 공통 유틸리티 함수
│   │   └── formatDate.ts
│   │
│   ├── types/                 # 글로벌 타입 정의
│   │   └── global.d.ts
│   │
│   └── index.tsx              # 애플리케이션 진입점
├── public/                    # 정적 파일 (index.html 등)
│   └── index.html
├── dist/                      # 빌드 출력 폴더
├── tests/                     # 테스트 코드
│   ├── Home.test.tsx
│   ├── About.test.tsx
│   └── Contact.test.tsx
├── node_modules/              # 의존성 패키지
├── tsconfig.json              # TypeScript 설정 파일
└── package.json               # 프로젝트 메타데이터

pages/: 각 페이지별 폴더를 생성하고, 페이지와 관련된 컴포넌트, 스타일, 타입 등을 같은 폴더에 저장합니다.
- 예: Home/, About/, Contact/
  - Home.tsx: 페이지 컴포넌트 파일
  - Home.module.css: 해당 페이지에만 적용되는 CSS 파일
  - Home.types.ts: 페이지에서 사용하는 타입들을 정의 (선택)
components/: 여러 페이지에서 재사용할 수 있는 공통 컴포넌트들을 모아둡니다. 예를 들어, Header, Footer, Button 등의 컴포넌트를 여기에 배치합니다.
assets/: 이미지, 폰트, 아이콘 같은 정적 리소스를 모아두는 폴더입니다.

3. 리덕스를 포함한 폴더 구조

my-project/
├── src/
│   ├── pages/                    # 페이지별 폴더
│   │   ├── Home/
│   │   │   ├── Home.tsx          # Home 페이지 컴포넌트
│   │   │   └── Home.module.css   # Home 페이지 스타일
│   │   └── About/
│   │       ├── About.tsx
│   │       └── About.module.css
│   │
│   ├── components/               # 공통 컴포넌트 폴더
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   │
│   ├── store/                    # Redux 상태 관리 폴더
│   │   ├── index.ts              # Redux 스토어 설정
│   │   ├── slices/               # 슬라이스 단위로 상태 관리
│   │   │   ├── userSlice.ts      # 예: 사용자 관련 상태 관리 슬라이스
│   │   │   └── productSlice.ts   # 예: 제품 관련 상태 관리 슬라이스
│   │   ├── actions/              # 액션 생성자 정의 (선택 사항)
│   │   │   ├── userActions.ts
│   │   │   └── productActions.ts
│   │   └── reducers/             # 리듀서 정의 (슬라이스가 아닌 리듀서 사용 시)
│   │       ├── userReducer.ts
│   │       └── productReducer.ts
│   │
│   ├── hooks/                    # 커스텀 훅
│   │   └── useRedux.ts           # Redux 관련 커스텀 훅 (useSelector, useDispatch 래퍼)
│   │
│   ├── utils/                    # 유틸리티 함수
│   │   └── formatDate.ts
│   │
│   ├── types/                    # 전역 타입 정의
│   │   └── global.d.ts
│   │
│   └── index.tsx                 # 애플리케이션 진입점
├── public/
│   └── index.html
├── tests/                        # 테스트 코드
│   ├── Home.test.tsx
│   ├── About.test.tsx
│   └── store/                    # Redux 관련 테스트
│       └── userSlice.test.ts
├── node_modules/
├── tsconfig.json
└── package.json

store/: Redux 관련 상태 관리 로직을 모아두는 폴더입니다.
- index.ts: Redux 스토어를 설정하고 Provider로 애플리케이션에 연결합니다.
- slices/: 기능 단위로 상태를 분리해 createSlice를 사용해 정의한 슬라이스 모음입니다.
- actions/: 액션 생성자를 모아 두는 폴더입니다. createSlice로 만든 경우 별도의 액션 생성자가 필요하지 않지만, 복잡한 경우나 외부 액션이 필요한 경우 여기에 정의할 수 있습니다.
- reducers/: 단순 리듀서가 필요한 경우 여기에 정의합니다. combineReducers를 통해 리듀서를 조합할 수 있습니다.
hooks/: Redux 관련 훅을 포함하여 여러 컴포넌트에서 공통으로 사용할 수 있는 커스텀 훅들을 모아둡니다. 예를 들어, useSelector와 useDispatch를 한 번에 사용할 수 있는 useRedux 훅을 작성할 수 있습니다.

4. 타입도 지정하는 폴더구조

my-project/
├── src/
│   ├── types/                       # 타입 관련 파일들을 모아둔 폴더
│   │   ├── index.d.ts               # 전역 타입 정의 (필요할 경우)
│   │   ├── redux/                   # Redux 관련 타입 정의
│   │   │   ├── store.ts             # Redux 스토어 타입
│   │   │   ├── slices/              # 슬라이스 별 타입 정의
│   │   │   │   ├── userSlice.ts     # user 슬라이스 관련 타입
│   │   │   │   └── productSlice.ts  # product 슬라이스 관련 타입
│   │   ├── api/                     # API 관련 타입 정의
│   │   │   └── userApi.ts           # 예: 사용자 API 데이터 타입
│   │   ├── models/                  # 데이터 모델별 타입 정의
│   │   │   ├── user.ts              # 예: 사용자 모델 타입
│   │   │   └── product.ts           # 예: 제품 모델 타입
│   │   └── common/                  # 공통 타입 정의
│   │       └── index.ts             # 공통 유틸리티 타입 모음
│   │
│   ├── pages/                       # 페이지 관련 컴포넌트
│   ├── components/                  # 공통 컴포넌트
│   ├── store/                       # Redux 스토어
│   ├── hooks/                       # 커스텀 훅
│   ├── utils/                       # 유틸리티 함수
│   └── index.tsx                    # 애플리케이션 진입점
└── tsconfig.json

index.d.ts: 프로젝트에서 사용하는 전역 타입을 정의합니다. 이 파일은 전역 네임스페이스에 필요한 타입을 추가하고, 타입 충돌을 방지하는 데 유용합니다. 전역 타입이 필요한 경우 사용하며, 사용하지 않아도 무방합니다.
types/redux/: Redux 관련 타입을 정의합니다.
- store.ts: Redux 스토어와 관련된 타입, 예를 들어 RootState 및 AppDispatch와 같은 전역 스토어 타입을 정의할 수 있습니다.
- slices/: 슬라이스 별 타입을 정의합니다. 예를 들어 userSlice.ts 파일에 사용자 상태와 액션 타입을 명시할 수 있습니다.
types/api/: 외부 API와의 데이터 교환 시 필요한 타입을 정의합니다. API가 반환하는 데이터 형식을 기준으로 타입을 명시해, API 호출 후 데이터를 더욱 안전하게 처리할 수 있습니다.
types/models/: 데이터 모델의 타입을 정의합니다. 예를 들어, 사용자, 제품 등 데이터 객체와 관련된 타입을 정의하여, 코드에서 이 데이터 객체가 일관된 구조를 가지도록 관리합니다.
types/common/: 공통적으로 사용될 유틸리티 타입을 정의합니다. 자주 쓰이는 타입 유틸리티나 범용 타입을 여기에 모아두고 다른 파일에서 import하여 사용합니다.

현재 생략되어 있지만 넘버링된 내용처럼 GPT한테 물어봤을 때 저렇게 답했습니다.

그래서 알려준 내용과 구글링 했을 때 개발자 분들께서 알려준 방식을 통합해서 저만의 폴더구조를 만들었습니다.

최종 내맘대로 폴더구조

my-project/
├── src/
│   ├── assets/                      # 정적 파일 모음 폴더
│   │   ├── images/                  # 이미지 파일
│   │   ├── icons/                   # 아이콘 파일
│   │   ├── fonts/                   # 폰트 파일
│   │   └── styles/                  # CSS 또는 SCSS 등 스타일 파일
│   │
│   ├── pages/                 # 페이지별 폴더
│   │   ├── Home/              # Home 페이지 관련 폴더
│   │   │   ├── Home.tsx       # Home 페이지 컴포넌트
│   │   │   ├── Home.module.css # Home 페이지 스타일 (선택)
│   │   │   └── Home.types.ts  # Home 페이지 타입 정의 (선택)
│   │   ├── About/             # About 페이지 관련 폴더
│   │   │   ├── About.tsx
│   │   │   ├── About.module.css
│   │   │   └── About.types.ts
│   │   └── Contact/           # Contact 페이지 관련 폴더
│   │       ├── Contact.tsx
│   │       ├── Contact.module.css
│   │       └── Contact.types.ts
│   │
│   ├── components/            # 공통 컴포넌트 폴더
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── Button.tsx
│   │
│   ├── store/                    # Redux 상태 관리 폴더
│   │   ├── index.ts              # Redux 스토어 설정
│   │   └── slices/               # 슬라이스 단위로 상태 관리
│   │       ├── userSlice.ts      # 예: 사용자 관련 상태 관리 슬라이스
│   │       └── productSlice.ts   # 예: 제품 관련 상태 관리 슬라이스
│   │
│   ├── hooks/                    # 커스텀 훅
│   │   └── useRedux.ts           # Redux 관련 커스텀 훅 (useSelector, useDispatch 래퍼)
│   │
│   ├── utils/                 # 공통 유틸리티 함수
│   │   └── formatDate.ts
│   │
│   ├── types/                       # 타입 관련 파일들을 모아둔 폴더
│   │   ├── api/                     # API 관련 타입 정의
│   │   │   └── userApi.ts           # 예: 사용자 API 데이터 타입
│   │   ├── models/                  # 데이터 모델별 타입 정의
│   │   │   ├── user.ts              # 예: 사용자 모델 타입
│   │   │   └── product.ts           # 예: 제품 모델 타입
│   │   └── common/                  # 공통 타입 정의
│   │       └── index.ts             # 공통 유틸리티 타입 모음
│   │
│   └── index.tsx              # 애플리케이션 진입점
├── dist/                      # 컴파일된 JavaScript 파일 (빌드 출력)
├── tests/                     # 테스트 코드
│   └── example.test.ts
├── node_modules/              # 설치된 패키지
├── tsconfig.json              # TypeScript 설정 파일
├── package.json               # 프로젝트 메타데이터 및 의존성
└── README.md

참고

기본적인 폴더 구조 : https://gombach7.tistory.com/39