전체 글
-
[Spring boot] 엔티티 복합키 설정Spring Boot 2025. 3. 6. 11:07
회사 프로젝트 진행하다가 복합키 설정을 하다 알게 되어서 기록하게되었다. @IdClass 설정(RDB에 가까운 방법) 어노테이션 @IdCalss를 생성해주고 복합키에 해당하는 컬럼에 @Id 어노테이션을 달아준다 @Data@Entity@AllArgsConstructor //전체 생성자@NoArgsConstructor //기본 생성자@IdClass(SaUserRoleId.class) //1번@TableDefinition(prefix = "T_SA", category = "SA")public class UserRight{ @Id //2번 @Column(name = "USER_ID") //SaUserRoleId.id와 매칭 private String userId; @Id //2번 @Column(na..
-
[vue3] lifecycle hookFrontend 2024. 11. 10. 17:21
beforeCreate()created()beforeMount() : mount 되기 전에 실행 함수mounted() : mount 된 이후beforeUpdate()updated()beforeUnmount()unmounted()등등 lifecycle hook 종류 다양하다 *자바스크립트 문법 setTimeoutsetTimeout(function() { 실행할 코드}, 2000); 여기서 2000는 2초 뒤 // mount된 이후 mounted() { setTimeout(() => { this.showDiscount = false; }, 2000)arrow ()=>{} 를 사용하면 this 값을 가져올수있음 서버에서 데이터 가져올때도 lifecycle hook 안에 코드 작성 cre..
-
[vue3] 정렬Frontend 2024. 11. 10. 16:49
쌩 자바스크립트이 정렬은1. 데이터를 정렬하고2. HTML에 반영 Vue는 1. 데이터 정렬하고 끝-> {{데이터바인딩}} 해두면 HTML에 데이터가 실시간으로 반영 sort() 함수array.sort() 어레이 뒤에 sort하면 오름차순으로 정렬됨사실은 문자 정렬을 하고 있음 (가나다순)> 숫자 정렬은 sort() 함수 안에 funtion(a,b){a-b} 해줘야함array.sort(function(a,b){return a-b}) 이렇게 해야 1,2,3 숫자순 정렬return값이 음수면 a를 왼쪽으로 보내줌 *참고로 sort()하면 원본이 변형됨map() filter()등은 원본을 보존해줌 요즘은 원본데이터를 보호하는것이 유행data() { return { // originRooms ..
-
[vue3] 자료의 사본Frontend 2024. 11. 10. 16:42
자료의 사본을 만드는 방법은 쉽게 등호 사용var a = 'hi';var b = a; 하지만 array,object 자료 형태는 아래처럼 등호로 복사하면 안된다var a = [1,2,3];var b = a;이유는 b를 수정하면 a에도 변경사항이 반영이 된다(object도 마찬가지)var a = [1,2,3];var b = [...a]; ... 의 기호는 spread operator array나 object 앞에 붙일수 있으며array, object의 괄호를 제거해주는 문법이다[1,2,3] 이런식으로 쓰면 1,2,3만 남는다 약간의 트릭으로 array를 복사 할 때 spread operator 이걸로 괄호를 벗겼다가 다시 씌우면 값 공유 현상이 일어나지 않게 복사 할 수 있다
-
[vue3] 등장/퇴장 애니메이션 <transition>Frontend 2024. 11. 10. 16:10
CSS로 애니메이션 주려면1. 시작전 class명2. 애니메이션 끝난 후 class명3. 그리고 원할 때 2번 class명 부착 class명 오브젝트 형태로 넣을 수 있다 vue의 태그 활용 isOpen 가 true가되면 모달창 부착 --> 클래스명을 조건부로 넣을려면 오브젝트 형식으로 작성{ 클래스명 : 조건 } .start { opacity: 0; transition: all 1s; }.end { opacity: 2;}vue에서는 이용하면 위 에 CSS코드를 애니메이션 쉽게 줄 수 있음 등장 애니메이션애니메이션 주고 싶은 요소를 으로 감싸기class명 3개 CSS 작성.작명-enter-from {시작스타일}.작명-enter-active {transition}.작명-en..