[FRONT] Svelte 프로젝트의 변경 내용이 웹 페이지에 적용되지 않는 문제

발생한 문제

Spring Boot 프로젝트에서 Svelte를 얹어 웹페이지를 구성하는데 있어 main.js 파일이나 .svelte 파일을 아무리 수정해도 실제 웹 서버에서 출력되는 페이지에 적용되지 않는 문제가 발생하였습니다.

원인

Svelte 프로젝트를 Spring Boot 프로젝트 위에 얹으면서 구조를 제대로 파악하지 못했기 때문에 발생한 문제였습니다. build.gradle에는

task deleteSvelteBuildFiles(type: Delete) {
    delete "src/main/resources/static/dist", "${project.projectDir}/svelte/node_modules"
}
task npmBuild(type: NpmTask, dependsOn: ['deleteSvelteBuildFiles', 'npmInstall']) {
    args = ["run", "build"]
}

processResources.dependsOn 'npmBuild'

부분을 추가하여 Spring Boot 프로젝트 빌드시에 자동으로 Svelte 프로젝트도 같이 빌드되도록 하였으며
rollup.config.js 파일에서 빌드 경로를

output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: '../src/main/resources/static/dist/build/bundle.js'
    },

src/main/resources/static 경로 밑으로 지정하였고 static 경로에 있는 index.html 파일 안에는

<script defer src='dist/build/bundle.js'></script>

부분이 있어 빌드된 svelte 프로젝트를 읽어올 수 있게 되어있습니다.
Spring Boot 프로젝트에서 읽어들이는 경로가 static 디렉토리 밑이기에

├── static
│   ├── App.svelte
│   ├── bundle.css
│   ├── bundle.js
│   ├── bundle.js.map
│   ├── dist
│   │   └── build
│   │       ├── bundle.css
│   │       ├── bundle.js
│   │       └── bundle.js.map
│   ├── index.html
│   └── main.js
└── templates

위와 같이 App.svelte 파일과 main.js 파일도 static 디렉토리 밑에 복사하여 수정하면서 사용하고 있었는데 이게 원인이였습니다.
실제 빌드는 static 밑의 경로가 아닌 다른 위치에 있는 App.svelte와 main.js 파일을 기반으로 실행되었기에 변경사항이 적용되지 않고 있었던 것이였습니다.

해결

svelte 프로젝트의 원래 위치에서 변경 내용을 작성 후 빌드한 후에 웹 서버를 실행하면 변경사항 적용이 잘 적용되는 것을 확인했습니다.

Melon-Shake / API

[FRONT] Svelte 프로젝트의 변경 내용이 웹 페이지에 적용되지 않는 문제 #91

발생한 문제

원인

해결