캡스톤디자인(2) - (구성할) 개발환경 조사

2023년 1학기 캡스톤디자인(2)

계명대학교 컴퓨터공학과 5584977 이지현, '우연한 발견' 개발

 

캡스톤디자인(2) 오리엔테이션 전 조별 회의에서 이번 학기에는 우리 어플에 ESLint, Prettier, lint-staged, husky 4가지 개발환경을 추가로 구성하기 위하여 공부를 해오기로 하였다.

 

공부한 것을 발표하기 위해 간단하게 정리해보았다.

 

ESLint

: 코드 에러를 표시해주는 것

코드 에러는 컴파일, 런타임 에러만 표시되는 것이 아니라 우리가 ESLint를 통해 플러그인을 직접 생성해서 규칙을 정할 수 있음.

이 규칙에 어긋나도 에러를 표시해준다.

 

예시)

함수 이름을 Function()으로 작성했었는데, func()으로 바꾸기로 했다면
Function() 함수를 func()으로 바꾸는 플러그인을 작성한다.
이렇게 만든 플러그인을 적용하면, Function()으로 사용된 함수 이름을 경고메세지 출력 후 func()으로 변경하게 만들 수 있다.

 

 

Prettier

: 협업할 때 일관적인 코드를 작성하기 위한 코드 포맷터

서로 다른 코딩 스타일을 강제로 맞춰주는 거라고 생각하면 됨. 강제로라는 것은 설정한 스타일대로 작성하지 않으면 코드가 알아서 스타일에 맞게 바뀐다는 것이다.

Prettier도 스타일을 커스텀할 수 있다.

 

커스텀 예시)

한 줄 길이 설정 -> 설정된 길이를 넘어가면 자동으로 줄바꿈됨
탭 길이 설정 -> 탭(Tab) 누르면 몇 칸 띄워질지 설정
문장 뒤에 ; 붙일지 말지 설정

 

lint-staged

: stage 단계에 있는 파일들만 검사해주는 라이브러리

stage 단계란 git add한 단계. (commit 전)

이미 commit 하고 검사 완료된 코드까지 검사할 필요는 없기 때문에, 코드가 변경되고 commit 되기 전에 stage 단계에 있는 파일들만 검사하도록 한다.

 

husky

: git hook 사용을 도와주는 라이브러리

어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 함.

 

예시)

master 브랜치에 직접 push 못하게 막기
commit이 발생하기 전 lint 검사하게 하기
commit 메세지를 자동 생성하여 커밋 로그를 일관성 있게 유지하기

 

이 4가지 개발환경은 함께 쓸 수 있다.

husky를 통해서 git commit 되기 전에 lint-staged를 실행시키고 lint-staged 설정에서 설정한 파일들이 수정되었을 경우 설정한 eslint와 prettier 명령어가 실행되는 순서이다.

 

---

▶ 정리

husky와 lint-staged를 설치하고 각 설정 파일에서 설정한다.

husky에서 commit 하기 전(pre-commit)에 lint-staged가 실행되도록 설정하고, lint-staged에서 eslint와 prettier를 실행하도록 설정한다.

그 후 코드를 수정하고 git add 한 다음 git commit을 하면 husky와 lint-staged에 의해 (git add된 파일만) eslint, prettier가 실행된다. 이 때 lint 에러가 있다면 husky에 의해 commit에 실패하고, eslint에 의해 에러 메세지가 출력된다.
여기서 lint 규칙을 eslint로 설정가능하다.