보스처럼 Javascript 하위 폴더 모듈을 가져옵니다.

프로젝트에서 일하면서 이와 같은 코드를 작성해 본 적이 있습니까?
import { AddBank } from '../../../../pages/add-bank-account'
프로젝트가 커질수록 더 많은 폴더가 생성되고 더 깊은 파일이 중첩됩니다. 파일을 찾는 것은 악몽일 수 있으며 파일 가져오기도 마찬가지입니다. 이와 같은 파일을 가져오면 몇 가지 문제가 발생할 수 있습니다.

1. 융통성 없는 코드

위의 예에서 언뜻 보기에 이 작업이 쉽지 않은 것처럼 보일 수 있지만 폴더 구조가 변경되고 add-bank-account.js 에서 pages/bank/add-bank-account 로 이동한다고 가정해 보겠습니다. 가져온 모든 파일에서 import 문을 업데이트해야 합니다. 프로젝트에서 작업하는 사람의 수와 크기에 따라 문제가 발생할 수 있습니다.

2. 정신 모델을 구축하기 어렵다.

코딩하는 동안 우리는 사물을 더 빨리 기억하는 데 도움이 되는 정신 모델을 구축합니다. 이 가져오기 구조를 사용하면 특히 프로젝트의 다른 부분에 동일한 이름add-bank-account.js을 가진 여러 파일이 있는 경우 이 파일이 어디에 있는지 한 눈에 파악하기 어렵습니다.

이 문제는 새로운 개발자를 코드베이스에 온보딩할 때 명백해집니다. 초보자가 앱의 폴더 구조와 사물의 위치를 ​​파악하는 것은 고통 스러울 것입니다.

더 나은 방법.

대신 이와 같이 해당 함수를 가져올 수 있다면 어떨까요?
import { AddBank } from '@project/pages/add-bank-account'
파일 구조를 변경하면 다음과 같이 변경하기만 하면 됩니다.
import { AddBank } from '@project/pages/bank/add-bank-account'
이것이 훨씬 깨끗하고 초기 접근 방식과 관련된 문제가 없을 것이라는 점에 동의할 것입니다.

보스 준비가 되셨습니까?

Node와 npm의 아름다운 두뇌 덕분에 폴더를 노드 모듈로 설치할 수 있습니다. 이것은 우리의 ... 문제 해결을 포함하여 흥미로운 사용 사례를 허용합니다.

3, 2, 1에서 보스 업:

액세스하려는 폴더에 package.json를 만듭니다. 이 경우에는 /pages

{
"name" : "@project/pages",
"version" : "0.0.1",
"main": "index.js"
}

npm install -S ./pages

를 실행하여 폴더를 종속 항목으로 설치합니다.

루트의 종속성에 폴더를 추가해야 합니다package.json.

{
  "name": "boss-subfolder-import",
  "version": "1.0.0",
  "description": "Boss subfolder import",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "[email protected]",
  "license": "ISC",
  "dependencies": {
    "@project/pages": "file:pages",
    "express": "^4.17.1"
  }
}

이 게시물이 유용했다면 좋아요를 누르고 공유하세요.

동의 여부에 관계없이 아래 의견에서 이 접근 방식에 대해 어떻게 생각하는지 알려주세요.