이 글에서는 create-next-app이 프로젝트 이름을 검증하는 방법을 분석합니다.

validate: (name) => {
 const validation = validateNpmName(basename(resolve(name)))
 if (validation.valid) {
   return true
 }
 return 'Invalid project name: '   validation.problems[0]
},

create-next-app 명령을 사용할 때 공백을 포함하여 프로젝트 이름을 지정해 보셨나요? 그렇게 하면 프로젝트 이름 지정과 관련하여 특정 원칙을 따르기 때문에 프로젝트에 공백이 허용되지 않습니다.

그렇다면 명명 규칙은 무엇입니까?

validateNpmName 함수

이 create-next-app/index.ts를 확인하면 verifyNpmName이라는 함수가 호출됩니다. helpers/validate-pkg.ts

이 함수는 간단하며, verify-npm-package-name에서 가져온 유효성 검사ProjectName이라는 함수를 호출합니다.

문서에 따르면 이름이 유효하면 아래 개체를 다시 얻을 수 있다고 나와 있습니다.

{
 validForNewPackages: true,
 validForOldPackages: true
}

이름이 유효한 이유는 무엇입니까? 문서를 다시 확인해 보겠습니다. Documentataion은 다음과 같은 명명 규칙을 제공합니다.

1. 패키지 이름 길이는 0보다 커야 합니다.

2. 패키지 이름의 모든 문자는 소문자여야 합니다. 즉, 대문자나 대소문자 혼합 이름은 허용되지 않습니다.

3. 패키지 이름은 하이픈으로 구성될 수 있습니다.

4. 패키지 이름에는 URL에 안전하지 않은 문자가 포함되어서는 안 됩니다. (이름은 결국 URL의 일부가 되기 때문입니다.)

5. 패키지 이름은 로 시작할 수 없습니다. 또는 _

6. 패키지 이름에는 공백이 포함되어서는 안 됩니다.

7. 패키지 이름에는 다음 문자가 포함될 수 없습니다: ~)('!*

8. 패키지 이름은 node.js/io.js 핵심 모듈이나 예약/블랙리스트 이름과 같을 수 없습니다. 예를 들어 다음 이름은 유효하지 않습니다.
   
   — http
   
   - 개울
   
   — node_modules
   
   — favicon.ico

9. 패키지 이름 길이는 214자를 초과할 수 없습니다.

Next.js 프로젝트 이름을 지정할 때 명심해야 할 규칙은 다음과 같습니다.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에 사용되는 고급 코드베이스 아키텍처 개념을 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배 높이고, 모범 사례를 배우고, 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo (별표를 주세요!)

또한 웹 개발 및 기술 문서 작성 서비스도 제공합니다. 자세한 내용은 [email protected]으로 문의하세요!

참조:

1. https://github.com/vercel/next.js/blob/canary/packages/create-next-app/index.ts#L162

2. https://github.com/vercel/next.js/blob/canary/packages/create-next-app/helpers/validate-pkg.ts#L13

3. https://www.npmjs.com/package/validate-npm-package-name

4. https://github.com/npm/validate-npm-package-name/tree/main