ESLint
-
Stylelint를 이용해 css 정리하기 (feat. Styled-Components)React 2022. 11. 14. 15:15
(이 글은 MacOS, VSCode, postcss@8.4.19, postcss-jsx@0.36.4, stylelint@14.14.1, react@18.2.0을 기반으로 작성되었습니다.) Eslint는 이제 React로 개발을 진행할 때 혼자 하는 프로젝트에서는 물론이고 같이 협업하는 프로젝트에서는 거의 필수적으로 사용하는 라이브러리입니다. 주로 Eslint + Prettier을 이용해 자동으로 Eslint에서 설정한 룰과 Prettier에서 추가한 내용에 대하여 수정하는 식으로 진행하기에 더욱 사랑받고 있는 것 같습니다. 여기에서 style에 대해서는 이런 툴이 없을까 하는 생각에 발견한 것이 바로 Stylelint입니다. 이거다 하는 생각에 신나게 설정을 진행했을 때 당황할 수밖에 없었습니다. 제가 ..
-
hint: The '.husky/pre-commit' hook was ignored because it's not set as executable. 해결하기Git 2022. 10. 29. 18:15
2021.11.10 - [Git] - husky + lint-staged를 활용하여 git hook걸기 husky + lint-staged를 활용하여 git hook걸기 이 글에서는 가장 많이 사용하는 git hook인 pre-commit을 기준으로 설명하겠다. 먼저 이 글을 작성하게 된 가장 큰 원인인 husky@4에서 사용하던 아래와 같은 방법을 사용할 수 없게 되면서 였다. // pack kir93.tistory.com 이전 글을 통해 husky를 설정해 사용하던 중 새로운 pc를 사용할 때 husky가 동작하지 않는 문제가 발생했다. 그리고 아래와 같은 hint가 제공되었다. hint: The '.husky/pre-commit' hook was ignored because it's not set ..
-
Redux Toolkit Dependency cycle ErrorTip 2021. 12. 16. 19:09
Redux Saga에서 Redux Toolkit(이하 RTK)으로 바꾸며 큰 만족을 했지만 cycle에러를 피하기 어렵다는 단점이 있다. 이런 것은 Duck's Pattern의 고질적인 문제이기도 한데, 내가 이 문제를 해결한 방법을 공유하려고 한다. 이 문제가 발생하는 경우에 대해 먼저 설명하자면. // aReducer ... const aSlice = createSlice({ name: 'aSlice', initialState, reducers: { testReducer(state, action){ // func contents } }, extraReducers: (builder) => builder .addCase() ... }) export { testReducer } = aSlice.action..
-
VSCode ESLint, Prettier 자동 수정 적용안될 때Tip 2021. 12. 8. 17:05
vscode에 eslint와 prettier을 설정하는 방법에 대해서는 많은 글들이 있기에 세팅에 대해 아주 간략하게 설명한다. vscode의 확장을 눌러 eslint와 prettier을 설치한다. 그 뒤로 프로젝트마다 설정할 경우. eslintrc,. prettierrc 등을 이용해 수정해 사용하면 된다. 하지만 여기서 내가 안 된 상황은 2가지였다. prettier가 아예 작동을 하지 않는 경우 windows의 경우 ctrl + , / mac의 경우 cmd + , 버튼을 눌러 설정을 연다 검색창에 editor default formatter를 검색해 나온 항목을 Prettier로 변경해 주는 것으로 간단하게 해결되었다. Prettier의 동작은 잘되는데 eslint의 auto fix를 안 해주는 경우..
-
ESLint react/display-name 해결하기Tip 2021. 9. 2. 12:11
해당 에러는 의외로 많은 곳에서 볼 수 있고 Google에서 코드를 참고하다 보면 자주 겪게 되는 에러입니다. 익명 함수를 사용해서 발생하는 에러로 주로 아래와 같은 경우 많이 발생한다. { ... component: ({size, color}) => , ... } 위와 같은 코드는 꽤나 자주 사용되는데 해당 코드를 const renderComponent = ({size, color}) => { ... component: renderComponent, ... } 아래와 같이 함수를 외부로 빼서 작성하게 되면 해결할 수 있다. 물론 TS를 적용하면 문제가 발생하는 경우가 있다. 위와 같은 경우에는 interface IProps { size: string; color: string; } const rende..
-
ESLint dependency cycle detected import/no-cycle Error 해결하기Tip 2021. 8. 18. 18:15
나의 경우 해당 에러가 interface를 import 해서 사용할 때 나왔다. 이 에러의 의미는 간단하게 설명하자면 A 컴포넌트를 B에서 import 해서 사용하는데 B에서 A의 항목을 import 해서 생기는 문제이다. A -> B -> A 그래서 나의 경우 interface들을 따로 파일로 쪼갠 뒤 아래와 같은 방식으로 사용해 해결해 냈다. // A.tsx import {Props} from './type'; import B from './B' // B.tsx import {Props} from './type'; ... any: [] as Props