목차
View Model(Store) 에서도 Dom을 모르게
•
lib 폴더에 View Model(Store)에서 사용할 함수 정의.
•
Router는 Store에 RouterStore 도출
CallBack X -> Promise O
•
axios 중간 로직 처리는 callBack X, promise를 이용한 then으로 처리
Modal
•
모달을 열고 데이터를 불러와야하는 경우, 모달을 상태값 변경 후 데이터 로드
클로저 한줄 처리
// 잘못된 예)
export const boolToVisible = (bool: boolean) => {
return bool ? 'visible' : 'invisible';
}
// 옳은 예)
export const boolToVisible = (bool: boolean) => (bool ? 'visible' : 'invisible')
TypeScript
복사
// 잘못된 예)
if (!userId) {
alert('유효하지 않은 회원입니다. 다시 시도해주세요.');
return;
}
// 옳은 예)
if (!userId) return alert('유효하지 않은 회원입니다. 다시 시도해주세요.');
TypeScript
복사
고정으로 사용되는 Constant 값
•
사용되는 파일 최상단에 위치.
•
여러 파일에서 이용될 경우 lib 폴더에 별도로 생성.
// 예)
// BannerStore에서 이벤트 배너에서 사용되는 시작날짜, 끝날짜 설정값
const START_DATE = '2020-07-12 12:20:00';
const END_DATE = '2020-08-24 15:00:00';
class BannerStore extends Store implements IBannerStore {
private headerPartialStore: IHeaderPartialStore;
constructor(headerPartialStore: IHeaderPartialStore) {
...
TypeScript
복사
enum Type 선언
•
모달 필터(최신순,인기순 등등)나, 성별(남,여)과 같이 타입의 수가 정해진 경우, enum으로 선언
•
PascalCase
// 예)
export enum ListType {
GRID = 'grid',
LINEAR = 'linear',
}
export enum FilterType {
updatedAt = '최신순',
popularityPoint = '인기순',
descSalePrice = '낮은가격순',
ascSalePrice = '높은가격순',
bestSales = '판매순',
}
TypeScript
복사
네이밍 컨벤션
•
폴더명 : small case
•
파일명, interface, Class, Store, Enum : PascalCase
•
변수명 : camelCase
•
CONSTANT VALUE : UPPER CASE
1. click, change, load, keyDown, keyPress 이벤트 on ~ prefix
// 예)
onClickDownButton
onLoadOrderPage
onChangeInputBox
TypeScript
복사
2. Page폴더 하위 컴포넌트는 sufix로 Page네임 붙여주기
// 예)
ProductDetailPage
ProductListPage
TypeScript
복사
3. bool 타입 비교 prefix로 boolTo 붙여주기
// 예)
export const boolToVisible = (bool: boolean) => (bool ? 'visible' : 'invisible');
export const boolToActive = (bool: boolean) => (bool ? 'active' : '');
export const boolToInterval = (bool: boolean) => (bool ? 'footer-interval' : '');
TypeScript
복사
4. true, false 체크 is - prefix 시작
// 예)
isFixedStatus
isCategoryModalVisible
TypeScript
복사
5. Props 규칙
전부 sufix로 다음과 같은 이름을 붙여준다.
•
Store에서 다른 Store의 일부를 주입받을 때 : (인터페이스) PartialStore
// 예) HeaderStore <- BannerStore (IoC)
type IHeaderPartialStore = {
isMenuStatus: boolean;
};
export interface IBannerStore {
...
}
class BannerStore extends Store implements IBannerStore {
private headerPartialStore: IHeaderPartialStore;
constructor(headerPartialStore: IHeaderPartialStore) {
super();
this.headerPartialStore = headerPartialStore;
}
TypeScript
복사
•
Page에서 Store를 주입받을 때 : (인터페이스) Store
// 예) ProductDetailPage
interface IProps {
ProductDetailStore: IProductDetailStore;
}
Scala
복사
•
하위 컴포넌트에서 Store의 일부를 주입받을 때 (로직포함O -> ViewModel 자체 를 넘겨준다.) : ViewModel
// 예)
// 상위 컴포넌트
<div>
<BrandModal brandViewModel={productListViewModel} />
</div>
// 하위 컴포넌트 BrandModal
type IBrandViewModel = {
isBrandModalVisible: boolean;
onCloseBrandModal: () => void;
selectedBrand: string;
onChangeBrand: (brand: string) => void;
brandList: BrandCollection;
onClickAllBrand: () => void;
onClickBrand: (brand: Brand) => void;
};
interface IProps {
brandViewModel: IBrandViewModel;
}
TypeScript
복사
•
하위 컴포넌트에서 Store의 일부를 주입받을 때 (로직포함X : 객체로 묶어서 사용되는 값만 내려준다. 이름: sufix로 붙은 파일명)
// 예)
// 상위 컴포넌트
<div className="product-info">
<ProductFlag flags={detail.flags} />
<ProductName nameInfo={detail} />
</div>
// 하위 컴포넌트 ProductFlag
type IFlags = string[];
interface IProps {
flags: IFlags;
}
// 하위 컴포넌트 ProductName
type INameInfo = {
name: string;
brandName: string;
};
interface IProps {
nameInfo: INameInfo;
}
TypeScript
복사