전체 글 (268) 썸네일형 리스트형 QueryDSL) From 절 SubQuery를 쓰고싶어 querydsl은 from절 서브쿼리를 지원하지 않아 답답한 적이 많았는데 다음 방법으로 from절 서브쿼리를 사용해보자. 하이버네이트 @Subselect를 이용해서 서브 쿼리로 사용할 엔티티에 가상 view 처럼 사용하는 것이다. 그렇게 되면 native query로 작성하는 것처럼 사용이 가능하다. 아래는 @Subselect 사용예제이다 subquery용 entity생성 @Entity @Subselect( "select * " + "from VERSION " + "where VERSION_ID in " + "( " + "select max(SW_RELS_NUM) " + "from VERSION " + "where CRT_DT in " + "( " + "select max(CRT_DT) " + "fro.. JPA) Entity Graph 로 N+1 이슈 해결하기 오직 Spring-Data-JPA 만 사용하며 N+1을 최소화하고 연관된 데이터들을 한번에 조회하고 싶을때가 있다 여러가지 해결방법 중 Entity Graph를 사용하는 방법을 다뤄본다. Entity Graph를 사용하여 FetchType이 Lazy 인 연관관계 엔티티들을 한번에 (Left Join 으로) 조회할 수 있다. (fetch join을 사용하고 싶으면 JPQL을 사용하여 fetch join 을 직접 사용하자.) @EntityGraph 사용 간단한 연관관계는 다음과 같이 Repository 에서 @EntityGraph 를 사용하여 사용이 가능하다. // 부모 Entity @Entity ... public class Parent { @Id @GeneratedValue(strategy = Gener.. Vue3.0, Google Maps API 를 사용한 일본 여행지도 만들기 2달전에 만들어놓고 블로그 작성을 깜박해버렸습니다. 다시 기억을 되살려서... 이 프로젝트는 다음과 같은 목표가 있습니다 1. google maps 를 vue3-google-map 라이브러리 없이 만들어보기 일본 도쿄 지하철 노선도에 따른 위치를 보여주고 거기에 주변 맛집도 보여주려면 주변 장소정보를 지원하지 않는 vue3-google-map 라이브러리 없이 google maps만 사용해야 했습니다. 2. vue 3.0 버전과 거기에 맞는 vuex 4.0 사용해보기 예전에 만든 북스토어에는 vue 2버전과 vuetify를 사용하여 구현을 했었지만! 하지만 이제는 vue 3버전이 공식적으로 출시되었고 Emit, multiple root, setup 함수 등 다양하고 편리한 기능이 추가되었습니다. vue 2.. Vuex4에서 state 변경을 감지하는법 (watchEffect) Vue.js 에서 컴포넌트를 나누면서 재사용이 많은 데이터를 Vuex 에 보관하기 시작했고 Vuex의 상태값 변화에 따라 데이터를 갱신해야 하는 일이 생겼습니다. Vue.js 2.0 에서 Vue.js 2 (Vuex 3) 버전에서는 computed와 watch를 사용하여 아래와 같이 state 변경을 감지합니다 ... computed: { getData () { return this.$store.getters.getPlaces } }, watch: { getData (val) { console.log('watched: ', val) } }, ... computed : "반응형 getter" 즉 함수내에 속한 프로퍼티 (state) 의 변경여부를 추적합니다. watch : computed 객체의 변경 (g.. Vuex4 모듈화, store호출 (2) Vuex 모듈화 단일 상태 트리를 사용하기 때문에 APP의 모든 상태가 객체안에 포함됩니다. 따라서 규모가 커지면 저장소도 비대해 질 수 있습니다. 이를 위해 Vuex는 저장소(store) 를 모듈로 나눌 수 있습니다. // Vue3.0 에서의 store/index import { createStore } from 'vuex'; import places from "@/store/module/places"; import station from "@/store/module/staion" export default createStore({ modules: { places, station } }); 파일 구조 module/ : 모듈로 나눈 저장소가 위치한 디렉토리 입니다. index.js : 각 모듈화한 파일들.. Vuex란? (1) Vuex란? Vuex는 Vue.js에 대한 상태관리 패턴 + 라이브러리 입니다 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 합니다 - Vuex 사용이유 공통의 state를 공유하는 여러 컴포넌트가 있으면 중첩되는 prop이 많이 생기게 됩니다. 이는 나중에 유지보수하기 힘든 난해한 코드가 될 수 있습니다 이러한 공통의 state는 동일한 상태로 관리되어야 합니다. Vue.js는 단방향으로 데이터가 흐르기 때문에 여러 컴포넌트가 state를 공유하는 경우 관리가 복잡해질 수 있습니다. - Vuex의 핵심 속성 state : 컴포넌트간 공유할 data 집합입니다 getter : Vuex의 state 변경을 각 컴포넌트에서가 아닌 Vuex에서 수행하도록 하고 Getter로 호출합니다 muta.. Vue3) Vue-Router Vue-Router란? Vue.js에서 페이지 이동을 위한 라이브러리 입니다 Vue.js 공식 라우터 입니다 페이지 이동시 url이 변경되면 완전 새로운 페이지를 불러오는게 아닌, 변경된 요소 컴포넌트만 동적으로 다시 작성하는 SPA을 구현합니다 - 주요기능 동적 라우트 매칭 주어진 패턴을 가진 라우트를 동일 컴포넌트에서 매핑해야 하는 경우가 자주 있습니다. user/100과 user/101 중첩된 라우트/뷰 매핑 중첩 된 라우트 구성을 사용하여 다음과 같은 관계를 표현하는 것이 간단해집니다 라우터 파라미터 쿼리 와일드카드 네비게이션 가드 active CSS 클래스를 자동으로추가해주는 링크 HTML5 히스토리 모드 vue-router의 기본 설정은 hash 모드입니다. URL 해시를 사용하기 때문에 UR.. Vue.js 3.0 시작하기 Vue.js 란? Vue.js 는 웹 페이지 화면을 개발하기 위한 Front-end Framework 입니다. 뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있습니다. MVVM 패턴 뷰(Vue.js)는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는화면단 라이브러리 입니다. View : 사용자에게 보이는 화면 DOM : HTML 문서에 들어가는 요소(태그,클래스,속성 등)의 정보를 담고 있는 데이터 트리 DOM Listener : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 Model : 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장 Data Binding : 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화 Vi.. 이전 1 2 3 4 5 ··· 34 다음
