반응형 vue38 [GitHub Actions] Spring boot, vue 통합, 배포(CICD) 구축 CI/CD(Continuous Integration/Continuous Delivery)란? CI/CD(지속적 통합/지속적 배포)는 애플리케이션 개발 단계를 자동화하는 방법이다. CI/CD 종류(Jenkins, Github Actions) 저는 Github Acions를 이용했습니다. GithubActions yml 파일을 이용해 자동화를 수행 할 workflow를 설정 Github에서 발생하는 이벤트(push, merge)를 트리거로 동작 시킨다. CI/CD 프로세스(Back-end: Spring boot) 1. 원격 저장소에 있는 main branch에 push를 기준으로 트리거 2. 프로젝트 빌드 3. 서버에 ssh 접속 4. 기존의 jar 파일 백업 5. jar파일 전송 6. 실행 권한 변경 및 .. 2023. 11. 1. [Vue3] Vue.js에서 자식 컴포넌트의 렌더링 순서에 대한 오해(v-for) 부모 컴포넌트 //부모 컴포넌트 추가 자식 컴포넌트 //자식 컴포넌트 {{item + '::->' + testData}} 처음 마운트 하는 경우 예상하는 값으로 랜더링이 되고 있다. 이때 test4를 추가해보자 (상황: list 0번째에 새로운 데이터를 추가하기 위해 list.value = [data.value, ...list.value] 로 추가했다) 새로 추가된 값에 경우 testData의 값이 test3으로 들어오는 게 확인 된다. 잘 살펴 보면 마지막 test1만 원하는 값이 나오고 나머지는 그전에 값과 동일한 값이 나온다. 이유 처음 부모가 마운트 될 때 자식 컴포넌트도 마운트를 하게 된다. 이 경우에는 정상적으로 동작. 이후 부모에 list가 변경될 경우 test3, test2, test1을 .. 2023. 10. 19. [vue.js] markdown to text (마크다운 문법에서 텍스트 뽑아내기) 1. markdown-to-text 라이브러리 설치 npm install markdown-to-text 2. removeMarkdown 함수를 이용해 파싱 import removeMarkdown from 'markdown-to-text' const markdown = '##마크다운 문법 파싱해봅시다' removeMarkdown(markdown) console.log(markdown)//마크다운 문법 파싱해봅시다 2023. 10. 12. [Vue3] CompositionAPI vue i18n 다국어 처리 1. i18n 설치 npm install vue-i18n@9 2. Create json file src 밑으로 lang이라는 폴더 만들어서 사용했음 1. ko.json { "mainHeader": { "loginBtn": "로그인", "joinBtn": "무료 회원가입" }, "login" : { "title": "로그인", "loginBtn": "로그인", "joinBtn": "회원가입", "placeholderId": "이메일", "placeholderPwd": "비밀번호", "invalidIdFeedback": "이메일을 정확히 입력해주세요.", "invalidPwdFeedback": "패스워드 8~20자리, 대문자/소문자/특수문자를 포함하여야합니다." } } 2. en.json { "mainHea.. 2023. 8. 8. [vue] Life Cycle(생명주기) Life Cycle(생명주기) 생명주기 훅 공식 문서: https://ko.vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram beforeCreate 라이프 사이클 훅 (Options API) Setup 내부 호출 (Composition API) 역할 beforeCreate setup hook에서 진행 1. Vue 인스턴스가 초기화 된 직후에 발생 created setup hook에서 진행 1. data를 반응형으로 추적할 수 있는 단계 2. computed, methods, watch 등이 활성화 되어 접근 가능 3. DOM에는 추가되지 않은 상태 beforeMount onBeforeMount 1. DOM에 마운트 되기전 호출 되는 단계 2. 이 .. 2023. 7. 28. [Vue3] Composition API를 defineProps 및 toRefs 함수와 함께 사용하여 반응 속성을 정의 구조분해 사용하기 - javascript 구조분해 이해하기 1. props 이해하기 상위 구성 요소(부모 컴포넌트)에서 하위 구성 요소(자식 컴포넌트)로 데이터를 전달하는 방법이다. 부모 구성 요소에서 속성을 정의하고 해당 값을 사용할 자식 구성 요소에 전달할 수 있다. 하위 구성 요소에서 전달 받을 데이터에 속성을 정의하고 예상 유형(type), 기본값(default), 필수 여부(required)를 지정한다. 그러면 부모 구성 요소는 템플릿에서 자식 구성 요소를 사용할 때 이러한 소품에 데이터를 바인딩할 수 있다. 1-1. 자식 컴포넌트(ChidComponent.vue) 이 예제에서는 message와 count라는 두 개의 props를 예상하는 자식 구성요소가 있다. message 소품은 String.. 2023. 7. 11. [vue3] Vue.Draggable 정리 관련 정리 해야함 참고 사이트 https://sortablejs.github.io/Vue.Draggable/#/handle vuedraggable sortablejs.github.io https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/nested-with-vmodel.vue GitHub - SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js Vue drag-and-drop component based on Sortable.js. Contribute to SortableJS/Vue.Draggable development by creating .. 2023. 6. 23. [vue3] SCSS사용 방법(정말 쉬움.) SCSS란? CSS pre-processor로서 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주며 유지보수에 용이하다. SCSS 설치 npm install -D sass 프로젝트에서 sass파일 만들기 project - src - assets - scss main.scss assets 안에 scss라는 폴더를 생성하고 main.scss 파일을 생성하자. 생성했으면 main.js에 import해서 사용하도록 한다. import { createApp } from "vue"; import App from "./App.vue"; import "./assets/scss/main.scss"; //이부분이 scss import한 부분 createApp(App).mount("#app"); 2023. 6. 23. 이전 1 다음 반응형
