프로젝트 4일차 - 공통 기능 개발 Button (1), git 브랜치 동기화

feat branch 를 main 브랜치와 동기화

- 업데이트된 main 브랜치를 내 브런치와 병합할 때 다음과 같은 명령어를 사용한다.

- git fetch --prune origin 명령어는 원격 저장소(origin)에서 최신 변경 사항을 가져오고, 로컬 브랜치와 원격 브랜치 간의 차이를 동기화한다. --prune 옵션은 원격 저장소에서 삭제된 브랜치를 로컬에서도 제거한다.

- git reset --hard origin/main 명령어는 로컬 브랜치를 origin/main 브랜치와 동일한 상태로 되돌린다. --hard 옵션은 작업 디렉토리의 변경 사항까지 모두 지우고 원격 브랜치의 상태로 리셋한다.

# git fetch --prune : 더 이상 원격 저장소에 없는 원격 추적 분기(삭제된 브랜치)를 정리
git fetch --prune origin
# git reset : 현재 HEAD를 지정된 상태로 재설정
git reset --hard origin/main

 

또는 아래와 같은 명령어로 동기화를 할 수도 있다.

아래 명령어는 원격 브랜치를 로컬 브랜치에 연결하고, 최신 변경 사항을 가져오며, 작업 디렉토리를 원격 브랜치와 동일한 상태로 설정하는 역할을 한다.

git branch --set-upstream-to=origin/main <sub-branch>

 

ESLint & Prettier 설정하기

1. ESLint 와 Prettier 란?

- ESLint 와 Prettier 를 VSCode 에서 잘 활용하기 위해서 vscode 확장 프로그램(extension)을 설치한다.

- ESLint : Linter로써 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구

- Prettier : Formatter로써  소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구

 

2. ESLint 초기화하여 .eslintrc 생성

- create-react-app에는 기본적으로 eslint 노드 모듈이 설치되어 있다.

- 아래 명령어를 통해 eslint 를 초기화한다.

npm init @eslint/config

- 프로젝트 루트 폴더에 .eslintrc.js (설정 파일 포맷을 JavaScript로 하였을 때) 파일이 생성됩니다.

 

3. Prettier와 eslint-config-prettier 설치 및 .prettierrc 생성

-위에 설명하였듯이 ESLint는 Linter이고 Prettier는 Formatter이니 같이 사용해도 아무 문제가 없을 것 같지만 유의할 점이 하나 있습니다. ESLint 규칙은 크게 코드 스타일 규칙과 코드 퀼리티 규칙으로 나누어집니다. 이 중 코드 스타일 규칙이 코드 포매팅을 수행하는 Prettier와 역할이 겹치고 심지어 Prettier와 충돌이 일어날 수 있습니다. Prettier 측에서도 이런 문제점을 모르지 않기 때문에 3가지 해결 방법이 존재한다.

  > Prettier와 충돌하는ESLint규칙들을 꺼주는eslint-config-prettier

  > Prettier를 ESLint 규칙으로 실행시켜주는 eslint-plugin-prettier

  > Prettier를 실행한 직후 ESLint를 실행시켜주는 prettier-eslint

- 이 중에서 Prettier 측에서는 eslint-config-prettier를 가장 추천한다고 합니다.

- 이제 prettier와 eslint-config-prettier 패키지를 설치합니다.

npm i -D prettier eslint-config-prettier

- 프로젝트 루트 폴더 위치에 .prettierrc 파일 (prettier 설정 파일)을 생성합니다.

- ESLint와의 충돌 방지를 위해 .eslintrc.js 파일에서 extends 부분을 아래와 같이 수정합니다. (이때, eslint-config-prettier가 앞선 설정들을 덮어쓸 수 있도록 prettier를 마지막에 작성하셔야 합니다.)

extends: ['airbnb-base', 'prettier']

 

VSCode에서 ESLint, Prettier 사용하기

1. ESLint 와 Prettier의 VSCode 확장 프로그램 설치

 

ESLint vscode Extension

Prettier vscode Extension

2. VSCode setting.json 파일 수정

- 프로젝트 루트 폴더에 .vscode 폴더를 생성하고 하위에 setting.json 을 생성한다.

- setting.json 파일을 별도로 관리하므로써 팀원들과 동일한 setting.json 을 공유한다.

- VSCode의 setting.json 파일에 아래 내용을 작성합니다.

- 이제 파일을 저장할 때마다 ESLint 규칙에 따라 자동으로 코드가 수정되고 Prettier 설정에 따라 자동으로 코드가 포매팅 됩니다 

// 파일을 저장할 때마다 `eslint` 규칙에 따라 자동으로 코드를 수정
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },
// `prettier`를 기본 포맷터로 지정
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 파일을 저장할 때마다 포매팅 실행
"editor.formatOnSave": true,

 

Jest 관련 설정

1. .eslintrc 파일 수정

- 테스트 파일들에서 'jest' is not defined. 오류가 발생한다면 조치한다.

- .eslintrc.js 파일이라면 jest 에 쌍따옴표("")로 묶어 문자열로 표기해주면 된다.

env: {
  ...,
  jest: true,
},

- 추가적으로, 터미널에 아래 명령어를 입력해 jest 타입 선언을 설치하면 vscode에서 jest 언어 서비스를 지원해준다.

npm i -D @types/jest

 

GlobalStyle.jsx 수정

1. 폰트 가져오기

- components > style > GlobalStyle.jsx 파일 수정

- 우리 프로젝트에서는 스포카한산스네오 글꼴을 사용한다.

- 로고의 폰트는 안성탕면체 Bold 글꼴이지만 이미지로 대체하기 때문에 폰드를 가져오지 않는다.

- styled-reset 모듈 설치

npm install styled-reset

 

- root 글꼴 설정

- li, button, a, input 태그 기본 스타일 설정

- a11y-hidden (accessibility-hidden) 클래스 설정

- (?) GlobalStyle에서 export default 를 쓰면 에러가 생기고 default 를 지우면 에러가 안생긴다.

- styled-reset 를 불러오는데 이것이 default로 되어 있기 때문인 것 같다.

 

2. App.js 수정

- App.css 없으므로 수정

- GlobalStyle 컴포넌트 추가

 

3. 비어있는 Button.jsx 컴포넌트 추가

- 폴더 구조 /src/components/common/Button.jsx

- App.css에 Button 컴포넌트 추가

 

4. Home 페이지 추가

- 폴더 구조 /src/pages/HOME/HOME.jsx

- Home에는 UI 디자인 상 버튼이 없지만, Home 컴포넌트를 App.js 에 추가하고 버튼을 자식 컴포넌트로 구현

- 단순히 Styled-componenets 만 적용된 StyledButton.jsx 컴포넌트를 생성

- StyledButton 컴포넌트의 disabled의 경우 Inactive 상태로 버튼을 만들면 클릭이 안되서 주석처리

- Props 전달 과정은 SignUpForm.jsx > StyledButton.jsx  > Button.jsx 순이다.

- 추후에 StyledButton.jsx 은 form 요소 구현하여  SignUpFormStyle.jsx 로 묶어줘야한다.

- 버튼을 누르면 반전(!prev)의 상태를 구현한 버튼은 아래와 같다.

active 상태 버튼

Inactive 상태 버튼

 

 

 

 

원본 링크 : 알아두면-쓸데있는-ESLint-Prettier-설정-방법 

참고 링크 : Prettier options

참고 링크 : Food-zip GitHub