메뉴
이 문서는 react의 컴포넌트를 만들 때 지켜야하는 추상화 레벨을 정의합니다. 컴포넌트를 새롭게 만들어야 하거나, 기존의 컴포넌트를 리팩토링해야할 때, 그리고 코드리뷰를 진행할 때 이 스킬을 사용하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | component-abstract-pattern |
| description | 이 문서는 react의 컴포넌트를 만들 때 지켜야하는 추상화 레벨을 정의합니다. 컴포넌트를 새롭게 만들어야 하거나, 기존의 컴포넌트를 리팩토링해야할 때, 그리고 코드리뷰를 진행할 때 이 스킬을 사용하세요. |
이 스킬은 모든 컴포넌트들 해당 프로젝트에서 지켜져야하는 컴포넌트 추상화 레벨을 정의합니다.
모든 컴포넌트는 아래의 추상화 레벨을 지켜야만 합니다. 핵심적으로 모든 컴포넌트는 도메인 로직을 다루는 여부에 따라서 feature, common으로 나눕니다.
common 컴포넌트 내에서도 내부 로직, 그리고 ui를 다루는 컴포넌트인지에 따라서 나눌 수 있습니다.
feature 컴포넌트 내에서도 section 단위의 비교적 독립적으로 사용될 수 있는 큰 컴포넌트와, login-button과 같은 비교적 작은 컴포넌트로 나뉠 수 있습니다.
feature/pages에 작성feature/pages/[페이지 명]/컴포넌트에 위치ui, layout, animation 으로 나뉨
ui : 색상이나 모형 등 실체가 있는 컴포넌트
layout : 특정 요소를 위치시키는 컴포넌트
animation : 특정 요소의 애니메이션을 다루는 컴포넌트. entities로 대체 가능
만약 산행 기록 캘린더 컴포넌트를 만들게 된다면 도메인 로직은 "산행 기록"입니다.
산행 기록 캘린더 컴포넌트는 아래와 같이 추상화 될 수 있습니다.
widget 컴포넌트가 됩니다.entities 컴포넌트가 됩니다.shared 컴포넌트가 됩니다.pages 컴포넌트가 됩니다.기억하세요: 해당 문서에 나와있는 추상화 규칙을 제외하고는 절대로 불필요한 추상화는 해서는 안됩니다.
해당 프로젝트의 도메인 지식에 대한 정리 파일입니다. 이 서비스의 도메인에 대한 개념이 필요한 경우 이 스킬을 사용하세요.
이 문서는 react의 커스텀 훅을 만들 때 지켜야하는 패턴을 정의합니다. 커스텀 훅을 새롭게 만들어야 하거나, 기존의 훅을 리팩토링해야할 때, 그리고 코드리뷰를 진행할 때 이 스킬을 사용하세요.
이 문서는 react의 컴포넌트를 만들 때 지켜야하는 폴더/index.tsx 방식의 colocation 패턴을 정의합니다. 컴포넌트를 새롭게 만들어야 하거나, 기존의 컴포넌트를 리팩토링해야할 때, 그리고 코드리뷰를 진행할 때 이 스킬을 사용하세요.