React - 폴더 및 Git 파일 구성

1. CRA(Create-React-App) 폴더 및 Git 파일 구성

• React로 프로젝트를 셋팅하고 Git과 연동해서 사용한다. 참고로, Git은 파일을 기준으로 추적하기 때문에 폴더를 생성하고 빈 파일을 생성해야 Git으로 해당 파일과 폴더를 관리할 수 있다.

1) public/

• 앱이 컴파일될 때 사용하지 않는 모든 것을 담는 파일을 말하며, 절대 경로를 사용할 수 있다는 장점이 있다.

1-1) public/data/

• data 폴더는 Mock Data(가짜 데이터)를 관리하는 폴더이다.

public
└── data
     └── data.json

1-2) public/images/

• JSX 파일 안에서 사용하는 이미지를 관리하는 폴더이다. images 폴더 하위에 바로 이미지를 넣는 것 보단, Nav 폴더, ProductDetail 폴더 등의 각 페이지에서 사용하는 이미지를 폴더화 시켜서 페이지별로 깔끔하게 관리해주는 것이 좋다.

폴더 구성)

public
└── images
     ├── Nav
     │    └── logo.png
     └── ProductDetail
	  ├── Product1.png
	  └── Product2.png

JSX에서 파일 경로 사용하기)

// ProductDetail.js

import React from 'react';

const ProductDetail = () => {
  return <img src="/images/PruductDetail/product1.png" alt="프로덕트1" />;
};

export default ProductDetail;

1-3) public/favicon.ico

• 웹 브라우저 상단에 표시되는 아이콘 이다. (예 : html head 태그)

public
└── favicon.ico

2) src/

• src 폴더는 React를 개발하기 위해 전반적으로 사용되는 폴더를 말한다.

폴더 구성)

src
└── assets
     ├── Footer
     └── Main
          └── heart.jpg

2-1) src/components/

• 컴포넌트 폴더는 Nav, Footer 등등 여러 페이지에서 공통으로 사용되는 컴포넌트를 관리하는 폴더이다.

src
└── components
     ├── Footer
     │    ├── Footer.js
     │    └── Footer.scss
     └── Nav
          ├── Nav.js
          └── Nav.scss

2-2) src/pages/

• 페이지 폴더는 React에서 하나의 페이지(SPA)를 구성하는 컴포넌트들을 관리하는 폴더이다.

src
└── components
     ├── Footer
     │    ├── Footer.js
     │    └── Footer.scss
     └── Nav
          ├── Nav.js
          └── Nav.scss

2-3) src/components/와 src/pages/../components의 차이

• 여러 페이지에서 공통으로 사용되는 컴포넌트를 src/components/에서 관리한다고 하였는데 아래의 예시와 같이 pages안에서도 components 폴더를 생성해서 관리할 수 있다.

폴더 구성)

src
└── components
     ├── Footer
     │    ├── Footer.js
     │    └── Footer.scss
     └── Nav
          ├── Nav.js
          └── Nav.scss

차이점)

• 여러 페이지에서 공통으로 사용되는 컴포넌트 인지, 하나의 페이지 안에서 여러번 공통으로 사용되는 컴포넌트 인지에 대한 차이가 있다.

2-4) src/styles/

• 프로젝트에서 공통으로 적용될 부분의 스타일링 파일을 생성하는 폴더이다.

폴더 구성 1)

src
└── styles
     ├── common.scss
     ├── reset.scss
     └── variables.scss

• reset.scss : 브라우저가 가지고 있는 기본 css 속성을 초기화 하기 위한 스타일링 파일을 말한다.
• common.scss : box-sizing, font-family등 공통으로 사용하는 css 속성을 정의하기 위한 스타일링 파일을 말한다.
• variables.scss : 공통으로 반복해서 사용되는 css속성에 대한 변수를 설정하는 스타일링 파일을 말한다.

폴더 구성 2)

src
└── styles
     ├── GlobalStyle.js
     └── theme.js

• GlobalStyle.js : 공통으로 사용하는 css 속성을 정의하기 위한 파일을 말한다.
• theme.js : 공통으로 반복해서 사용되는 css 속성에 대한 변수를 설정하는 파일을 말한다.

2-5) src/Router.js

• 프로젝트에 사용할 Router 파일을 구성하는 파일이다.

Router 코드)

// src/Router.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Login/Login';
import Main from './pages/Main/Main';

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

2-6) src/index.js

• render()메서드를 통해 그려주는 컴포넌트를 Router로 설정하는 파일이다.

reset.scss, common.scss 예제)

• reset.scss와 common.scss를 import 하여 전역에 필요한 스타일을 적용시켜 준다.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './Router';
import './styles/reset.scss';
import './styles/common.scss';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Router />);

3) .eslintcache

• eslint는 lint 검사를 할 때마다 .eslintcache 파일을 생성하고 업데이트 한다. .eslintcache 파일 안에 기존에 lint 검사를 한 내역을 저장해두어서 매번 전체 파일을 검사하는 것이 아니라 변경된 파일에 대해서만 lint 검사를 할 수 있다. 이 파일의 목적상, git으로 관리할 필요가 없으므로 .gitignore에 추가해주어야 설정해둬야 한다.

gitignore 코드)

// .gitignore

.eslintcache