성연커밋 : )

Stylelint로 스타일을 관리해보자! stylelint란? style의 규칙을 정해주는 것으로 eslint와 유사하다. 사용 기술 스택 next.js typescript styled-components 내가 사용하는 기술은 위와 같다. styled-components의 공식문서에 stylelint에 대한 사용법이 적혀있다. 현재 스타일린트 버전은 14이다. styled-components 공식문서에 따르면 버전은 13이라, 따라하면 stylelint에서 @stylelint/postcss-css-in-js", and use the "customSyntax" option에러가 뜰 것이다. 이 에러가 뜨는 이유는? stylelint가 업데이트되면서 styled-components를 사용하기 위해선 cust..

‘.husky/pre-commit’ 후크가 실행 가능하도록 설정되지 않아서, 무시됩니다. 윈도우에서는 해당 에러가 안뜨지만, 맥북에서는 허스키가 동작하지 않았다. 나는 현재 커밋메시지로 커밋컨벤션을 작성해놨지만, 커밋 컨벤션을 지키지 않아도, 커밋이 되며 허스키가 무시된다는 것을 확인했다. 한글로 검색하였더니, 해당 에러가 뜨지 않아, 오랜 시간 어려움을 겪었다. 영어로 검색하였더니 해당 에러의 해결방법은 권한을 주는 것 이었다. 현재 commit-msg와 pre-commit파일의 권한이 -rw-r—r—로 되어있었다. chmod란? 파일의 권한 정보를 말한다. 총 12자의 영어로, 3자씩 나뉘면서 파일 소유자, 그룹, 그 외 사용자이다. (User, Group, Other) RWX의 순서는 Read(읽기..

Commit-msg를 지정해서 관리해보자 깃허브에 커밋컨벤션이 있는데, 허스키를이용하면 커밋 컨벤션이 맞지 않을 경우 커밋을 취소하게 만들어볼 수 있다. npx husky add .husky/commit-msg 'yarn commitlint --edit $1' 터미널에 위 코드를 입력해도 되지만 직접 .husky 폴더에 commit-msg 파일을 만들어도된다. #!/usr/bin/env sh #.husky/_/commit-msg . "$(dirname -- "$0")/_/husky.sh" yarn commitlint --edit $1 패키지 설치 yarn add --dev @commitlint/config-conventional @commitlint/cli 위 코드를 이용하여 패키지를 설치하자 #.com..

ESLint Error Parsing error must use import to load es module 에러가 뜰 경우? 이것은 ES6 도입 이후, babel을 설정해주지 않아서 생긴 문제이다! yarn add -D @babel/core @babel/eslint-parser 를 통해 설치해주고, 폴더 상단에 .babelrc를 만들어서 아래 코드를 추가하면 해결이 된다. / .babelrc { "presets": ["next/babel"] }

깃 커밋 이전에, ESLint 검사를 미리 하고, 커밋이 될 수 있도록 husky를 이용하여 ESLint를 자동화하자 husky가 뭔데? git hook을 쉽게 제어하도록 도와주는 매니저 도구이다 git hook이란? Git Hooks 는 Git과 관련한 어떤 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능이다. 크게 client hook과 server hook으로 나뉘는데 client hook은 commit, Merge가 발생하거나 push가 발생하기 전 client에서 실행하는 hook 반면 server hook은 Git repository로 push가 발생했을 때 server에서 실행하는 hook이다. husky, lint-staged를 dev로 설치해주자 yarn add -D h..

ESLint를 설정하는데 Must use import to load ES Module와 같은 에러가 떠서 ESLint가 실행되지 않았다. 그 이유는 .eslintrc.json의 파일에서 "parser"의 값이 처음에 babel-eslint였다. 하지만 babel-eslint는 es6을 지원을 해주지 않기 때문에, ES6으로 작업하고 있기 때문에 ESLint설정이 되지 않았다. 그래서 필요한 파일을 설치하자 yarn add @babel/eslint-parser 해당 파일 설치 이후, ... "parser": "@babel/eslint-parser", ... 으로 parser키의 값을 바꿔주도록한다. 그래도 나는 import 에러가 뜨는 문제가 있었는데, 이 이유는 ... "plugins": ["react"..

ESLint란? ES + Lint를 합친것 ES = Ecma Script ES는 표준 자바스크립트를 뜻한다. Lint = 에러가 있는 코드에 표시를 해줌을 뜻한다. 즉, ESLint는 표준 자바스크립트에서 에러가 있는 코드에 표시를 해준다! 협업할 때 특히 유용한 ESLint이다. Prettier란? 코드 정리 규칙을 설정해놓을 수 있는 플러그인으로, 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있다. 즉, Prettier는 코딩 스타일을 잡아준다! 그렇다면 ESLint와 Prettier을 이용하여 프로젝트 세팅을 해보자 원래 ESLint 를 사용하려면 프로젝트에 직접 설치해야 하지만, CRA의 경우 기본적으로 ESLint 세팅이 다 되어 있는 장점이 있다. 그래서, ..