프로젝트 셋업 툴들 정리

1. husky

husky... 내 애증...

husky란 무엇일까?

1. husky는 git hook 설정을 도와주는 npm package다.

2. 번거로운 git hook 설정이 편하다.

3. npm install과정에서 사전에 세팅해둔 git hook을 다 적용시킬 수 있다.

 

요약하자면 사전에 정의해놓았던 git roles와 ESLint 를 적용하지 않으면 git commit이나 git push가 되지 않는다는 것.

 

Commit Workflow Hooks

Commit Workflow Hooks 을 통하면 commit 이벤트 전/후로 hook을 동작시킬 수 있다.
종류는 다음과 같다.

• pre-commit : 커밋 시 가장 먼저 실행
• prepare-commit-msg : Git이 커밋 메시지를 생성하고 편집기를 실행하기 직전에 실행
• commit-msg : 커밋이 발생하기 직전에 실행
• post-commit : 커밋이 발생한 직후에 실행

---

husky 설치하기

husky는 보통 npm으로 하는데, 나는 yarn을 써서 그에 맞춰 따라가보겠다.

yarn add --dev husky

 

package.json에 postinstall  추가

{
  "scripts": {
	...
    // Yarn doesn't support prepare script
    // "postinstall": "husky",
	"postinstall": "cd .. && husky ReactApp/.husky",
    "prepack": "pinst --disable",
    "postpack": "pinst --enable"
	...
  }
}

 

최초 한 번 실행(init recommend)

yarn run postinstall

 

그리고 사용하는 파일만 ㅡ 파일 밖으로 빼내는 것 같다.

 

마지막으로 전부 돌리면 시간이 오래 걸리기 때문에 lint-staged 를 통해 특정 타입의 파일들만 돌아가도록 설정한다.

yarn add lint-staged --dev

 

husky에서 lint-staged를 실행하도록 다음과 같이 pre-commit 파일을 수정

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn lint-staged

 

+) package.json 파일도 수정

"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx}": [
    "eslint --ext .tsx --ext .ts src/",
    "prettier --write"
  ]
}

project 내 모든 .js, .jsx, .ts, .tsx 파일에 대해 ESLint와 Prettier를 검사하겠다는 명령어

[참고] 

제일 정보가 많은 것 같다.

 https://velog.io/@mywonhyuni/%EC%84%A4%EC%A0%95-husky-lint-staged-%EC%84%A4%EC%A0%95  

[설정] husky, lint-staged 설정

 

https://jihyundev.tistory.com/25

husky & lint-staged로 린트 검사 자동화하기

https://html-jc.tistory.com/709

Husky, lint-staged 설치 및 사용법

https://withwltn.tistory.com/32

 

2. 테스팅

Dom을 테스트 하기 위한 도구로, react-testing-library는 렌더링된 결과에 보다 집중한다. 즉 컴포넌트 내부의 동작보다는 실제 화면에 어떤 것이 보여지는지, DOM에 대해 신경을 쓰는 것이다.

 

React 컴포넌트 테스트를 위한 함수와 도구를 제공한다.

render, screen, fireEvent 등과 같은 함수를 사용해 컴포넌트를 렌더링 하고, 화면에 표시된 요소를 선택하며 사용자 이벤트를 발생시키고 테스트 하는 등의 작업을 수행할 수 있다.

 

즉 컴포넌트를 테스트 하기 위해 test파일을 만들어서 사용하는 것...

 

여기서 React Testing library는 Jset와 함께 사용하기 때문에 Jest를 먼저 짚고 넘어가겠다...

 

2-1 Jest

https://jestjs.io/docs/getting-started#via-babel 여기 따라가라 

기업에서는 테스팅 시 보통 Jest를 사용한다.

[예시]

import {describe, expect, test} from '@jest/globals';
import {sum} from './sum';

describe('sum module', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

 

[참고]

https://velog.io/@skyu_dev/Jest-React-Testing-Library%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-DOM-%ED%85%8C%EC%8A%A4%ED%8C%85%ED%95%98%EA%B8%B0

[Jest] React Testing Library를 사용하여 DOM 테스팅하기

https://blog.pumpkin-raccoon.com/81

react testing library와 jest로 React 유닛 테스트 구현하기

https://velog.io/@wlwl99/Testing-Library-Jest

Testing Library와 Jest에 대해 알아보자

https://testing-library.com/docs/react-testing-library/example-intro (공식 DOCX)

3. 일렉트론

 

4. 프리티어

사실 프리티어 설정을 처음 해봤다. 생각보다 어려운 건 없었다. 

.prettierrc 파일을 만들어서 코드를 아래랑 같이 설정하면 된다.

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": false
}

 

tabwidth는 간격이고 semi는 세미콜론 추가!

git에 올릴 것이기 때문에 gitignore파일에도 추가한다

# node_modules/ 디렉토리에 있는 모든 파일을 무시
node_modules/

# 특정 파일 fileName 제외
.prettierrc
package.json
package-lock.json

 

+) ESLint도 많이 같이 사용한다. 허나 나는 혼자 작업하기 때문에 이번에는 그냥 넘어간다.

프리티어 정리!

{
  "arrowParens": "always", // 화살표 함수의 매개변수가 하나일 때 괄호를 사용할지 여부
  "bracketSpacing": true, // 객체 리터럴에서 중괄호 내부에 공백 삽입할지 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 80, //  한 줄에 출력되는 코드의 최대 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 간격
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "parser": '', // 사용할 parser를 지정, 자동으로 지정됨
  "filepath": '', // parser를 유추할 수 있는 파일을 지정
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

 

[참고] ✨ Prettierttier

5. gitignore

gitignore도 오랜만에 설정해주었다! 문법은 다음과 같다.

.gitignore 문법

패턴	설명
*	/ 를 제외한 모든 문자열과 매칭 (문자열 길이 0이상)
**	/ 를 포함한 모든 문자열과 매칭 (문자열 길이 0이상)
?	/ 를 제외한 하나의 문자와 매칭 (빈 문자 x)
[abc]	[] 안에 있는 모든 각각의 문자들과 매칭 (a또는 b또는 c 중에 하나)
{a, b, c}	{} 안에 있는 , 로 구분된 각각의 문자열들과 매칭
[^abc]	[] 안에 있는 모든 각각의 문자들을 제외한 문자들과 매칭
[a-z]	[] 안에서 - 사이에 있는 첫 문자와 마지막 문자 범위에 있는 모든 문자들에 대해 매칭 (a-z, A-Z, 0-9 등..)
/	/ 부터 시작하는 경로 패턴은 하위 디렉토리에 반복적으로 적용되지 않는다.
!	! 로 시작하는 패턴은 .gitignore에서 제외되며, 무시되지 않는다.
#	# 으로 시작하면 주석처리

[참고] ✨gitignore

 

의문1. 보통 어떤  파일들을 여기에 추가할까?