Under the Sign of Saturn

전체 동의 우선 제일 먼저 태그의 type 속성을 checkbox로 둔다. 위 코드는 전체 동의를 위한 checkbox input 예제 코드. TailwindCSS와 섞어 써서 몇 가지를 설명하자면, sr-only : 라벨 내 태그 텍스트는 스크린 리더 사용자에게만 읽히도록 한다. rounded-full : border-radius: 50%;와 동일. 체크 박스 이미지를 둥글게 만든다. checked:bg-green-default : green-default라는 변수명으로 tainwind.config.js 파일에 등록해둔 색상으로 background-color를 지정해준다. 단, checked가 true일 때만 활성화하는 코드이다. appearance-none : appearance: none;과 동일한..

2월 17일 일곱 시 반에 Udemy에서 주최하는 개발자의 성장 방법에 대한 zoom live를 들었다. 첫 번째 세션에서는 Maker Jun님의 에 대해서, 두 번째 섹션에서는 Poco Jang님의 에 대해서 들었다. 올해 들어서 어떻게 하면 개발을 더 효율성 있게, 더 정확하게 올바른 방향으로 해나갈 수 있을지 고민이 많았는데, 그때마다 테스트 코드를 써보는 건 어떨까라는 아이디어가 뒤따르곤 했다. 테스트 코드가 대체 뭐인지 알 수가 없어서, 막연하게만 생각하고 그쳤는데, 의외의 곳에서 테스트 주도 개발론에 대한 영감을 얻을 수 있어서 흥미로웠다. 원래 TDD를 둘러싼 이야기에 대해 아는 바는 "테스트 코드 쓸 바에 프로덕션 코드를 바로 쓰고 만다" vs "테스트 코드 작성이 오히려 개발 공수를 줄여..

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

최근에 react-router-dom을 쓰려고 보니 버전 업이 되어서 기존에 알던 v5의 사항들이 많이 바뀐 것을 알았다. 가령 Switch가 Routes로, Redirect가 Navigate 등으로 대체되는 것이 있었는데, 좀 더 확실히 이해 가능한 컴포넌트 이름으로 변경되기도 했고, 기존 rediect 문제를 해결하기 위해 Navigate API가 도입되기도 했다. 아래는 공식 문서를 읽으면서 필요한 내용만 정리해보았는데, 더 자세한 내용은 이곳에서 확인할 수 있다. 공식 문서에서 말하길, 우선 v5와의 하위 호환성을 유지하기 위한 패키지는 조금 시일이 걸릴 것 같다고 한다. 몇 가지 추가되는 routes가 있을 것인지, 변경될 것이 있을지는 모르겠지만..! We recommend waiting fo..

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 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 방식으..

몇 개의 프로젝트에서 타입스크립트를 쓰고 나서부터는 이제 타입스크립트 이전으로 돌아가지 못하고 있다. 그런데 또 체계적으로 타입스크립트를 써온 게 아니라, 쓰는 타입만 쓰고, 그때 그때 에러를 해결해 나가면서 체득한 것인지라 시간이 나면 잘 정리된 문서들을 읽으면서, 문법을 익히려고 한다. React Native를 할 때 가장 TS를 많이 썼는데, 이때는 거의 interface로 점철하다시피했다. type과 interface가 거의 비슷하다는 것은 알고 있었지만, 딱 거기까지어서 이번 기회에 정리해봤다. Interface interface는 object 타입을 정의하는 다른 방법이다. 이름과 나이를 받는 user라는 이름의 객체 정보가 있을 때 아래처럼 interface를 선언할 수 있다. interfa..