스크립트 파일 import 문제 (순서에 따라 하나만 사용가능한 오류)

만약 두 개의 자바스크립트 파일 중 하나만이 작동한다면, 그것은 파일이 동작하는 순서에 따라 발생할 수 있는 문제일 수 있습니다.

보통 두 파일에 중복된 함수나 변수가 있거나 한 파일이 다른 파일의 함수나 변수에 의존하는 경우에 발생할 수 있습니다. 여러분이 위에 있는 파일이 먼저 실행되기를 원한다면, 아래의 방법들을 시도해 볼 수 있습니다:

1. **의존성 확인**: `contractChange.js`가 `customerService.js`에서 제공되는 기능에 의존하는 경우, `customerService.js`를 `contractChange.js`보다 먼저 가져오십시오. 이렇게 함으로써 의존성이 해결되고 의존하는 스크립트가 실행되기 전에 모든 종속 항목이 로드됩니다. ```html <script th:src="@{/js/src/community/customerService.js}"></script> <script th:src="@{/js/src/community/contractChange.js}"></script> ```

2. **네임스페이스 사용**: 두 스크립트가 전역 변수나 함수를 동일한 이름으로 정의하는 경우, 충돌이 발생할 수 있습니다. 충돌을 방지하기 위해 각 스크립트를 자체 모듈이나 네임스페이스로 캡슐화하세요.

3. **디버깅**: 브라우저 콘솔에서 스크립트 로드나 실행에 문제가 있는지 확인하십시오. 또한 `th:src` 속성의 경로가 올바른지 확인하고, 올바른 JavaScript 파일을 가리키는지 확인하십시오.

4. **JavaScript 모듈 로더 사용**: RequireJS 또는 ES6 모듈과 같은 JavaScript 모듈 로더를 사용하여 의존성을 더 효과적으로 관리할 수 있습니다. 이러한 도구를 사용하면 의존성을 명시적으로 정의하고 스크립트를 비동기적으로 로드할 수 있습니다. 위의 단계를 따르면, 두 스크립트가 충돌 없이 올바르게 가져오고 실행될 수 있어야 합니다.

 

나의 경우에는 const 변수가 이름이 동일한 것이 있어서, 두개가 충돌해서 발생한 오류였다.