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 ( ) } 이런 패..

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 (CRA + ESLint + TypeScript + Storybook + chromatic) 예전 프로젝트에서 디자인이 수시로 변경되었는데, 디자인 버전 관리 체계도 제대로 이루어지지 않아서 어느 것이 최신 버전인지, 유효한 디자인인지 확인하기 어려웠다. Theme이 세 가지나 다른 디자인에 대해 각각 컴포넌트와 페이지를 다루기가 너무 난감했다. 작성하고 있는 컴포넌트는 재사용을 위한다고 가면, 너무 많은 prop이 걸려서 번번히 테스트 코드도 없는 와중에 디버깅 하기가 힘들었다. 그래서 이번 프로젝트에서는 디자이너와 협업 효율도 높이고, 시각적으로 컴포넌트들을 따로 볼 수 있으며, 개별적으로 개발해서 bottom-up 방식으..

맥으로 개발을 하기 시작한 지 몇 달은 된 것 같은데, 아직 터미널 토글 단축키를 안 만들어두고 있어서, 불편하던 차에 예전에 썼던 글이 생각나 검색했더니, 관련 포스팅을 한 적이 없었다. 여러 터미널을 사용하는 방법에 대한 단축키 설명만 있길래 새로 포스팅을 한다. https://uiyoji-journal.tistory.com/32 [VSCode] VSCode에서 터미널 여러 개 사용하기/디폴트 터미널 설정하기 삽질 몇 번 끝에 드디어 비주얼 스튜디오 코드 내에서 external 방식이 아닌 integrated 방식의 다중 터미널 사용 세팅을 완료했다. 끝내고 나니 별 어려운 게 아니었는데, argument 설정에서 길을 잃었 uiyoji-journal.tistory.com 1. VSCode를 열고 C..

2022.01.10 - [🛠/Dev Tool] - [JetBrains] 방송통신대학교 계정으로 JetBrains 교육용 무료 라이센스 등록하기 [JetBrains] 방송통신대학교 계정으로 JetBrains 교육용 무료 라이센스 등록하기 작년 가을학기에 처음 등록해서 이제 두 번째 학기를 앞두고 있다. 방송통신대학교 재학생일 때 누릴 수 있는 많은 것들이 있는데, 내가 학생이라는 자각이 계속 안 들어서, 번번히 놓치곤 한다. uiyoji-journal.tistory.com 방통대 계정으로 JetBrains IDE를 무료로 사용하기 위한 절차를 등록한 뒤, 내친김에 Github Pro로 업그레이드 하기로 했다. GIthub은 원래 무료 계정으로 사용하고 있던 개인 계정이 있었기 때문에, 여기에 학생 계정을 ..

작년 가을학기에 처음 등록해서 이제 두 번째 학기를 앞두고 있다. 방송통신대학교 재학생일 때 누릴 수 있는 많은 것들이 있는데, 내가 학생이라는 자각이 계속 안 들어서, 번번히 놓치곤 한다. 그 중 하나는 해야지 생각만 하다가 미룬 JetBrains 무료 교육용 라이센스 플랜을 등록하는 것이다. 아래는 젯브레인 홈페이지 JetBrains: Essential tools for software developers and teams JetBrains is a cutting-edge software vendor specializing in the creation of intelligent development tools, including IntelliJ IDEA – the leading Java IDE, an..

시작하며 PWA 연습을 위해서 간단한 프로젝트를 구성했다. 192, 512px 사이즈의 두 로고와 src 폴더에는 index.html, index.js, master.css, manifest.json 이렇게 파일을 두고 있다. lighthouse를 통해 pwa 리포트를 출력하는데 https 부분을 해결해야 할 것 같아서, Live Server 설정을 손보기로 했다. 문제 상황 Live Server extension에 들어가 설명을 보니 다행히 https를 지원한다. 공용 사이트가 아닌 테스트를 위함이니 자체 서명을 통해서 간단하게 Open SSL을 이용하기로 했다. Open SSL은 네트워크를 통한 데이터 통신에 쓰이는 두 프로토콜 TLS, SSL의 오픈 소스 버전이며, 이 링크에서 다운로드 받을 수 있..