● vue 프로젝트 빌드할 때 실행 순서
1. npm run build 를 하면 dist 폴더가 생기면서 내가 만든 assets 폴더와 components\main, login 가 복사된다.
2. dist 에 있는 파일들이 Temp폴더에 복사되고 이게 spring 에 build 된다.
마지막에 Temp는 삭제까지 deploy.bat 에 코드에 있기 때문에 .\deploy.bat 을 해준다.
3. spring 프로젝트에서도 controller 생성해서 Mapping 해주면 된다.
뷰 프로젝트 내 dist (-> Temp) 폴더의 .html 파일들을 build 해주어야 Spring 프로젝트 내 templates폴더에서 확인할 수 있다.
이렇게 하면 spring 프로젝트에서도 확인할 수 있다.
※ 근데!!!!
** ** ** ** ** ** ** ** ** **
중요한 것 1
.html 파일 : .js파일을 불러온다.
.js 파일 : .vue파일을 import
.vue 파일 : 실제로 화면에 출력되는 파일
1. HTML파일은 기본 뼈대이며 이는 외부 스크립트 .js 파일을 불러온다.
왜냐면 브라우저가 HTML파일을 로드하고 이 안에서 JS파일을 불러와서 앱의 동작이나 UI 구성을 실행하기 때문이다.
2. JS파일은 애플리케이션의 진입점 (entry point)으로서 Vue앱의 생성 , 플러그인 연결, 마운트 등을 담당한다.
다른 모듈(Vue컴포넌트 파일, 플러그인 설정파일 등)을 import 문을 사용해 불러온다.
JavaScript의 모듈 시스템 (ES Modules)을 사용해 코드의 재사용성을 높이기 위함
3. Vue파일 (= Vue컴포넌트)는 HTML, CSS, JavaScript가 한 파일에 결합되어 있는 하나의 독립적인 UI 단위를 표현한다.
각각의 컴포넌트는 template, style, script 섹션으로 나뉘어 UI와 로직, 스타일을 효과적으로 분리하고 통합한다.
main.js 는 Vue의 뇌와 같은 존재이며 HTML은 브라우저가 처음에 로드하는 기본 문서. vue컴포넌트는 코딩하기 좋음
** ** ** ** ** ** ** ** ** **
중요한 것 2
vue프로젝트의 Temp폴더 또는 spring프로젝트의 templates 폴더에 있는 것은 빌드된 이후 파일이기 때문에
vue프로젝트에서는 .html 파일에
<script type="module" src="login.js"></script>
이렇게 작성했지만, 빌드 후 파일을 보면 내용이 바뀐다.
assets/login-BNqIF-Mf.js 이런식으로 주소 값이 빌드할 때마다 계속 달라진다.
<script type="module" crossorigin src="../assets/login-BNqIF-Mf.js"></script>
<link rel="modulepreload" crossorigin href="../assets/vuetify-Bxu4-cIO.js">
<link rel="stylesheet" crossorigin href="../assets/vuetify-CnSlm9a7.css">
● .sh 파일과 .bat 파일 차이점
| 구분 | .bat 파일 | .sh 파일 |
| 사용하는 운영체제 | 윈도우 (Windows) | 리눅스 / 맥 (Linux / Mac) |
| 실행하는 프로그램 | CMD (명령 프롬프트) | bash, sh 등 셸 |
| 확장자 | .bat 또는 .cmd | .sh |
| 실행 방법 | 더블 클릭하거나 CMD에서 실행 | 터미널에서 sh 또는 bash로 실행 |
| 명령어 문법 | Windows 명령어 (dir, copy, del 등) | Linux 명령어 (ls, cp, rm, mv 등) |
| 예시 명령어 | del, mkdir, echo, xcopy | rm, mkdir, echo, cp |
둘 다 자동화 스크립트인데 os에 따라 다른 것이다.
아래는 참고할 예시. 한 줄씩 설명 달아두었다.
<deploy.bat>
# Windows용 Build and 배포 스크립트.
# templates는 전체 삭제를 하면 안됨!!.
# thymeleaf 태그로 만든 fragment가 templates에 있어서 절대로 전체 삭제 하면 안됨.
rmdir /s /q "../main/resources/templates/main/"
rmdir /s /q "../main/resources/templates/login/"
: templates 폴더 안의 main과 login 폴더를 통째로 지운다
::call npm을 해야 build 종료후 하위 스크립트가 실행이 된다.
call npm run build
echo "build complete"
: : npm build를 실행한다. (웹 화면 만드는 작업)
mkdir Temp
: Temp라는 임시 폴더를 만든다
xcopy "dist" "Temp" /s /e /k /y
: dist 폴더 안의 모든 파일들을 Temp로 복사
cd Temp
: Temp폴더로 이동
move "assets" "../../main/resources/static"
: Temp/assets 폴더를 static 폴더로 옮긴다
timeout /t 3
: 3초 기다린다
xcopy . "../../main/resources/templates" /s /e /k /y
: Temp 폴더 안의 나머지 파일들을 templates 폴더로 복사
@REM
@REM cd ..
@REM rmdir /s /q Temp
<deploy.sh>
# templates는 전체 삭제를 하면 안됨!!.
# thymeleaf 태그로 만든 fragment가 templates에 있어서 절대로 전체 삭제 하면 안됨.
rm -rf ../main/resources/templates/main/
: main 템플릿 폴더만 삭제
: main.html 또는 하위 템플릿들이 새로 빌드되어 교체되는 대상
#rm -rf ../main/resources/templates/login/
#rm -rf ../main/resources/templates/orderProduct/
#rm -rf ../main/resources/templates/header/
: 이 주석은 예전에는 login, orderProduct, header 템플릿도 삭제했지만,
지금은 보호하고 있다는 뜻
rm -rf ../main/resources/static/assets
: 정적 리소스(static files)인 assets 폴더를 삭제
npm run build
: 프론트엔드 애플리케이션 빌드 명령어로 dist 폴더 생성됨
: 빌드된 결과물(html, js, css 등)이 생성
cp -r ./dist ./Temp
: dist 빌드 결과물을 Temp 폴더로 복사
: 정리해서 원하는 폴더로 옮기기 위함이다.
cd ./Temp
: Temp 폴더로 이동
mv ./assets ../../main/resources/static
: 빌드된 정적 파일인 assets 폴더를 Spring Boot의 정적 리소스 폴더로 이동시킴
: 즉 /static/assets에 넣어야 웹 브라우저가 접근할 수 있음
cp -r ./ ../../main/resources/templates
: Temp에 있는 나머지 파일들(html 등)을 templates 폴더로 복사
: 즉, 빌드된 html 템플릿을 Thymeleaf용으로 옮김
cd ../
rm -rf Temp
: Temp 디렉토리를 삭제해서 정리
예시
boot-sample-vue3-src\
login.html 에 <script> 가 login.js로 연결되어 있다.
login.js 에 login/login.vue가 import 되어 있다.
src\components\login\login.vue
그리고 실행했을 경우
결론
: .html 에서 <title> 태그 쓴 것과 .vue에서 <template> 쓴 게 둘 다 출력된다는 것을 알 수 있다.
'웹 개발 > [KLOZ] 웹 프로젝트' 카테고리의 다른 글
| [KLOZ] 파비콘 생성 추가 (0) | 2025.06.13 |
|---|---|
| [KLOZ] 한 행 입력~ 여러 행 입력~ 할 때 Dto와 Controller (0) | 2025.06.04 |
| [KLOZ] map -> builder Pattern (0) | 2025.06.04 |
| spring boot 서버 실행할 때 나오는 텍스트 변경하기 (0) | 2025.05.20 |
| [Thymeleaf] 화면에 문자열 또는 view 띄우기 (1) | 2025.05.12 |