IDE를 도우면 IDE가 도움이 됩니다 - 예

나는 거의 읽지 않는 깨끗한 코드 각도에 대해 이전에 쓴 적이 있습니다. .

이것은 관점의 변화입니다.

Instead of scraping together the easiest to write code possible you think about how much the coding tools (particularly your IDE or typescript 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 , controllersinterceptors 모두를 빌어먹을 디렉토리에서 바로 로드함으로써 미래를 대비할 수 있었습니다.

괜찮습니다. 하지만 나중에 다른 개발자가 문제를 추적해 올 것입니다. "어쩌면 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 };


👍

장점과 단점



전문가:
  • 우리 IDEtypescript는 이제 우리 함수
  • 의 사용법을 알게 될 것입니다.
  • 삭제/리팩터링할 때 경고할 수 있음
  • 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, /* ... */];
    


    마지막으로 우리가 서버를 생성하는 위치는 간단하게 유지될 수 있으며 매우 긴 가져오기/내보내기를 깔끔하고 쉽게 읽을 수 있는 파일에 넣어 보관할 수 있습니다.

    요약



    선택할 수 있는 옵션이 있을 때 가지고 있는 코딩 도구와 더 잘 작동하는 솔루션을 선택해야 합니다. 그들에게 사랑과 보살핌을 주면 당신이 필요로 할 때 당신을 구할 것이고, 태만을 먹이면 당신을 돕지 않을 것입니다.

    🙃

    좋은 웹페이지 즐겨찾기