타입스크립트 파일구조
project-folder
├── src
│ ├── index.tsx
│ ├── App.tsx
│ ├── components
│ │ ├── Component1.tsx
│ │ ├── Component2.tsx
│ │ └── ...
│ ├── pages (optional)
│ │ ├── Home.tsx
│ │ ├── About.tsx
│ │ └── ...
│ ├── styles (optional)
│ │ ├── styles.css
│ │ ├── styled-components.ts
│ │ └── ...
│ └── assets (optional)
│ ├── images
│ │ ├── image1.png
│ │ ├── image2.jpg
│ │ └── ...
│ └── fonts
│ ├── font1.ttf
│ ├── font2.woff
│ └── ...
└── typings (optional)
├── custom.d.ts
└── ...
- src 폴더 :
소스 코드가 포함된 폴더 입니다.
- index.tsx :
애플리케이션의 진입점 역할을 하는 파일로, 보통 React 애플리케이션의 루트 컴포넌트를 렌더링합니다.
- App.tsx :
애플리케이션의 메인 컴포넌트 입니다. 주로 라우팅이나 상태관리 등의 로직을 포함하고, 다른 컴포넌트들을 렌더링합니다.
- components 폴더 :
-재사용 가능한 컴포넌트들이 위치하는 폴더입니다. 각 컴포넌트는 별도의 폴더 안에 파일들로 구성될 수 있습니다.
-컴포넌트의 구조와 동작에 관련된 로직이 포함
- page 폴더 (선택사항) :
페이지 컴포넌트들을 포함하는 폴더입니다. 주로 라우팅되는 각 페이지들의 컴포넌트가 위치 합니다.
- style 폴더 (선택사항) :
-CSS파일이나 CSS-in-JS라이브러리로 작성된 스타일 파일들을 포함하는 폴더 입니다
-스타일은 별도의 스타일 시트 파일(style.css)에서 관리하는 것이 일반적
- assets 폴더 (선택사항) :
이미지 , 폰트 등의 정적 자원들을 포함하는 폴더입니다.
- typings 폴더 (선택사항) :
TypeScript에서 사용되는 타입 정의 파일들을 포함하는 폴더 입니다.
이와 같은 구조는 일반적인 React.js 프로젝트의 구조와 유사하며, TypeScript로 작성된 프로젝트에서도 적용됩니다. TypeScript를 사용하면 타입을 강제할 수 있으므로 코드의 안정성을 높이고 개발 생산성을 향상 시킬 수 있습니다.
