vue14

• 

  [AWS] 같은 브랜치에 있는 프론트엔드, 백엔드 자동배포하기 (6) Jenkinsfile, vue & springboot Dockerfile 작성 1. 프로젝트 구조 프로젝트 구조는 다음과 같다. Jenkinsfile, frontend폴더, bacnekd폴더가 가장 최상단에 있고 그 밑에 Dockerfile이 있다. 2. Jenkinsfile tools에서 이전에 설치한 메이븐 이름을 쓴다. M3로 설정했으므로 maven "M3"을 적는다. stages는 네 단계로 나눴는데, 다음과 같다. 1) Docker kill 이미 프론트엔드, 백엔드 돌아가고있는 도커가 있다면 멈추고 해당 컨테이너를 지웠다. 만약 그 컨테이너가 없다면 오류가 나면서 빌드가 멈추기 때문에 || 연산을 사용해서 있든 없든 빌드가 계속되도록 했다. 2) Prepare checkout scm 명령어로 깃 레파지토리를 가져온다. 성공한다면 prepare success, 실패한다면 p.. 기록/CI&CD 2022. 8. 18.

• 

  [SpringBoot] 따로 개발한 springboot와 vue 합치기 스프링부트와 뷰에서 작업이 모두 끝났다면 뷰 파일을 스프링 static 폴더에 넣어 함께 실행시킬 수 있다. 1. vue 프로젝트 build 터미널에 다음 명령어를 입력하면 dist폴더에 프로젝트를 바로 실행할 수 있는 index.html파일과 css, js파일이 만들어진다. npm run build 2. dist 파일 spring으로 이동시키기 src/main/resources/static 위치에 dist 속 파일을 모두 넣으면 된다. 3. WebConfig 설정하기 내 config는 src/main/java/com/_____/_____/config/WebConfig.java에 있다. 따라서 그 클래스의 addResourceHandler 메서드에 다음을 추가한다. (코드는 나중에 헷갈리지 않기 위해 전.. 기록/BACKEND 2022. 6. 29.

• 

  Docker + Jenkins + Vue docker로 jenkins를 설치하고 gitlab과 연동한 뒤, 어플리케이션을 배포하려고 한다. 1. Docker 설치 도커 허브를 설치한다. https://docs.docker.com/get-docker/ Get Docker docs.docker.com cmd에서 아래와 같이 나온다면 설치된 것이다. 2. Docker로 Jenkins 설치 & 설정 Docker Desktop 실행 Docker Desktop이 실행되고 있어야 한다. 만약 리눅스 관련 오류가 뜬다면 이 페이지에 들어가서 4,5단계를 진행한다. https://docs.microsoft.com/ko-kr/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package .. 기록/CI&CD 2022. 6. 18.

• 

  [VSCode] vscode에서 eslint와 prettier 충돌 문제 vscode에서 eslint + prettier 사용해서 vue 프로젝트를 하는 중에 쉼표가 사라지거나 endOfLine오류가 자꾸 발생했다. 인터넷에서 찾아보다가 eslint와 prettier 충돌문제인 건 눈치챘는데 설정을 아무리 바꿔도 해결되지 않았다. 내가 찾은 해결방법은 vscode의 Prettier ESLint 확장프로그램을 까는 것이다. 따로따로면 충돌나니까 애초부터 eslint+prettier 둘을 같이 쓰게 나온 거면 어떨까? 해서 깔아봤는데 다행히 성공적이었다. 기본 포맷터를 이 확장프로그램으로 설정하면 모든 게 다 깔끔하게 해결된다. 기록/FRONTEND 2022. 5. 30.

• 

  [Vue] bootstrap 하위 컴포넌트 모달창 상위 컴포넌트에서 열기 하위 컴포넌트 모달창을 상위 컴포넌트에서 열어야 할 상황이 생겼다. 내 뷰의 구조는 오른쪽이다. 원하는 흐름은 HouseListItem 하나를 클릭하면 해당 정보를 가진 modal창(HouseDetail)이 HouseList에서 열리는 것이다. 모달 on/off 상태를 저장할 변수를 설정하려고도 생각해봤지만 더 간단한 방법을 발견했다. 1. HouseListItem 각각을 클릭하면 HouseList로 $emit을 보낸다. 2. HouseList는 해당 이벤트가 발생하면 모달창을 여는 함수를 호출한다. HouseListItem 클릭하면 selectHouse를 호출한다. selectHouse는 상위컴포넌트(HouseList)로 이벤트를 보낸다. selectHouse(aptCode){ this.$emit("o.. 기록/FRONTEND 2022. 5. 29.

• 

  [Vue] Vuex 1. Vuex vue.js 애플리케이션에 대한 상태관리패턴 + 라이브러리다. 애플리케이션 모든 컴포넌트들의 중앙집중식저장소 역할로 데이터를 관리한다. 이 방식은 예측 가능한 방식으로 상태를 관리할 수 있다. 기존의 단방향 통신은 데이터의 흐름이 직관적이라는 장점이 있지만, 부모 자식 단계가 많이 복잡해진다면 데이터의 전달하는 부분도 매우 복잡해져서 유지보수가 힘들다는 단점이 있다. 애플리케이션이 여러 구성 요소로 구성되고 더 커지는 경우 데이터를 공유하는 문제도 발생한다. vuex는 데이터 관리하는데에는 효율적이지만, 소스가 복잡해 개념 이해와 시작에 비용이 든다. 단기간, 장기간 생산성 간 기회비용이 있다는 것도 유의해야한다. 대규모 프로젝트에는 vuex가 효율적인 선택이다. 2. Vuex 핵심컨셉 1.. 기록/FRONTEND 2022. 5. 28.

• 

  [Vue] SFC(Single File Component) SFC(Single File Component) 확장자가 ".vue"인 파일이다. vue cli에서 사용한다. .vue 파일에서는 template, script, style을 모두 합쳐서 작성할 수 있다. 구문 강조가 가능하고, 를 사용해 컴포넌트에만 css범위를 제한할 수 있다. 전처리기를 사용해 기능의 확장이 가능하다. template 기본언어는 html이다. 각 .vue 파일은 한번에 최대 하나의 블록을 포함할 수 있다. template는 무조건 하나의 루트 엘리먼트를 포함해야 한다. 내용은 문자열로 추출(``)되어 컴파일된 Vue Component의 template옵션으로 사용된다. script 기본언어는 javascript다. 각 .vue 파일은 한 번에 최대 하나의 블록을 포함할 수 있다. E.. 기록/FRONTEND 2022. 5. 27.

• 

  [Vue] Vue CLI(feat.NodeJS) 1. VUE CLI(Command Line Interface) Vue.js 개발을 위한 시스템으로 Vue.js에서 공식으로 제공하는 CLI다. Vue 프로젝트를 빠르게 구성할 수 있는 스캐폴딩을 제공한다. Vue와 관련된 오픈소스들 대부분이 CLI를 통해 구성이 가능하도록 구현되어 있다. 2. 설치 NodeJS https://nodejs.org/ko/ 에서 LTS 버전을 다운로드한다. 더보기 NPM(Node Package Manager) command에서 third-part 모듈을 설치하고 관리하는 툴이다. 모듈 검색은 https://www.npmjs.com/ 에서 할 수 있다. npm init을 하면 package.json이 생성되는데, maven의 pom.xml과 역할이 비슷하다. 모듈 설치 1. 작.. 기록/FRONTEND 2022. 5. 26.

• 

  [Vue] Router 1. Router 라우터는 컴포넌트와 매핑되어 vue를 이용한 SPA(Single Page Application)를 제작할 때 유용하다. URL에 따라 컴포넌트를 연결하고 설정된 컴포넌트를 보여준다. 2. 설치 cdn 방식이다. ​ 모듈 시스템에서 사용하면 Vue.use()를 사용해서 명시적으로 라우터를 추가해야 한다. import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 3. 연결 - 선언적 네비게이션 HTML 1. router-link 네비게이션을 위해 router-link 컴포넌트를 사용한다. to를 이용해 구체적인 속성을 지정한다. 이름으로 지정할 수도 있고, 링크로 지정할 수도 있다. query나 params를 같.. 기록/FRONTEND 2022. 5. 25.

• 

  [Vue] Component 1. Component HTML elemet를 확장해 재사용 가능한 코드를 캡슐화한다. Vue Component는 Vue instance이기도 하기 때문에 모든 옵션 객체를 사용한다. (루트에만 사용하는 옵션 객체는 제외된다.) Life Cycle Hook도 사용가능하다. data 옵션은 반드시 함수여야 한다. 2. 컴포넌트 등록 컴포넌트 이름은 케밥 표기법을 권장한다. (ex. my-component) 전역 컴포넌트 Vue.component('컴포넌트-이름', { template:'사용자 정의 컴포넌트 입니다!' }) 지역 컴포넌트 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트 범위에서만 사용할 수 있는 컴포넌트를 만들 수 있다. new Vue({ // ... componen.. 기록/FRONTEND 2022. 5. 19.

• 

  [Vue] Event DOM 이벤트를 듣기 위해 v-on directive를 사용한다. 이벤트가 트리거될 때 javascript를 실행한다. 1. method 이름 v-on에 이벤트 발생 시 처리해야하는 method의 이름을 받아서 처리한다. 클릭 2. inline javascript 메소드 이름을 직접 바인딩하는 대신 인라인 javascript 구문에 메소드를 사용할 수 있다. 클릭 3. $event 원본 DOM 이벤트에 엑세스해야하는 경우 특별한 $event 변수를 사용해 메소드에 전달한다. Greet greet: function (e, msg) { if (e) e.preventDefault(); alert('Hello ' + msg + '!'); } 4. 이벤트 수식어 $event로 DOM이벤트에 접근할 수 있지만, m.. 기록/FRONTEND 2022. 5. 18.

• 

  [Vue] Vue Instance 1. el Vue가 적용될 요소 지정. CSS Selector 또는 HTML Element를 사용한다. 2. data Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태이지만, 함수 형태를 권장한다. 3. method 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가한다. 보간법으로 method를 부를 때 ()를 빠뜨리지 않아야 한다. 하지만 @click 등 이벤트 처리에 파라미터가 없는 method를 사용할 경우는 method 이름만 써도 가능하다. method 안에서 데이터를 접근할 때는 "this.데이터이름"으로 접근해야한다. 이 코드는 reversedMsg()를 호출해서 message를 뒤집은 값을 .. 기록/FRONTEND 2022. 5. 17.