[Docker] Spring Boot, Vue, MariaDB, Nginx 통합 배포하기

Docker 환경에서 Spring Boot, Vue, MariaDB, Nginx 통합 배포하기    Docker 환경에서 통합 배포하기  프로젝트 개요현재 진행 중인 프로젝트는 다음과 같은 구성 요소를 포함합니다:프론트엔드: Vue.js백엔드: Spring Boot데이터베이스: MariaDB각각의 컴포넌트는 독립적으로 실행 및 테스트되었습니다.이제 이들을 도커를 사용하여 통합하고, 모두 연동된 상태에서 한 번에 실행할 수 있도록 할 계획입니다.   프론트엔드 Vue.js 빌드 : disk 파일 제작   프론트엔드 Vue.js 빌드 npm run buildvue.js프로젝트를 빌드 해줍니다. 프로젝트 파일 위치에 가보면 disk라는 폴더 밑에 이렇게 파일이 구성됩니다.   백엔드 Spring Boot 빌드..

• format_list_bulleted IT관련/Docker
• · 2024. 8. 14.
• textsms

[AWS] AWS에 vue 프로젝트 배포하기

vue 배포하기  VUE build npm run build터미널에 명령어를 입력하면 build파일을 만들어줍니다.   프로젝트를 가보면 dist폴더가 생성되어 있습니다.  dist폴더 안에는 이렇게 구성이 되어있는데 이걸 배포할곳에 올려주면 됩니다.       AWS S3 버킷 만들기 AWS S3 버킷에 올려보도록 하겠습니다.로그인하여 버킷에서 버킷만들기를 해줍니다.      버킷을 만들어 줍니다.     S3 버킷 정책설정 및 배포vue에서 만든 dist 폴더 안에 파일을 모두 올려 줍니다. 속성탭에서 정책웹사이트호스팅 편집을 클릭합니다.  수정 후 변경사항 저장을 눌러줍니다.   권한 - 버킷정책 편집버튼을 클릭합니다.   정책생성기 클릭  S3 Bucket Policy선택*전체 접근가능하게 설정A..

• format_list_bulleted IT관련/AWS
• · 2024. 8. 6.
• textsms

[vue] router 라우터 사용법

vue router  라우터 사용법    라우터란?라우터는 웹 애플리케이션에서 URL 경로에 따라 어떤 컴포넌트나 페이지를 보여줄지를 결정하는 시스템입니다. 예를 들어, 사용자가 '홈' 링크를 클릭하면 홈 페이지로 이동하고, '정보' 링크를 클릭하면 정보 페이지로 이동하도록 설정할 수 있습니다. 이를 통해 사용자에게 원하는 콘텐츠를 쉽게 제공할 수 있습니다.  라우터 설치npm install vue-router터미널에서 vue-router를 설치해 줍니다.  main.jsimport { createApp } from "vue";import App from "./App.vue";import router from "./router";const app = createApp(App);app.use(router)..

• format_list_bulleted Vue
• · 2024. 8. 6.
• textsms

[vue] 무한스크롤 적용하기

무한스크롤 적용하기   처음에는 라이브러리 불러서 써보려고 했는데...잘안되서 라이브러리는 포기하고 순수 바닐라자바스크립트 코드로 구현하였습니다.  기본 로직은 간단합니다. 1. 스크롤이 바닦에 갔는지 계산2. 스크롤이 바닦까지 갔을때 데이터를 추가호출3. 기존 화면에 뿌리는 데이터에 추가   data 변수 선언  처음 mount 할때 scroll 이벤트 리스너 추가   Backend 데이터 연결 부분newData는 최종데이터까지만 추가 하도록 하지 않으면 무한반복됩니다.  scroll할때 페이지 높이 계산하여 데이터 추가    vue script 부분 코드    화면쪽 코드 {{ new Date(order.order_date).toLocaleString() }} ..

• format_list_bulleted Vue
• · 2024. 8. 6.
• textsms

[vue] 위지위그 summernote 사용법 : 게시글 작성 에디터

위지위그 summernote    위지위그 summernote  사용방법 위지위그(WYSIWYG) "What You See Is What You Get"화면에서 보는 대로 결과가 나타나는 편집기를 말합니다. 예를들어, 티스토리 블로그에서 게시글을 작성할 때, 화면에 보이는 작성한 그대로 출력 결과를 볼수 있는 기능입니다.   Summernote는 웹 기반의 WYSIWYG 에디터입니다.사용자가 쉽게 HTML 콘텐츠를 작성하고 편집할 수 있게 도와주는 오픈소스 라이브러리입니다.간편한 UI와 다양한 기능으로 웹 페이지에서 텍스트와 이미지를 직관적으로 수정할 수 있습니다.   summernote 사이트에 접속해서Getting  stared → Installation에 보면 Bootstrap버전별 혹은 Witho..

• format_list_bulleted Vue
• · 2024. 8. 5.
• textsms

[vue] 부모 - 자식 컴포넌트 데이터 이동

vue - 부모 자식 컴포넌트 데이터 이동     app.vue    ParentsComponent.vue 부모 컴포넌트 {{ messageFromChild }}     ChildComponent.vue 자식 컴포넌트 어머님 말씀 : {{ abcname }} 답장

• format_list_bulleted Vue
• · 2024. 8. 1.
• textsms