[프로젝트] 기본 설정 Setting

필수

• Node.js
• Node.js 패키지 매니저
• 버전 관리 시스템/ 형상 관리 시스템 + 원격 리포지토리 서비스
• 프론트엔드 프레임워크(라이브러리)
• CSS
  • CSS 프레임워크(라이브러리)
  • CSS 네이밍 컨벤션
• Create React App
• 린터

 

Node.js

브라우저에서 벗어나 다양한 운영체제에서 실행할 수 있는 JavaScript 런타임

JS로 백엔드 개발도 가능해짐

배포 전 개발 단계에서 JS로 번들링이나 최적화 등 많은 개발 작업을 할 수 있게 됨

 

호환성 보장을 위해 Node.js LTS 버전 사용 권장

 

패키지 매니저

여러 소프트웨어들을 한꺼번에 설치, 업그레이드, 설정, 삭제 등을 할 수 있는 소프트웨어 툴

npm, yarn

 

버전 관리 시스템 + 원격 리포지토리 서비스

Git + Github

 

프론트엔드 프레임워크

React 18 버전(CRA 지원)

 

CSS

Styled-Components

일반 CSS 파일 import

 

CSS 네이밍 컨벤션

- BEM

- Utility-First(Twilwind)

 

CSS 관리 방법

CSS-in-JS 라이브러리를 사용하여 컴포넌트로 묶어 관리: Styled-Component, Emotion

Utility-First CSS: Twailwind CSS

CSS 파일 따로 관리

SASS 사용

UI 프레임워크: Material UI, Chakra UI, Radix UI

- 실제 개발에서 많이 사용하고 개발 생산성에 도움이 되나 CSS를 충분히 학습할 수 없음

 

Create React App

 

린터

문법 에러나 코드 스타일 규칙에 맞지 않는 코드를 찾아주는 툴

FE 개발자 간 합의된 코드 스타일링 규칙을 사용하여 코드 변화를 최소화하고 가독성 높은 코드를 작성하도록 함

eslint

prettier

 

 

선택

1. HTTP 요청

fetch API & isomorphic-fetch

Axios

React Query(TanStack Query)

SWR

 

2. 상태 관리

Redux

Recoil

Zustand

React Context API

Mobx

 

3. TypeScript

JS는 입문하기에 좋지만 향후 개발이 고도화될 수록 변수의 타입을 정하거나, 타입 검사를 할 수 있는 툴이 필요해짐

 

-> TypeScript 고안

정적 타입 언어처럼 사용할 수 있게 변수나 함수의 리턴값에 타입을 지정하여

해당 타입이 아니면 TypeScript를 JS로 컴파일하지 않고 에러를 내어 견고한 개발을 도움

초기 설정이 어렵고, 학습에도 시간이 오래 걸림

 

4. 번들러

webpack

esbuild

vite

parcel

 

5. 테스트 프레임워크

Jest, React Testing Library

Cypress(E2E 테스트)

 

 

튜토리얼

1. CRA 설치

npx create-react-app <원하는 디렉터리 경로>

 

2. Redux, Styled-Component, Eslint, Prettier 설치

npm install @reduxjs/toolkit react-redux

npm install --save styled-components

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier

 

eslint, prettier 설정

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/jsx-uses-react": 0
  }
}

 

.prettierrc.json

{
  "singleQuote": true
}

 

+ ESLint, Prettier VSCode Extention 설치

 

VSCode 설정에서 editor.codeActionsOnSave 설정을 Edit in settings json으로 선택하면

저장할 때마다 ESLint가 고칠 수 있는 에러와 코드 스타일링을 자동으로 고쳐줌(빨간 물결 밑줄)

# settins.json
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

 

 

 

pre-project Github
Issue: 칸반 티켓으로 사용
Milestone: Bare Minimum, Advanced Challenge, Nightmare를 표시하기 위해 사용
Project: 업무 흐름 관리

 

 

코드 베이스가 손상되면 안되는 경우(+사용자가 많은 경우)

fork -> clone

 

직접 제작하는 소규모 프로젝트

베이스에서 바로 clone해도 무방

 

프로젝트 시 Github 이용(pull, push, pull request)

① 백엔드 개발자가 push (main, dev)

② 프론트엔드 개발자가 pull (main, dev) (최초 clone)

③ 프론트엔드 개발자가 기능 개발 시 새 branch 생성하여 구현 (feat/기능)

④ 로컬에서 merge하지 말고 github으로 feat/기능 branch push 후 Pull Request 

# 내려받기(복사)
git clone <url>

# 내려받아 기존 코드와 합치기(fetch+ merge)
git pull

 

충돌 방지를 위해

매일 아침, PR하기 전 git pull

pull (→ merge) → push → pr

 

pull 했는데 충돌이 발생한다면 팀원과 협의 필요(내 코드를 변경할 지, 팀원의 코드를 변경할 지)

 

 

 

 

23.02.14

S5U2 프로젝트 준비