Under the Sign of Saturn

react 프로젝트에 관리자 대시보드 템플릿을 하나 가지고 와서 커스텀하려고 준비 중에 만난 ESLint 에러. tailwindCSS로 스타일링도 하고 있다. label-has-associated-control 태그가 텍스트 라벨 + 관련 있는 control로 구성되도록 강제하는 룰이다. 만일 이게 되지 않으면, 해결하는 방향은 두 가지가 있다. 안에 control 태그를 감싸는 방법 태그 안에 htmlFor 속성을 추가하고 컨트롤 태그에 DOM id를 붙이는 방법 위 예시에서 htmlFor와 id를 둘다 쓰고 있다. Reference eslint-plugin-jsx-a11y에서 더 자세한 설명을 볼 수 있다.

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 3 (CRA + TypeScript + Prettier + ESLint + husky + lint-staged + Storybook + chromatic) TypeScript를 기반으로 하는 Create React App 준비는 첫 번째 시리즈에서 다뤘고, ESLiint와 Prettier는 두 번째 시리즈에서 다루었다. 2022.01.28 - [분류 전체보기] - [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1 2022.02.04 - [🛠/Dev Tool] - [storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 2..

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 (CRA + Prettier + ESLint + TypeScript + Storybook + chromatic) 2022.01.28 - [🛠/Dev Tool] - [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1 [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 (CRA + ESLint + TypeScript + Storybook + chromatic) 예전 프로젝트에서 디자인이 수시로 변경되었는데, 디자인 버전 관리 uiyoji-jou..

아래처럼 props를 펼침연산자(spread operator)를 쓰는 것도 ESLint에서 권장하는 패턴은 아니다. 코드의 가독성과 유지보수를 위해서는 어떤 prop을 내려주고 있는지 일일이 명시하는 것이 좋다. Disallow JSX props spreading (react/jsx-props-no-spreading) Enforces that there is no spreading props for any JSX attribute. This enhances readability of code by being more explicit about what props are received by the component. It is also good for maintainability by avoiding p..

아래 같은 패턴의 코드는 no-unstable-nested-components 에러를 만나게 된다. Creating components inside components without memoization leads to unstable components. The nested component and all its children are recreated during each re-render. Given stateful children of the nested component will lose their state on each re-render. function Component() { function UnstableNestedCOmponent() { return } return ( ) } 이런 패..