코드 리뷰 정리. 더 나은 코드를 작성합시다. 🤓
stash
하기 (commit X)barrel is a way to rollup exports from several modules into a single convenient module. The barrel itself is a module file that re-exports selected exports of other modules.
프로젝트 규모가 클 때,import/export를 간결하게 만들어주어서 가독성을 높일 수 있다. 또한 폴더내의 파일들을 한눈에 흩어보며 구조를 파악하기에도 용이하다.
기존 코드
/* 파일 구조
index.ts
interfaces/
bear.interface.ts
pig.interface.ts
man.interface.ts
*/
// index.ts
import { Bear } from './interfaces/bear.interface';
import { Pig } from './interfaces/pig.interface';
import { Man } from './interfaces/man.interface';
Barrel 적용
/* 파일 구조
index.ts
interfaces/
bear.interface.ts
pig.interface.ts
man.interface.ts
index.ts <--- Barrel file
*/
// ./interfaces/index.ts
export * from './bear.interface';
export * from './man.interface';
export * from './pig.interface';
// index.ts
import { Bear, Pig, Man } from './interfaces';
styled-component
를 사용할 때 옵션값으로 이름이 설정되기에 추후에 디버깅에 용이함)AdminTableStyle
, AdminTableInput
, AdminTableCell
...absolute-path
를 사용import { Account } from '../../../../Accounts'
와 같이 사용할 거면, 차라리 전체 경로를 사용할 것(import { Account } from 'containers/AdminPage/Accounts'
) -> 명확getter
을 사용 -> 오브젝트의 값이 임의로 변경되는 것을 방지const ACCOUNT = { ... }
export const getAccount = () => ACCOUNT
// Using
const ACCOUNT = getAccount();
onChange={({ target: { name, value } }) => handleChange(name, value)}
// onChange={(e) => handleChange(e.target.value)}
// const { name, value } = event.target
// (1)
<Message>
{!!accountDomainArr?.length ? `(${accountDomainArr.length})` : ``}
</Message>
// (2)
const noValue = !!cell.value
a.length === 0 && <Test />
!a.length && <Test /> // Better
search
를 할때는, 항상 trim()
해주기if(typeof query === string) query = query.trim();
// (1) Switch statement
const AdminPageTableCell = () => {
switch (cellId) {
case 'firstCreateTime':
return <td {...cell.getCellProps()}>{moment(cell.render('Cell')).format('YYYY-MM-DD')}</td>
case 'detail':
return (
<td {...cell.getCellProps()} style={{ textAlign: 'center' }}>
<DetailLink row={row} onClickDetail={onClickDetail} />
</td>
)
default:
// ...
}
}
// (2) Multiple if statement
const AdminPageTableCell = () => {
const data = [...];
return (
<div>
{data.map(d => {
if(d.isDate) {
return <p>{moment(d.value)}</p>
}
if(d.isDetail) {
return <p><icon /></p>
}
return <p>{d.value}</p>
})}
<div>
)
}
a.style.width
를 하고 다른 작업을 하다가 b.style.width
를 하게 되면 총 두번의 calcuration
이 발생하게 된다. (layout process - painting)calcuration
이 실행된다. (합쳐져서 계산)// (1) Bad
a.style.width = 10;
// ...
// ...
b.style.width = 20;
// (2) Good
a.style.width = 10;
b.style.width = 20;
// ...
// ...
a.length
는 loop가 돌때마다 계산되어지기 때문에, 변수로 빼는게 좋다.// (1) Bad
for(let i=0; i < a.length; i++) { // ... }
// (2) Good
const aLength = 5;
for(let i=0; i < aLength; i++) { // ... }