반응형

분류 전체보기 256

태태개발일지 - Vue Computed API

Computed 기본적으로 Computed를 사용하는 경우는 변수 즉 값이 계속 변하는 수를 변환시킬 때 Computed를 사용하여 이를 처리한다.  컴퓨티드(computed) API는 컴포지션(Composition API)에서 사용된 컴퓨티드 속성을 의미한다.   {{ reversedMessage }} 기본 Computed는 다음과 같이 사용할 수 있다.  {{ reversedMessage }} Set up() 을 사용하여 Computed API를 사용한다면 아래와 같이 사용하면 된다.

Front/Vue 2024.11.20

태태개발일지 - ActionQueue

ActionQueue 커리어리에서 개발 관련 글을 읽다가 JPA가 flush 할 때 개발자가 의도한 비지니스 로직 대로, 실행되지 않는다는 글을 읽게 되었다. 그래서 실제로 간단한 Entity하나를 만들어서 테스트해봤다.테스트 한 내용은 이렇게된다. 예상 로직 : insert -> select -> insert -> delete -> insert실제로직 : insert -> insert -> insert  -> delete 하지만 test하니까 정말로 중복키 에러가 뜨는 것이였다. 그래서 ActionQueue에 대해서 찾아봤다. ActionQueue의 주요 역할엔티티 상태 추적:JPA에서는 엔티티 객체를 관리하는데, ActionQueue는 엔티티 객체가 변경될 때마다 그 변경 사항을 추적합니다. 예를 들..

Spring/JPA 2024.11.18

태태개발일지 - Vue js mapMutations

mapMutationsvuex는 state , getter, mutation, actions 로 나뉜다. 앞서 state를 쉽게 mapState를 통해 가져오는 것을 보았으니, 이번에는 Mutation를 가져오는 방법을 봐보겠다.  import { mapMutations, mapState } from 'vuex'; methods:{ ...mapMutations(['addOneItem']), // Vuex mutation 매핑 addTodo() { if (this.newTodoItem !== '') { this.addOneItem(this.newTodoItem); // Vuex mutation 호출 this.clearInput(); // 입력 필드 초기화 ..

Front/Vue 2024.11.17

태태개발일지- mapstate

Mapstate Vuex에서 사용하는 state, getter, action, mutation 을 쉽게사용하기 위해 helper가 제공하는 기능중 하나를 소개하겠다. 기본적으로 state는 state: arr[] return this.$store.state.name 이런식으로 길게 작성해야한다. import {mapState} from 'vuex' computed:{ ...mapState(['state이름', 'state이름2']) } 이렇게 하면 위에서 This.stateName을 통해서 바로 사용할 수있는 간편한 다.

Front/Vue 2024.11.16

태태개발일지 - ManyToMany

ManyToMany * 실무에서 ManyToMany 관계를 사용하는 경우는 거의없다. * => 아래 이유를 설명하겠다. 일단 N:N관계에 ManyToMany 어너테이션을 사용하게된다.사실 상 DB에서 N:N 관계에 정규화된 테이블에 연관을 맺게되려면, 무조건 가운데 테이블을 하나 생성하고 만들게된다.ex) 그렇다면 JPA 에서 ManyToMany는 무엇인가?ManyToMany를 선언하게 된다면, 그냥 저 가운데 테이블이 메핑이 되는 것이다. ex)public member{ @Id private Long id; @ManyToMany @JoinColumn(name = "MEMBER_ID") private List teams; } public Team{ @Id ..

Spring/JPA 2024.11.15

태태개발일지 - OneToOne

OneToOne DB에서 1대 1관계라고 생각하면 된다. *JPA에서는 OneToOne 어너테이션을 사용하면 되고, 외래키가 있는 곳을 연관관계의 주인으로 설정하면 된다.*public class Member(){ @Id private Long id; @OneToMany @JoinColumn(name = "STAM_ID") private STAMP stamp;}  public class Stamp(){ @Id private Long id; @OneToMany(mappedBy="stamp") private Member member;}  OneToOne 은 엔티티를 가져올때 LAZY로 처리해도 무조건 즉시 로딩이된다.그 이유는 값이 있는 지 확..

Spring/JPA 2024.11.15

태태개발일지 - JPA 연관관계

OneToMany JPA강의를 듣다 보니 ManyToOne을 반대쪽으로 설정하면 OneToMany다라고 생각했는데 One인 곳이 연관관계의 주인이 되는 OneToMany가 있다는 것을 인지한 후 글로 정리한다. @Entitypublic class Member{ @ID private Long id } @Entitypublic class Team{ @Id private Long id; } 다음과 같이 엔티티를 보았을 때 Member와 Team은 N:1 관계이다.DB에는 Member에 Team의 외래키가 들어있는 상황. Member를 연관관계의 주인으로 보았을 땐 Member에 JoinColum을 두고 관계를 맺으면 깔끔하다.근데 Member에서는 Team에 대한 데이터를 다루고 싶지 않을 때 우..

Spring/JPA 2024.11.14

태태개발일지 - vue

VUE *vuex = 복잡한 애플리케이션의 컴포넌트들을 단순하게 관리할 수 있다.* ->  flux 패턴으로 복잡한 애플리케이션의 문제점들을 해결하고 있었다.그렇기 때문에vue의 리엑티비티와 flux를 공존할 수 있게 하는 방법을 만들어냈다. Vuex정의: 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리.React의 Flux 패턴에서 기인함. (앱이 커졌을 때 효과적으로 관리할 수 있는 방법)  Vuex 라이브러리중 state(data),getters(computed),mutations( method ), actions(비동기 method) 를 학습하겠다.Vuex를 더 쉽게 코딩할 수 있는 Helper기능이있다.  FluxMVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발..

Front/Vue 2024.11.13
반응형