Q1. 네이밍
책에는 너무 명료하게 나온거 같지만 실제경험시에는 개발자의 복합적인 성향까지 고려해야하기 때문에 설득의 문제에 있어서 너무 어려움이 발생하는 일이다.
단순히 변수, 함수명으로만 보지말고 파일, 프로젝트, 도메인으로 조금 넓히게 되면 이름이 길어질 수도 있다.
예)
// Before 😣
bottom-sheet/
├── BottomSheetCouponInfo.tsx
├── BottomSheetCreditCardInfo.tsx
├── BottomSheetDiscountInfo.tsx
├── BottomSheetButton.tsx
├── BottomSheetContent.tsx
├── index.ts // optional export hub
// After 😎
// 후보1.
shortform/bottom-sheet/
├── bottom-sheet-coupon-info.tsx
├── bottom-sheet-credit-card-info.tsx
├── bottom-sheet-discount-info.tsx
├── bottom-sheet-button.tsx
├── bottom-sheet-content.tsx
├── index.ts // optional export hub
// 후보2
shortform/bottom-sheet/
├── coupon-info.tsx //
├── credit-card-info.tsx
├── discount-info.tsx
├── button.tsx
├── content.tsx
├── index.ts // optional export hub
어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.
변경점: 폴더,파일명은 케밥 ,컴포넌트는 파스칼케이스로 그대로 유지
이유
- 파일명이 길어지면 파스칼의 경우 가독성이 떨어진다.
- 파스칼의 경우 만약, 글자는 그대로 대소문자만 파일명을 변경해서 커밋한경우 이슈가 발생할 수 있다.
설득의 여지가 필요하지만 사실 위에 2가지가 가장 킥인 이유이다.
그중 1번의 이유가 가장 킥.
패스를 보면 어떤 피처에 속한건지 분명히 표시가 되지만, 어떤 사람들은 컴포넌트를 사용하는 쪽(예:couponInfo) 자체 컴포넌트명만을 보고 이게 무엇인지 알고 싶어하는 니즈를 갖고 있는 사람도 있다.
따라서 후보2처럼 중복 프리픽스를 제거하게 되면 이게 shortform도메인의 바텀시트 소속의 놈인지 다른쪽 놈인지 헷갈리다라며 중복적인 프리픽스를 넣는것을 선호하는 분들도 있다. 그리고 만약 파일명과 컴포넌트의 이름을 동일하게 해야한다고 하는 주장까지 있다면, 파일명은 길어질 수 밖에 없다.
이때 파스칼을 유지하면 굉장히 난감해진다. 나는 그랬다. 그래서 그런경우라면 절충안으로 파스칼을 쓰는게 좋을 거로 보인다. 이경우 => 선택 후보1
패스를 보고 중복프리픽스를 제거할 수 있는 의견으로 모인다면, 선택 후보2 , 이경우 도메인별로 동일한 이름이 있을 수 있지만
나는 개인적으로는
후보2가 낫다고 본다. 어차피 컴포넌트 명만을 보고 컴포넌트의 기본 목적뿐 아니라 도메인 등 기타 소속정보까지 알고 싶다면 컴포넌트명은 길어질 수 밖에 없고, 그럼 사실 폴더링의 의미가 없기때문이다. 추가로 만약 파일명이 짧아지더라도 파일명은 파스칼보다는 케밥이 낫다고 본다.
Q2. 함수
// Before 😣
webViewRef.current?.injectJavaScript(
자바스크립트 ....
)
// After 😎
//유틸구현처
const getCheckCookiesScript = () => {
...
}
export const webViewScriptNames = Object.freeze({
checkCookies: 'check-cookies',
...
})
export const webViewScripts: Record<string, WebViewScriptType> = {
[webViewScriptNames.checkCookies]: {
name: 'check-cookies',
getScript: getCheckCookiesScript,
},
[webViewScriptNames.clearSession]: {
name: 'clear-session',
getScript: clearSessionScript,
},
[webViewScriptNames.getStorage]: {
name: 'get-storage',
getScript: getStorageScript,
},
[webViewScriptNames.getHistoryLength]: {
name: 'get-history-length',
getScript: getHistoryLengthScript,
},
[webViewScriptNames.blackOrOpenLanding]: {
name: 'black-or-open-landing',
getScript: blackOrOpenLandingScript,
},
}
//사용처
webViewRef.current?.injectJavaScript(
webViewScripts[webViewScriptNames.checkCookies].getScript()
)어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.
webViewRef.current?.injectJavaScript() 를 사용하는 경우가 엄청 많다면 일일히 스크립트를 칠수도 있다. 분기를 하더라도 단순히 스크립트 리터럴템플릿을 써서 구분만 할 수도 있다.
하지만 만약 그 양이 많아지고 복잡해질수 있다면
1. 그 목적에 따라 함수들을 구분해서 구현하고
2. 구분한 함수를 컨트롤하도록 규격화하면 좀 더 유지관리가 편해질 수 있음.
Q3. 형식맞추기
// Before 😣
팀세팅이 없음.
// After 😎
.vscode/settings.json 을 통해 팀간 약속을 정하고, 실제 약속대로 한 세팅을 바라보고 있는지 확인필요
중요한건 내가 바라보고 있는 세팅이 프로젝트 세팅인지 내가 개별적으로 세팅한것을 바라보는지 확인이 중요!!!
