폴더가 너무 많아도 그리고 너무 중첩되어도 좋지 않다
타입이 중복되어 사용된다면 types
폴더 하나에서 관리할 수 있도록 하자
.d.ts
파일보다는 .ts
파일에서 export 를 이용하자
├── api
├── assets
├── components
│ └── Button
│ ├── Button.styles.ts
│ ├── Button.tsx
│ └── index.ts
├── constants
├── hooks
├── recoil
├── pages
├── styles
├── interfaces
├── types
└── utils
백틱 형식을 오브젝트 형태로 통일하자
현재 common.ts
에 있는 컴포넌트를 components
폴더로 옮기자 ⇒ 이것도 또한 컴포넌트이기 때문에
.selector {
/* Positioning */
position: absolute;
z-index: 10;
top: 0;
right: 0;
/* Display & Box Model */
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #333;
margin: 10px;
/* Color */
background: #000;
color: #fff
/* Text */
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
text-align: right;
/* Other */
cursor: pointer;
}
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal", ["parent", "sibling"], "index"],
"alphabetize": {
"order": "asc",
"caseInsensitive": true
},
"newlines-between": "always"
}
]
eslint-plugin-import/order.md at main · import-js/eslint-plugin-import
<aside> 💡 컴포넌트명은 파스칼 케이스 ex) Header, Button 변수명, 함수명은 카멜 케이스 ex) isLogin
</aside>
파스칼 케이스로 Prefix 없이 정의한다.
Props는 해당 타입이 사용되는 파일 내부에 정의한다.