FrontEnd, 프로젝트 환경설정

프로젝트 환경 구성은 개발자들이 협업하고 효율적으로 작업할 수 있도록 프로젝트의 기본 구조, 도구, 설정 등을 체계적으로 준비하는 과정입니다.

1. 디렉토리 구조 설정
2. 기본 설정 파일 구성
   2.1. .gitignore
   2.2. .env
   2.3. ESLint, Prettier(코드품질 유지)
3. 필수 도구 및 설정
   3.1. 패키지 매니저: npm, yarn, pnpm
   3.2. 빌드 도구: Vite, Webpack
4. 라이브러리 및 프레임워크
   4.1. React
   4.2. Typescript
   4.3. Next
5. 상태 관리 도구
   5.1. Redux
   5.2. Recoil
   5.3. Context API
6. 스타일링 도구
   6.1. Styled-Components
   6.2. Tailwind CSS
   6.3. Material UI
7. 개발 서버 및 API 연동
   7.1. Axios
   7.2. Fetch
8. 테스트 환경
   8.1. Jest
9. 배포 환경
   9.1. Netlify
   9.2. Vercel
   9.3. AWS
10. README 작성

---

1. 디렉토리 구조 설정

프로젝트의 가독성과 유지보수성을 높이기 위해 초기 디렉토리 구조를 설정합니다.

프로젝트의 규모에 따라서 효율적인 디렉토리 구조를 설정하자

---

2. 필수 도구 및 설정

2.1. 패키지 매니저

• npm: 기본 제공, 가장 널리 사용됨.
• yarn: 빠른 의존성 관리와 병렬 설치 지원.
• pnpm: 디스크 공간 절약을 위해 패키지 공유.

2.2. 빌드 도구

• Vite: 빠른 개발 서버, 최신 ES 모듈 지원.

  npm create vite@latest -- --template react-ts

• Webpack: 복잡한 설정 가능, 대규모 프로젝트에 적합.

---

3. 기본 설정 파일 구성

3.1. .gitignore

Git에 포함되지 않아야 할 파일 및 디렉토리 설정:

node_modules/
dist/
.env
.vscode/
.DS_Store
*.log

3.2. .env

환경 변수 파일로 민감한 정보를 관리합니다.

• create-react-app(CRA)

  • REACT_APP_으로 변수명 시작

    			```
    			REACT_APP_API_KEY=abcd 
    			REACT_APP_API_URL=https://example.com
    			```

  • 환경변수 사용

    		```
    		const API_KEY=process.env.REACT_APP_API_KEY;
    		const API_URL=process.env.REACT_APP_API_URL;
    		```

• Vite

  • Vite로 리액트 폴더 생성했을 경우 VITE_로 변수명 시작

    		```
    		VITE_API_KEY=abcd
    		VITE_API_URL=https://example.com
    		```

  • 환경변수 사용

    		```
    		const API_KEY=import.meta.env.VITE_API_KEY;
    		const API_URL=import.meta.env.VITE_API_URL;
    		```

3.3. ESLint와 Prettier

협업 환경에서 ESLint와 Prettier의 설정을 통일해 코드의 일관성을 유지

• ESLint: 코드 규칙 준수를 검사.
• Prettier: 코드 스타일 자동 정렬.

ESLint 설치:

npm install -D eslint

ESLint 설정:

.eslintrc.json

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
}

Prettier 설치:

npm install -D prettier

Prettier 설정:

.prettierrc

{
  "overrides": [
    {
      "files": ["*.js", "*.ts", "*.tsx"],
      "options": {
        "semi": true,
        "singleQuote": true,
        "tabWidth": 2,
        "trailingComma": "es5",
        "printWidth": 100,
        "bracketSpacing": true,
        "arrowParens": "always"
      }
    }
  ]
}

---

4. 라이브러리 및 프레임워크

4.1. React

컴포넌트 기반 UI 라이브러리.

4.2. TypeScript

타입 안정성을 제공:

npm install --save-dev typescript
npx tsc --init

4.3. Next.js

• 서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원.
• SEO 친화적.

npx create-next-app@latest frontend-project

---

5. 상태 관리 도구

5.1. Redux

• 중앙 집중식 상태 관리.

npm install @reduxjs/toolkit react-redux

• 예시 코드

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
  },
});

const store = configureStore({ reducer: counterSlice.reducer });

function Counter() {
  const count = useSelector((state) => state.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(counterSlice.actions.increment())}>Increase</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

5.2. Recoil

• React 전용 상태 관리 라이브러리.

npm install recoil

5.3. Context API

• 내장 상태 관리 도구. 간단한 프로젝트에서 적합.

---

6. 스타일링 도구

6.1. Styled-Components

CSS-in-JS 라이브러리:

npm install styled-components

6.2. Tailwind CSS

유틸리티 클래스 기반 CSS 프레임워크:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

6.3. Material UI

컴포넌트 기반 디자인 시스템:

npm install @mui/material @emotion/react @emotion/styled

---

7. 개발 서버 및 API 연동

7.1. Axios

HTTP 요청 라이브러리:

npm install axios

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then((response) => {
    console.log(response.data); // 응답 데이터 자동 JSON 변환
  })
  .catch((error) => {
    console.error('Error:', error); // HTTP 에러 자동 처리
  });

7.2. Fetch

내장 HTTP 요청 API:

fetch('https://api.example.com/data')
  .then((response) => {
    if (!response.ok) { // HTTP 상태 코드 확인 필요
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // JSON 변환 수동 처리
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

---

8. 테스트 환경

8.1. Jest

테스트 프레임워크:

npm install --save-dev jest @testing-library/react

---

9. 배포 환경

9.1. Netlify

정적 사이트 배포:

• dist/ 또는 build/ 디렉토리를 업로드.

9.2. Vercel

Next.js 및 React 프로젝트에 적합:

npm run build

9.3. AWS

• S3 + CloudFront: 정적 사이트 배포.
• Elastic Beanstalk: 동적 애플리케이션 배포.

---

10. README 작성

프로젝트의 사용 방법과 주요 내용을 정리합니다.