Devsk.j

준영속 엔티티? 영속성 컨텍스트가 더는 관리하지 않는 엔티티를 말한다. (여기서는 itemService.saveItem(book) 에서 수정을 시도하는 Book 객체다. Book 객체는 이미 DB 에 한번 저장되어서 식별자가 존재한다. 이렇게 임의로 만들어낸 엔티티도 기존 식별자를 가지고 있으면 준영속 엔티티로 볼 수 있다.) 준영속 엔티티를 수정하는 2가지 방법 변경 감지 기능 사용 1) 병합( merge ) 사용 2) 변경 감지 기능 사용 변경감지 기능 사용 @Transactional void update(Item itemParam) { //itemParam: 파리미터로 넘어온 준영속 상태의 엔티티 Item findItem = em.find(Item.class, itemParam.getId()); /..

vuex란? : vue내의 어떠한 컴포넌트에서도 사용할 수 있는 'state'를 관리하는 툴 vuex 설치 npm install vuex@next --save main.js import { createApp } from 'vue' import App from './App.vue' import router from './router'; import store from "@/store"; createApp(App).use(store).use(router).mount('#app') src > store > index.js export default { namespaced: true, state: { toasts:[], }, mutations: { ADD_TOAST(state, payload){ state.to..

vue에서는 component만큼 자주 사용되는게 module이다. 메소드 자체를 export해서 import해와 사용하는 것인데, export default 메소드명 으로 배포하면 import 시에 {} 없이 받아올 수 있고, export 메소드명 만 쓰게되면 import 시 {} 안에 함수명을 적어야한다. count.js import { reactive } from 'vue'; export const useCount = () => { const state = reactive({ count : 0 }); return state; } 위와 같이 js파일을 만들어서 함수 useCount만을 export했다. 여기서 포인트는 return값이다. 위의 함수를 import해서 실행하게되면 return 값을 받아..

slot이란 예를들어 하나의 모달창 컴포넌트를 기준으로 여러가지 용도의 세부 모달창이 파생된다고 했을 때 기준 컴포넌트에서 변경되는 부분을 slot으로 설정하고 용도마다 다르게 사용될 수 있게 해주는 역할을 한다. modal.vue × 대표 컴포넌트 안에서 변경되는 부분을 슬롯으로 설정해놓고 위와같이 이름을 지정해놓으면 해당 모달을 import하여 사용하는 자식컴포넌트에서 template 안에 v-slot으로 해당 이름을 가져와 안에 내용을 집어넣을 수 있다. 이렇게! Here might be a page title A paragraph for the main content. And another one. Here's some contact info 그리고 vue에서는 아래처럼 축약이 가능하다. v-on..

Toast.vue {{ message }} : 부모컴포넌트로부터 message와 type정보를 받아 dom에 출력하는 방식 부모컴포넌트

생명주기 표 coder onBeforeMount : Dom이 마운트 되기 전, setup 후에 실행. onMounted : Dom이 마운트 되었을 때 실행. onBeforeUpdate : 반응형 상태변경 직전 호출 onUpdated: 반응형 상태변경이 있고난 뒤 호출. 한 코드블럭 내에서 업데이트된 DOM에 접근해야하는 경우 nextTick()을 사용해야 함 (안그러면 무한 업데이트 루프발생가능) onBeforeUnmount : Dom에서 빠져나가기 직전 실행 (페이지 이동) onUnmounted : Dom에서 빠져나갈 때 실행 (페이지 이동) 참고) nextTick() : 반응형 상태가 업데이트 완료될 때까지 기다림 타입 function nextTick(callback?: () => void): Pro..

자바스크립트의 객체 복사 방법 => ... 을 이용해서 값을 그대로 복사해 올 수 있다. 다만 {} 안에 설정하면 서로 다른 객체안에 복사하므로 주소값이 다름. c = { a:1 } d = { a:1 } c===d. //false //a와 b는 서로 다른 주소값을 가지므로 a===b 는 false 가 나온다. a = { a:1 } b = {...a} //값만 복사해옴. a===b. //false //a와 b는 서로 다른 주소값을 가지므로 a===b 는 false 가 나온다. e = {a:1} f = e f === e //true //f에 e의 주소값을 할당했으므로 e === f는 서로 같은 true 객체 안의 값이 같은지 확인해보기 - 객체 안의 값이 간단하면 아래처럼 객체의 요소끼리 비교하면 가장 간단..

1. vue-router 설치하기 npm install vue-router@4 2. router 폴더의 index.js 파일 추가 import { createRouter, createWebHistory } from 'vue-router'; import Home from '../pages/index.vue'; import Todos from '../pages/todos/index.vue'; import Practice from '../pages/practice/test3.vue'; import Todo from '../pages/todos/_id.vue'; const router = createRouter({ history: createWebHistory(), routes: [ { path:'/', nam..

경로 표현식 : 점(.)을 찍어 객체 그래프를 탐색하는 것 //상태필드 : 더이상 . 으로 갈 수 없음 select m.username From Member m; //단일 값 연관경로 : . 으로 더 갈 수 있음 select m.team.name from Member m; //묵시적 조인 발생 SELECT M.* FROM TEAM T INNER JOIN MEMBER M ON M.ID = T.ID //컬렉션 값 연관경로 : 1대 다 관계(. 으로 더 갈 수 없음) //.size는 가능 (갯수를 가져옴) select t.members from Team t; (가능) select m.members.username from Team t; (불가) //명시적 조인으로 별칭 얻기 select m.username f..

enum Season { WINTER(4), SPRING(3), FALL(2), SUMMER(1); private int num; Season(int num) { this.num = num; } public int getNum(){ return this.num; } } public class EnumApplication { public static void main(String[] args){ System.out.println(Arrays.toString(Season.values())); System.out.println(Season.WINTER.getNum()); for(Season s : Season.values()){ if(s.getNum()==4){ System.out.println(s.toStr..