
덥디 더운 여름, 한 개발자가 React, Vue를 둘 다 사용하며 여러 프로젝트에 참관하며 개발에 관여하게 되었는데 그 개발자분이 관여할 때마다 자꾸 존재해서는 안되는 파일들이 개발 브랜치에 저장되는 것이다.
무슨 파일인지 자세히 들여다보니
package-lock.json

그렇다, 우리 React 프로젝트는 패키지 관리자를 Yarn을 사용하지만 여러 프로젝트에 로밍을 다니시는 개발자분께서는 NPM을 사용하시기 때문에 말도 안되는 찌꺼기 파일이 남은 것.
.gitignore에 추가만 해줘도 브랜치에 올라가지 않겠지만 사실 근본적인 문제는 여러 패키지 관리자를 사용하다보니 일관성이 없어서 패키지별 버전이 다를 수도 있는 등 문제가 발생할 수 있는 여지가 있었던 것이다.
평소, 유난히 깔끔 떠는 나에게는 너무나도 신경쓰였기 때문에 이를 막기 위해 말씀을 드렸으나 여러 프로젝트를 오가시기에 실수가 잦아 npmrc에 설정을 추가하는 방식으로 특정 패키지 관리자만 사용하도록 못을 박았다.
프로젝트 폴더에 .npmrc란 파일에 engine-strict=ture 를 추가한다.
이는 패키지 관리자를 엄격하게 검증하는 설정이다.
/// .npmrc
engine-strict=true
그리고 package.json에 해당 내용을 추가한다.
/// package.json
"engines": {
"node": ">=16.0.0",
"yarn": ">=3.6.0",
"npm": "use yarn",
"pnpm": "use yarn"
}
여기서 node 버전과 패키지 관리자의 버전들을 지정할 수 있다. 만약 지정되지 않은 이외의 버전이나 패키지 관리자를 사용할 경우 정상적으로 작동하지 않는 것을 볼 수 있다.
특히 npm, pnpm에는 "use yarn"이라는 문자열을 넣었는데 이는 npm, pnpm 패키지 관리자를 사용했을 때 터미널에 use yarn 이라는 경고 메시지를 출력함으로 왜 사용이 안되는지 파악할 수 있다.

'개발 이야기 > JavaScript' 카테고리의 다른 글
자주 사용하는 HTML ARIA 접근성 (accessibility) (0) | 2023.11.20 |
---|---|
Visual Studio Code 확장 프로그램(익스텐션) 추천 - 웹(Web) 개발용 40개 이상 (4) | 2023.08.27 |
웹팩(Webpack)과 비트(Vite)의 성능을 실험해보았다. (0) | 2023.06.16 |

덥디 더운 여름, 한 개발자가 React, Vue를 둘 다 사용하며 여러 프로젝트에 참관하며 개발에 관여하게 되었는데 그 개발자분이 관여할 때마다 자꾸 존재해서는 안되는 파일들이 개발 브랜치에 저장되는 것이다.
무슨 파일인지 자세히 들여다보니
package-lock.json

그렇다, 우리 React 프로젝트는 패키지 관리자를 Yarn을 사용하지만 여러 프로젝트에 로밍을 다니시는 개발자분께서는 NPM을 사용하시기 때문에 말도 안되는 찌꺼기 파일이 남은 것.
.gitignore에 추가만 해줘도 브랜치에 올라가지 않겠지만 사실 근본적인 문제는 여러 패키지 관리자를 사용하다보니 일관성이 없어서 패키지별 버전이 다를 수도 있는 등 문제가 발생할 수 있는 여지가 있었던 것이다.
평소, 유난히 깔끔 떠는 나에게는 너무나도 신경쓰였기 때문에 이를 막기 위해 말씀을 드렸으나 여러 프로젝트를 오가시기에 실수가 잦아 npmrc에 설정을 추가하는 방식으로 특정 패키지 관리자만 사용하도록 못을 박았다.
프로젝트 폴더에 .npmrc란 파일에 engine-strict=ture 를 추가한다.
이는 패키지 관리자를 엄격하게 검증하는 설정이다.
/// .npmrc
engine-strict=true
그리고 package.json에 해당 내용을 추가한다.
/// package.json
"engines": {
"node": ">=16.0.0",
"yarn": ">=3.6.0",
"npm": "use yarn",
"pnpm": "use yarn"
}
여기서 node 버전과 패키지 관리자의 버전들을 지정할 수 있다. 만약 지정되지 않은 이외의 버전이나 패키지 관리자를 사용할 경우 정상적으로 작동하지 않는 것을 볼 수 있다.
특히 npm, pnpm에는 "use yarn"이라는 문자열을 넣었는데 이는 npm, pnpm 패키지 관리자를 사용했을 때 터미널에 use yarn 이라는 경고 메시지를 출력함으로 왜 사용이 안되는지 파악할 수 있다.

'개발 이야기 > JavaScript' 카테고리의 다른 글
자주 사용하는 HTML ARIA 접근성 (accessibility) (0) | 2023.11.20 |
---|---|
Visual Studio Code 확장 프로그램(익스텐션) 추천 - 웹(Web) 개발용 40개 이상 (4) | 2023.08.27 |
웹팩(Webpack)과 비트(Vite)의 성능을 실험해보았다. (0) | 2023.06.16 |