수민정의 기술블로그

IntelliJ -> Run/Debug Configurations -> Configurations -> Environment -> Shorten command Line

부트스트랩-뷰 가이드 문서를 보면서 UI를 짜고 컴포넌트를 라우터로 정해주면서 보냈다. 이후에는 스프링 부트랑 도커의 포스트그래스를 엮어 놓고. 깃을 열어 리포지토리에 스프링 클라우드 넷플릭스 관련하여 유레카 컨피그서버 도커에서 레빗엠큐를 받아 클라우드 버스로 엮어놓았다. 퇴근하고 나니까 피로가 확 쏠린다. 얼마 못자서 그렇긴한데..처음한다고 집중을 많이 했나보다..

필요 플러그인 id 'com.ewerk.gradle.plugins.querydsl' version '1.0.10' 필요 의존 implementation 'com.querydsl:querydsl-jpa' 필요 설정 def querydslDir = "$buildDir/generated/querydsl" querydsl { jpa = true querydslSourcesDir = querydslDir } sourceSets { main.java.srcDir querydslDir } configurations { querydsl.extendsFrom compileClasspath } compileQuerydsl { options.annotationProcessorPath = configurations.query..

작게 나마 UI 작업에 들어갔다. 배운걸 적용하려니 쉽지만은 않다. 그래도 열심히 부딪치고 있다. 작업하면서 기록하는 것도 점차 늘어가지 않을까..한다. 금일은 여기저기 다니며 환기를 많이해서, 많이 만족하는 날이라고 생각한다.

Router 에서 Body 만 바꾸겠다고 1시간 가량 삽질을 한 기록이다. 일단, router.js 에서 Body 컴포넌트의 하위 컴포넌트로 링크에 따른 컴포넌트를 정의한다. import Vue from 'vue'; import VueRouter from 'vue-router' import LoginComp from "../components/body/LoginComp"; import Body from "../components/Body"; import Carousel from "../components/body/Carousel"; Vue.use(VueRouter); export const router = new VueRouter({ mode: 'history', routes: [ {path: '/', ..

오늘은 종일 하품하면서 보낸다. 10번도 넘게 한 기억이난다. 알게모르게 피로가 좀 쌓였는지 늘어지게 되고는 하더라. 늘어져서 멍때리기도하고 강아지, 고양이와 놀아주면서 흐뭇해하기도하고.. 그러다가 공부를 시작해서 지금까지 왔다. 다행히, 그리고 감사하게도 수강하던 Vuex 공부가 얼추 마무리 되었다. 배운 내용을 스스로 알아보기 쉽게 기록하는 일만 남은 것 같다. 이제 간소하게나마 Micro Service 관련하여 멀티 모듈 프로젝트랑 같이 웹을 만들어봐야 겠다. 데이터 베이스는 Docker 로 같은 종류의 서비스 Jar 가 하나의 DB 를 바라보게 만들면 될 듯하다. Load Balancing 은 Ribbon 이 해줄테니.. 일단 믿어보자. 사실, 이제는 경험할 때라고 느끼고는 한다. 그래서 더 코드..

여러가지 속성 들을 분리시키려면 어떻게 해야하는지Vuex.Store({}) 속성의 내용을 ES6의 Modules로 연결시킨다.// store.js import Vue from 'vue' import Vuex from 'vuex' export const store = enw Vuex.Store({ state : {}, getters : {}, mutations : {}, actions : {} });속성 파일의 분리ES6 Modules 의 Export => Import 문을 사용한 속성의 모듈화import Vue from 'vue' import Vuex from 'vuex' import * as getters from './getters' import * as mutations from './mutatio..

개요 mapMutations Vuex 에 선언 된 Mutations 속성을 컴포넌트에 더 쉽게 Mapping 해주는 헬퍼 //사용.vue import {mapMutations} from 'vuex' methods: { ...mapMutations({clickBtn:'clickBtn'}), authLogin() {}, displayTable() {} } //store.js mutations: { clickBtn(state) { alert(state.msg); } } //template popup message mapActions Vuex 에 선언 된 Actions 속성을 컴포넌트에 더 쉽게 Mapping 해주는 헬퍼 //사용.vue import {mapActions} from 'vuex' methods: ..

개요 mapState Vuex 에 선언된 state 에 더 쉽게 접근시켜주는 방법이다. 객체 전개 연산자로 선언된 Helper 들은 하나의 함수 이다. computed() 속성과 연계된다. 컴포넌트에서 해당 Helper 를 다른 이름으로 쓰고 싶다면 object로 속성을 받아온다. //사용.vue import {mapState} from 'vuex' computed: { //num() { return this.$store.state.num } ...mapState(['num']) // Array literal } ///template {{ this.num }} //다른이름으로 받고 싶다. computed: { ...mapState({ name: 'num' }) } mapGetters Vuex 에 선언된 ..

Helper 기존의 Vuex.Store 에서 정의하던 state , getters, mutations , actions 를 더 쉽게 코딩하는 방법이다. state => mapState getter => mapGetters mutations => mapMutations actions => mapActions 사용 Vuex.Store 에서 각 Helper 함수를 꺼내다 쓴다. 컴포넌트 로직에서 객체전개연산자로 사용가능하다. Vuex.Store 에서 Helper 함수롤 꺼내온 원소 값들은 에서 this. 로 호출이 가능해진다. Vuex.Store 의 속성 값과 해당 컴포넌트의 속성 값을 Mapping 하는 함수라고 보면 된다. this.$store.state.num = Helper > this.num comp..