프로젝트 별 이상적인 파일 구조 (csr,ssr)

정관훈·2023년 5월 10일

#. 이상적인 폴더 구조

1. React(csr) 프로젝트

my-react-app/
  ├── public/
  │   ├── index.html
  │   ├── favicon.ico
  │   └── ...
  ├── src/
  │   ├── components/
  │   │   ├── App.js
  │   │   ├── Header.js
  │   │   ├── Sidebar.js
  │   │   └── ...
  │   ├── pages/
  │   │   ├── Home.js
  │   │   ├── About.js
  │   │   ├── Contact.js
  │   │   └── ...
  │   ├── assets/
  │   │   ├── images/
  │   │   │   ├── logo.png
  │   │   │   └── ...
  │   │   ├── styles/
  │   │   │   ├── main.css
  │   │   │   └── ...
  │   │   └── ...
  │   ├── utils/
  │   │   ├── api.js
  │   │   ├── helpers.js
  │   │   └── ...
  │   ├── App.js
  │   ├── index.js
  │   └── ...
  ├── package.json
  ├── package-lock.json
  ├── .gitignore
  └── ...

위의 구조에서는 일반적으로 public 폴더는 정적인 자원을 저장하는 곳입니다. 이 폴더에는 index.html과 같은 엔트리 포인트 파일, favicon, 이미지 및 기타 정적 파일이 포함될 수 있습니다.

정적인 파일 구조인 public

외부에서 접근 가능: public 폴더의 내용은 웹 서버에서 정적으로 제공되기 때문에 외부에서 접근 가능합니다. 이는 이미지, CSS 파일, JavaScript 파일 등의 정적 리소스를 직접 URL을 통해 로드할 수 있다는 의미입니다.
빌드 과정에서 복사: React 프로젝트의 빌드 과정에서 public 폴더의 내용은 그대로 복사됩니다. 이는 빌드된 애플리케이션의 최종 결과물에 반영되는 것을 의미합니다.
변경 사항 반영: public 폴더의 내용은 웹 서버에 직접 저장되므로, 개발자가 public 폴더에 있는 파일을 수정하면 해당 변경 사항은 즉시 반영됩니다. 이는 개발 중인 React 애플리케이션에서 빠르게 정적인 자원을 수정하고 확인할 수 있다는 장점을 제공합니다.
주의 사항: public 폴더 내의 파일은 바로 접근 가능하기 때문에, 민감한 정보나 보안에 취약한 내용을 포함해서는 안 됩니다. 또한, public 폴더 내에서 직접적으로 파일 경로를 참조하는 경우, 경로 변경에 대한 유연성을 잃을 수 있으므로 주의해야 합니다.

즉. 정적인 구조인 public 폴더는 웹 애플리케이션에서 필요한 정적 자원을 관리하고 외부에 공개하는 역할을 합니다.

소스 코드를 저장하는 src

components 폴더: 재사용 가능한 React 컴포넌트를 저장합니다. UI 요소를 캡슐화하고, 애플리케이션의 동적인 부분을 구현합니다.
pages 폴더: 각 페이지에 해당하는 React 컴포넌트를 저장합니다. 여러 하위 컴포넌트를 조합하여 해당 페이지의 레이아웃과 동작을 구성합니다.
utils 폴더: 유틸리티 함수, 헬퍼 함수, API 클라이언트 등을 저장합니다. 프로젝트 전체에서 공통적으로 사용되는 로직을 구현하고 코드의 재사용성과 유지 보수성을 향상시킵니다.
assets 폴더: 이미지, 스타일 시트, 폰트 등의 자원을 저장합니다. 컴포넌트에서 필요한 자원에 대한 경로를 참조하는 데 사용됩니다.
index.js: 애플리케이션의 엔트리 파일로, React 애플리케이션의 루트 컴포넌트를 렌더링하는 역할을 합니다.

2. Next(ssr) 프로젝트

my-next-app/
  ├── pages/
  │   ├── index.js
  │   ├── about.js
  │   ├── contact.js
  │   └── ...
  ├── components/
  │   ├── Header.js
  │   ├── Sidebar.js
  │   └── ...
  ├── styles/
  │   ├── globals.css
  │   └── ...
  ├── public/
  │   ├── images/
  │   │   ├── logo.png
  │   │   └── ...
  │   └── ...
  ├── utils/
  │   ├── api.js
  │   ├── helpers.js
  │   └── ...
  ├── next.config.js
  ├── package.json
  ├── package-lock.json
  ├── .gitignore
  └── ...

SSR 프로젝트의 페이지 구성

pages/: Next.js에서 페이지를 정의하는 디렉토리입니다. 각 파일은 개별 페이지를 나타냅니다. 예를 들어, index.js는 홈 페이지를 나타냅니다. 파일 이름은 해당 페이지의 URL 경로와 일치합니다.
components/: 재사용 가능한 React 컴포넌트를 포함하는 디렉토리입니다. 페이지에서 사용할 컴포넌트들을 이 디렉토리에 생성합니다.
styles/: 전역 CSS 스타일 파일 및 관련 파일들을 포함하는 디렉토리입니다. globals.css와 같은 파일을 이 디렉토리에 위치시킬 수 있습니다.
public/: 정적 파일 (이미지, CSS 파일 등)을 저장하는 디렉토리입니다. 서버 및 클라이언트에서 접근 가능한 파일이 위치합니다.
utils/: 유틸리티 함수, API 호출과 같은 서비스 로직을 포함하는 디렉토리입니다.
next.config.js: Next.js 구성 파일로, 웹팩 설정 및 환경 설정과 관련된 내용을 포함할 수 있습니다.

두 방식의 차이점 및 공통점

SSR(Server-Side Rendering) 구조와 파일 및 폴더 구조:

SSR에서는 서버에서 초기 HTML을 생성하기 때문에, 서버 사이드 렌더링을 처리하는 로직이 필요합니다.
SSR 구조에서는 서버 측 코드와 클라이언트 측 코드가 함께 작성되는 경우가 많습니다.
일반적으로 SSR 구조에서는 pages/ 디렉토리에 각 페이지의 서버 사이드 렌더링을 위한 파일들이 위치합니다.
서버 사이드 렌더링을 위한 로직을 포함하는 server/ 디렉토리도 있을 수 있습니다.

CSR(Client-Side Rendering) 구조와 파일 및 폴더 구조:

CSR에서는 초기에 빈 HTML을 클라이언트에 전송하고, 클라이언트에서 동적으로 페이지를 생성합니다.
CSR 구조에서는 주로 클라이언트 측 코드만 작성됩니다.
일반적으로 CSR 구조에서는 src/ 디렉토리가 프로젝트의 주요 소스 코드를 포함하는 디렉토리입니다.
src/pages/ 디렉토리에는 클라이언트 측에서 동적으로 렌더링되는 각 페이지의 파일이 위치합니다.
재사용 가능한 컴포넌트는 src/components/ 디렉토리에 작성됩니다.

공통점.

public/: 정적 파일(이미지, CSS 파일 등)을 저장하는 디렉토리입니다. 두 구조에서도 클라이언트에서 접근 가능한 정적 파일들을 이 디렉토리에 위치시킵니다.
utils/: 유틸리티 함수, API 호출, 헬퍼 함수 등을 포함하는 디렉토리입니다. 공통적으로 사용되는 로직을 이 디렉토리에 작성할 수 있습니다.