[Node.js] 프로젝트 캐시 삭제하기

컴포넌트를 만들 때 처음에 example.tsx로 했다가 Example.tsx로 변경했다. 

다른 컴포넌트에 import 할려고 작성하다가... 

Already included file name 'C:/Dalmuri/src/Example.tsx' differs from file name 'C:/Dalmuri/src/Example.tsx' only in casing. 
The file is in the program because: 
... etc

이런식으로 뜨더라

확인해보니 운영체제와 TypeScript가 파일 이름 대소문자를 다르게 인식해서 생기는 충돌 오류라고....

Window는 파일 이름의 대소문자를 구분하지 않으므로 example.tsx와 Example.tsx를 구분하지 않는데. 

그러나 내가 파일 이름을 바꿨고, example.tsx의 캐시가 계속 남았기 때문에 불필요한 충돌이 일어났던것...

이럴땐 프로젝트 내 캐시를 삭제해야 한다.

 

1. 삭제하기 전에

내 프로젝트는 Node.js 환경에서 만들어졌기 때문에 npm을 사용할 수 있다.

따라서 지금부터 설명할 선행 조건으로

1. 프로젝트가 Node.js로 구성될 것(npm을 실행할 수 있도록)
2. package.json이 있을 것

2. package.json 오픈하기

파일을 오픈하면 스크립트가 나올 것이다. 

나의 경우 스크립트에 clean 스크립트가 없었기 때문에 다음과 같이 추가하였다.

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "predeploy": "vite build && cp ./dist/index.html ./dist/404.html",
    "deploy": "gh-pages -d dist",
    "clean" : "rimraf node_modules/.cache" // 이거 추가!
  },

• rimraf: 리눅스/유닉스의 rm -rf를 크로스 플랫폼으로 구현한 모듈. Node.js에서 강제로 파일이나 디렉토리를 삭제할 때 사용한다. 일반적인 운영체제에서 일관되게 작용됨
• node_modules/.cache : node_modules폴더 내에 있는 .cache라는 이름의 디렉토리를 가리킴

cache 디렉토리는 보통 개발 도구들이 성능 향상을 위해 생성하는 임시 파일을 저장하는 장소인데, 이 캐시를 삭제하는 clean 스크립트를 정의하는 이유는

1. 문제 해결: 개발이나 빌드 과정에서 알 수 없는 오류가 발생했을 때 오래되거나 손상된 캐시 파일이 원인일 수 있음
2. 클린 빌드 : 이전 빌드의 잔여물이 남는 것을 방지하고 완전히 깨끗한 상태에서 빌드를 시작함
3. 디스크 공간 확보

이렇게 깔끔따리 쓸 것

3. npm run clean 실행

package.json에 있는 clean 스크립트를 실행한다.

위에서 clean 스크립트를 정의했으니 실행할 수 있다.

 

4. npm run dev 실행!

npm run dev → 개발 서버(또는 빌드 프로세스)를 다시 시작한다. 이때 삭제된 캐시가 없으니 모든 모듈/로더가 완전 재컴파일을 수행하고, 필요한 캐시는 새로 생성된다.

참고로 npm run clean && npm run dev를 작성하면 clean이 성공적으로 됬을 때 dev명령을 실행한다!

+ && → 첫 명령이 **성공(종료 코드 0)**일 때만 뒤의 명령을 실행한다. 즉 캐시 삭제가 정상적으로 끝나야 npm run dev가 실행된다.

 

해결완!