[React] Recommended Folder Structure for a React + TypeScript Project

React와 TypeScript를 함께 사용할 때 유지보수성과 확장성을 높일 수 있는 권장 폴더 구조를 소개합니다. 각 폴더의 역할과 구성 이유를 상세히 설명하여, 프로젝트를 체계적으로 관리하고 싶은 개발자에게 실질적인 가이드를 제공합니다.

my-project/
├── public/                 # Static files (index.html, favicon, etc.)
├── src/                    # Main source code
│   ├── assets/             # Static resources (images, fonts, styles)
│   │   ├── images/
│   │   ├── icons/
│   │   ├── fonts/
│   │   └── styles/
│   ├── components/         # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   ├── pages/              # Page-level components (routing targets)
│   │   ├── Home/
│   │   │   ├── Home.tsx
│   │   │   ├── Home.module.css
│   │   │   └── Home.types.ts
│   │   ├── About/
│   │   └── Contact/
│   ├── store/              # State management (Redux, Zustand, etc.)
│   │   ├── index.ts
│   │   └── slices/
│   │       ├── userSlice.ts
│   │       └── productSlice.ts
│   ├── hooks/              # Custom React hooks
│   │   └── useAuth.ts
│   ├── utils/              # Utility functions
│   │   └── formatDate.ts
│   ├── types/              # Global type definitions
│   │   ├── api/
│   │   ├── models/
│   │   └── common/
│   ├── models/             # Business/domain logic (optional)
│   └── index.tsx           # App entry point
├── tests/                  # Unit/integration tests
├── dist/                   # Build output
├── node_modules/           # Dependencies
├── package.json
├── tsconfig.json
└── README.md

React와 TypeScript 프로젝트에서 폴더 구조를 잘 설계하는 것은 유지보수성과 확장성에 매우 중요합니다.

주요 특징과 이유

  • src/: 모든 소스 코드를 한 곳에 모아 관리합니다.
  • components/: 여러 페이지에서 재사용하는 UI 컴포넌트를 모아둡니다.
  • pages/: 라우팅 단위가 되는 페이지 컴포넌트를 폴더별로 분리해 관리합니다. 각 페이지 내에 컴포넌트, 스타일, 타입 정의를 함께 둬서 모듈화합니다.
  • store/: Redux나 Zustand 같은 상태관리 라이브러리 관련 코드를 모아둡니다. 슬라이스별로 세분화해 관리하기 편리합니다.
  • hooks/: 커스텀 훅을 별도 폴더로 분리해 재사용성을 높입니다.
  • utils/: 날짜 포맷팅, API 호출 함수 등 범용 함수들을 모아둡니다.
  • types/: 전역 타입이나 API 응답 타입, 데이터 모델 타입을 체계적으로 관리합니다.
  • assets/: 이미지, 아이콘, 폰트, CSS/SCSS 등 정적 리소스를 분리해 관리합니다.
  • tests/: 테스트 코드를 별도로 관리해 테스트 유지보수가 쉽도록 합니다.

왜 이렇게 구성할까?

  • 확장성: 프로젝트가 커져도 폴더별 역할이 명확해 유지보수가 쉽습니다.
  • 모듈화: 페이지별, 기능별로 코드를 분리해 협업에 유리합니다.
  • 재사용성: 공통 컴포넌트와 훅을 분리해 중복 코드를 줄입니다.
  • 가독성: 타입 정의와 스타일을 컴포넌트나 페이지 폴더 안에 두어 관련 파일을 한눈에 찾기 쉽습니다.

프로젝트의 규모가 작은경우는?

작은 프로젝트라면 src/ 내에 components/, pages/, utils/ 정도만 두고 시작해도 충분합니다. 프로젝트가 커질수록 위 구조처럼 세분화하는 것이 좋습니다.

필요하면 실제 예시 코드와 함께 폴더별 역할, 네이밍 규칙도 알려드릴 수 있습니다. 궁금한 점 있으면 언제든 질문해 주세요!

요약

  • .tsx 파일은 React 컴포넌트용, .ts 파일은 일반 TS 코드용
  • src/ 폴더 아래에 components/, pages/, store/, hooks/, utils/, types/, assets/ 폴더를 둠
  • 각 폴더는 역할별로 코드와 리소스를 분리해 관리
  • 확장성과 유지보수를 고려한 구조가 중요

 

Happy GoSu ~

WooGong ))*

\\\\\\\\\\\\\\\\

[PYTHON] requirements.txt 파일 쉽게 만드는 방법: 설치된 패키지 목록 저장

pip freeze 명령어로 현재 설치된 Python Package 목록을 requirements.txt 파일로 쉽게 저장하는 방법을 소개합니다.

Python 프로젝트를 진행하다 보면, 현재 설치된 Package 목록을 다른 환경에서도 똑같이 재현하고 싶을 때가 많습니다. 이럴 때 가장 많이 사용하는 방법이 바로 requirements.txt 파일을 만드는 것입니다. 이번 글에서는 현재 설치된 Package들을 requirements.txt 파일로 저장하는 방법과, 작업 시 유의할 점들을 정리해보았습니다.


requirements.txt란 무엇인가요?

requirements.txt는 Python 프로젝트에서 필요한 Package와 그 Version을 기록해 두는 표준 파일입니다. 이 파일을 통해 다른 개발자나 서버에서도 동일한 환경을 손쉽게 구축할 수 있습니다.


설치된 Package 목록 저장하는 가장 쉬운 방법

1. pip freeze 명령어 사용

가장 기본적이고 널리 쓰이는 방법은 pip freeze 명령어를 활용하는 것입니다. 아래와 같이 터미널(명령 프롬프트)에서 입력하면 됩니다.

pip freeze > requirements.txt

이 명령은 현재 환경에 설치된 모든 패키지와 버전을 requirements.txt 파일에 한 줄씩 기록합니다. 나중에 이 파일을 이용해 동일한 환경을 쉽게 복원할 수 있습니다.


2. 가상환경에서 실행하면 더 깔끔해요

불필요한 패키지가 포함되는 것을 막으려면, 가상환경(venv, conda 등)을 먼저 만들고 필요한 패키지만 설치한 뒤 위 명령어를 실행하는 것이 좋습니다. 이렇게 하면 프로젝트에 꼭 필요한 패키지만 포함된 requirements.txt 파일을 만들 수 있습니다.


3. requirements.txt로 패키지 설치하기

requirements.txt 파일이 준비되었다면, 다른 환경에서 아래 명령어로 손쉽게 패키지를 설치할 수 있습니다.

pip install -r requirements.txt

추가 팁

  • pip freeze는 Package명과 Version을 “Package==Version” 형식으로 저장합니다.

  • 일부 Package는 다운로드 주소가 포함될 수 있으니, 필요에 따라 파일을 확인해보세요.

  • pip list 명령어도 있지만, 이 방법은 사람이 보기엔 좋으나 requirements.txt로 바로 사용하기엔 적합하지 않습니다.


마무리

requirements.txt 파일은 Python 프로젝트의 협업과 배포, 환경 재현에 꼭 필요한 도구입니다. 위 방법을 활용해 프로젝트 관리에 도움을 받아보세요!

Happy GoSu ~

WooGong ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\