React 프로젝트 세팅하기 1편 : 폴더&파일 구성

안녕하세요!
이번 글에서는 React프로젝트를 생성하기에 앞서, 다음과 같은 라이브러리를 바탕으로 프로젝트를 세팅하는 방법에 대해 알아보겠습니다.

"prettier, ESLint, styled-component, sass"

1. prettier
   prettier은 최근 가장 인기를 얻고 있는 코드 포멧터입니다. 여기서 코드포멧터란, 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구를 말합니다. 쟁쟁한 오픈 소스 프로젝트들과 수많은 기업들이 Prettier를 정식 코드 포멧터로 채택해서 사용하고 있습니다. 포멧팅을 예외하고 싶을 때는 .prettierignore 설정파일을 생성하면 예외 시키고 싶은 파일이나 디텍토리를 지정할 수 있습니다.
2. ESLint
   ESLint는 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구입니다. ESLinㅅ는 처음부터 유용하게 사용할 수 있는 스타일 가이드를 제공하지만, 개발자가 자신의 스타일 가이드를 작성할 수 있습니다.
3. styled-components
   styled-components는 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 말합니다. css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있습니다.
4. sass
   sass는 라이브러리는 아니고 CSS 전처리기입니다. CSS를 보다 유지보수 편하게 해주는 역할을 합니다.

1. Create React App

우선 CRA로 React프로젝트를 생성해줍니다.

$ npx create-react-app "파일 이름"

2. 기본 세팅

.prettierrc

{
	"printWidth": 100,
	"tabWidth": 2,
	"singleQuote": true,
	"trailingComma": "all",
	"bracketSpacing": true,
	"semi": true,
	"useTabs": true,
	"arrowParens": "avoid",
	"endOfLine": "lf"
}

.eslintrc

{
	"extends": ["react-app", "plugin:prettier/recommended"],
	"rules": {
		"no-var": "warn", // var 금지
		"no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
		"no-nested-ternary": "warn", // 중첩 삼항 연산자 금지
		"no-console": "off", // console.log() 금지
		"eqeqeq": "warn", // 일치 연산자 사용 필수
		"dot-notation": "warn", // 가능하다면 dot notation 사용
		"no-unused-vars": "warn", // 사용하지 않는 변수 금지
		"react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
		"react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
		"react/no-direct-mutation-state": "warn", // state 직접 수정 금지
		"react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
		"react/no-unused-state": "warn", // 사용되지 않는 state
		"react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
		"react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
		"react/jsx-curly-brace-presence": "warn", // jsx 내 불필요한 중괄호 금지
		"prettier/prettier": [
			"error",
			{
				"endOfLine": "auto"
			}
		] //delete 'cr' prettier/prettier 오류를 피하기위해 윈도우 유저에게 필요한 부분
	}
}

프로젝트의 기본 연결 순서는 다음과 같습니다.
src폴더의 index.js 호출
-> App 호출
-> GlobalStyle & Router 호출
-> 각 Route 호출

3. Router 구성

/Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
);

/App.js

import Router from './routes/Router';
import GlobalStyle from './styles/GlobalStyle';

function App() {
	return (
		<>
			<GlobalStyle />
			<Router />
		</>
	);
}

export default App;

/styles/GlobalStyle.js

기본 style을 설정해주는 js입니다.
styled-components의 createGlobalStyle를 이용하여 전역에 style을 적용시켜 줍니다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
font-family: 'Montserrat', sans-serif;
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
  line-height: 1;
}
menu, ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
* {
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  font-family: 'Montserrat', sans-serif;
}
a {
  text-decoration: none;
  color: inherit;
}
`;

export default GlobalStyle;

routes/Router.jsx

import { BrowserRouter as Routers, Routes, Route } from 'react-router-dom';
import BasicInfoPage from '../pages/BasicInfo';

function Router() {
	return (
		<Routers>
			<Routes>
				<Route exact path="/" element={<BasicInfoPage />} />
			</Routes>
		</Routers>
	);
}

export default Router;

4. 폴더 구성

폴더는 pages와 components파일로 나누었습니다. pages에는 페이지를, components에는 각 페이지를 구성하는 컴포넌트들로 구성하였습니다.

Routes.jsx에서 호출된 각 파일들의 연결 순서는 다음과 같습니다.
Router.jsx에서 BasicInfo 호출
-> pages/BasicInfo 폴더의 index.js 호출
-> pages/BasicInfo 폴더의 BasicInfoPage.jsx 호출
-> pages/BasicInfo 폴더의 BasicInfoPage.style.js 호출 & components/BasicInfo 호출
-> components/BasicInfo 폴더의 index.js 호출
-> components/BasicInfo 폴더의 BasicInfo.jsx 호출
-> components/BasicInfo 폴더의 BasicInfo.style.js 호출

1) pages/BasicInfo

index.js

index.js는 import 후 바로 export 해줍니다.

import BasicInfoPage from './BasicInfoPage';
export default BasicInfoPage;

BasicInfoPage.jsx

import BasicInfo from '../../components/Signup/BasicInfo';

function BasicInfoPage() {
	return <BasicInfo />;
}
export default BasicInfoPage;

BasicInfoPage.style.js

비움

2) components/BasicInfo

index.js

import BasicInfo from './BasicInfo';
export default BasicInfo;

BasicInfo.jsx

실질적인 코딩을 해주는 jsx파일입니다.

import * as S from './BasicInfo.style';
const BasicInfo = () => {
return <S.Main><S.Main>
}
export default BasicInfo;

BasicInfo.style.js

BasicInfo.js에 적용할 style들을 모두 작성해줍니다.

import styled from 'styled-components';
export const Main = styled.main`
	width:1000px;
`

위처럼 한 폴더는 index.js, 컴포넌트 이름.jsx, 컴포넌트 이름.style.js로 구성되어있습니다. 저는 이 방식을 가장 애용합니다.