IDE를 도우면 IDE가 도움이 됩니다 - 예
8839 단어 javascriptcleancodebeginnersnode
이것은 관점의 변화입니다.
Instead of scraping together the easiest to write code possible you think about how much the coding tools (particularly your
IDE
ortypescript
transpiler) are going to be able to make use of it.
이것이 당신에게 생소하게 들린다면 나는 최근에 실제로 당신을 문제로 이끌 수 있는 무해해 보이는 것을 발견했습니다.
koa
라이브러리를 사용하여 routing-controllers
서버를 시작한다고 가정해 보겠습니다. 당신은 controllers
, middlewares
, interceptors
...또한 두 가지 옵션이 있습니다. 이러한 기능을 배열로 추가하거나 디렉토리를 추가하면
createKoaServer
기능이 찾아줍니다.이제
errorInterceptor
가 있다고 가정해 보겠습니다.// 'interceptors/error-interceptor/index.js'
export function errorInterceptor() { /* ... */ }
그런 다음 디렉토리를 지정하는 옵션으로 이동합니다.
import * as path from 'path';
import { createKoaServer } from 'routing-controllers';
const app = createKoaServer({
controllers: [path.join(__dirname, 'controllers/**/index.js')],
middlewares: [path.join(__dirname, 'middlewares/**/index.js')],
interceptors: [path.join(__dirname, 'interceptors/**/index.js')]
});
export { app };
우리는
middlewares
, controllers
및 interceptors
모두를 빌어먹을 디렉토리에서 바로 로드함으로써 미래를 대비할 수 있었습니다.괜찮습니다. 하지만 나중에 다른 개발자가 문제를 추적해 올 것입니다. "어쩌면
errorInterceptor
가 실행되고 있지 않습니까?"🤔.그래서 그들은
Find Usages
에서 IDE
옵션을 사용할 것입니다....그리고 "사용하지 않음"이라고 표시됩니다. 그런 다음
errorInterceptor
를 검색하고 정의만 찾습니다."그럼 정말 데드코드였나보네요! 그럼 삭제합시다!"
그러면 모든 지옥이 풀립니다.
또는 삭제하지 않으면 한 폴더에 하나의 파일이 있는 것이 짜증날 수 있고 낭비라고 생각할 수 있으므로 이름을
index.js
-> error-interceptor.js
로 바꾸고 한 폴더 위로 interceptors/error-interceptor.js
...이 모든 것이 문제를 해결하고
Run
버튼을 누를 때까지 알 수 없습니다.찬반 양론
PRO: 새로운 미들웨어/컨트롤러를 추가하거나 정리하는 것에 대해 생각할 필요가 없습니다.
단점: 당신의 IDE는 이것들 중 어느 것도 사용된 적이 없다고 말할 것이고, 잘못된 형식을 사용한다면
typescript
트랜스파일러는 당신을 돕지 않을 것입니다... 당신은 본질적으로 모든 자동 안전 장치를 껐습니다. 테스트만이 당신을 구할 수 있습니다.개인적으로 저는 사전 런타임 검사가 매우 유용하다는 것을 알게 되었으며 두 가지 솔루션이 있는 경우 더 많은 솔루션이 있는 솔루션을 선호합니다.
Runtime is a "weird quantum state" where we do not know what is there until we get there: the more we push into this realm that less our coding tools will help us find the landmines before we step on them.
다른 옵션을 선택하고 항목을 직접 전달하면 어떻게 될까요?
error-interceptor/index.js
파일은 그대로 유지되며 이전 솔루션의 "미래 대비"성을 유지하기 위해 interceptors
폴더에 새 파일을 생성해 보겠습니다.// `interceptors/index.js`
import { errorInterceptor } from './errorInterceptor/.';
import { otherInterceptor } from './otherInterceptor/.';
export const interceptors = [errorInterceptor, otherInterceptor, /* ... */];
서버를 생성하는 파일의 다른 위치:
import { createKoaServer } from 'routing-controllers';
import { interceptors } from './interceptors/.';
const app = createKoaServer({
interceptors: interceptors,
// controllers: controllers,
// middlewares: middlewares
});
export { app };
👍
장점과 단점
전문가:
IDE
와 typescript
는 이제 우리 함수 controllers
/middlewares
/injectors
를 이동하면 IDE
를 사용하여 경로를 업데이트할 수 있습니다... 단점:
여기에 확실한 승자가 있다고 생각합니다.
"하지만 50개 이상의 컨트롤러가 있다면 어떻게 될까요?"
이 경우 더 작은 폴더로 그룹화하고 싶습니다. 예를 들면 다음과 같습니다.
\controllers
\user-controllers
\login
\logout
\...
\index.js
\product-controllers
\add
\remove
\...
\index.js
index.js
이 솔루션
user-controllers\index.js
로드에서 배열로 그룹화하면 폴더에서 모든 컨트롤러를 내보냅니다.// controllers/user-controllers/index.js
import { login } from './login';]
// ...
export const userControllers = [login, logout, /* ... */];
// ------
// /controllers/index.js
import { userControllers } from './user-controllers';
import { productControllers } from './product-controllers';
export const controllers = [...userControllers, ...productControllers, /* ... */];
마지막으로 우리가 서버를 생성하는 위치는 간단하게 유지될 수 있으며 매우 긴 가져오기/내보내기를 깔끔하고 쉽게 읽을 수 있는 파일에 넣어 보관할 수 있습니다.
요약
선택할 수 있는 옵션이 있을 때 가지고 있는 코딩 도구와 더 잘 작동하는 솔루션을 선택해야 합니다. 그들에게 사랑과 보살핌을 주면 당신이 필요로 할 때 당신을 구할 것이고, 태만을 먹이면 당신을 돕지 않을 것입니다.
🙃
Reference
이 문제에 관하여(IDE를 도우면 IDE가 도움이 됩니다 - 예), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/latobibor/your-ide-helps-if-you-help-the-ide-example-31g2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)