[React] 디렉토리 구조를 세팅해보자!

본 포스팅은 React + TypeScript + Vite 로 프로젝트 세팅하기 를 읽고왔다면 이어서 보면 되는 포스팅이다.

이제 위와 같이 기본적인 템플릿이 들어가 있는 디렉토리 구조를 볼 수 있을 것이다.

그렇지만 나는 프로젝트 시작에 앞서서 컴포넌트와 스타일, 그리고 아이콘이나 이미지가 들어갈 폴더를 구분 짓고 싶었다.

1. 필요한 디렉토리를 src 내부에 생성

이전 포스팅에서 절대 경로를 설정했던 폴더를 그대로 사용하고자
icon, image를 보관할 assets 폴더,
각종 컴포넌트를 보관할 components 폴더,
그리고 스타일 관련 코드를 보관할 styles 폴더를 src 폴더 하위에 생성했다.

이전에 절대 경로를 설정하기 위해서 Vite + TypeScript 프로젝트일 경우 tsconfig.json 과 vite.config.ts 파일에 모두 절대 경로 설정을 해줘야 한다고 했는데, assets 폴더의 절대 경로가 현재 설정되어 있지 않으므로 추가해주도록 하자.

tsconfig.json

 "compilerOptions": {
    "baseUrl": ".",

    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@styles/*": ["src/styles/*"],
      "@assets/*": ["src/assets/*"], // 추가
    },
  },

vite.config.ts

import react from '@vitejs/plugin-react'
import * as path from 'path'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname,'./src'),
      '@components': path.resolve(__dirname,'./src/components'),
      '@styles': path.resolve(__dirname,'./src/styles'),
      '@assets': path.resolve(__dirname,'./src/assets'), // 추가
    }
  }
})

2. 빈 폴더는 git 커밋 시 추적 되지 않으므로 기본 파일 생성

큼직한 폴더를 생성했다면 이제는 임시로 빈 파일을 생성해주도록 하자.

기본적으로 git 커밋은 빈 폴더를 추적하지 않기에 원격저장소에 커밋하게 될 경우 1번 단계까지만 하고 커밋해버리면

원격저장소에는 폴더 자체가 없는 현상이 벌어진다 😅

그렇기에 원하는 이름으로 tsx 파일이나 ts 파일을 새로 생성한 폴더 내에 만들어보자.

폴더 내에 파일이 1개만 존재할 경우 index.tsx로 명명해도 무관하나 그냥 내 맘대로 작명했다.

3. 자세한 폴더 구조 구축하기

1, 2번 단계까지 해놓아도 얼추 처음의 날 것에서는 조금 탈출한 기분이 든다!

하지만 이렇게만 해서는 뭔가 파일들이 엄청나게 늘어날 것만 같은 기분이 든다. 🤣

여기서 부터는 각자의 취향과 편의에 따라 많이 달라지는 부분이기 때문에 자유롭게 고민하고 구축하는 것이 좋을 것이다.

나는 업무와 개인 프로젝트를 하면서 가장 편리했던 방법으로 구조를 구축하려 한다.

위의 구조를 설명해보겠다.

우선, 컴포넌트 폴더 안에 큼직하게 분류될 또 다른 컴포넌트가 있을 테니 대략적으로 작명하여 폴더를 생성해준다.

그리고 기본 파일을 생성해주면 끝!

이렇게 하는 이유는 나중에 컴포넌트의 수가 많아질수록 디렉토리가 복잡해질 가능성이 매우 높기 때문에

미리 직관적인 이름을 지어 폴더로 생성해둔다면 보다 편리하게 작업할 수 있기 때문이다.

물론 지금은 예시로 Header와 Footer의 2가지의 폴더만 만들어 두었지만, 필요에 따라 개발하면서 다른 폴더도 추가할 수 있다.

한 눈에 원하는 코드를 찾기 쉽고 깔끔하게 정리된 형태여서 위와 같은 정리법(?)을 선호하게 되었다.

마무리

어차피 디렉토리 구조는 개인의 성향과 팀의 필요에 의해 맞춰지는 부분이라 가이드라인이 필요 없을 수 있다.

하지만 개인 프로젝트나 연습 삼아 무언가 만들어 볼 때 이런 방법을 익혀두면 보다 편리하게 개발할 수 있을 것이다.

-끝