본문 바로가기

전체 글474

Vue Router (페이지 이동) 검색: vue-router next (next: 최신 버전) https://next.router.vuejs.org/ Vue Router next.router.vuejs.org 라우터 설치 (npm install vue-router@4) 브라우저에서 페이지를 관리해주는 용도로 사용되기 때문에 일반의존성으로 설치를 진행한다. 일반의존성: 브라우저가 실행될때 함께 동작하도록 설정할 때 일반의존성으로 설치한다. 기존 vue3 템플릿 프로젝트에서 진행하였다. main.js 파일에 아래 코드를 추가 라우터 기능을 관리할 파일의 플러그인을 가져온다. import router from './routes/index.js' 전체 코드 use(플러그인): 사용자가 import를 통해서 가져온 플러그인을 연결할 때 사용된다... 2021. 8. 9.
N대1 연관관계 N대1의 연관관계를 설정하기 위해서는 아래와 같은 코드로 작성한다. @ManyToOne @ToString.Exclude private Publisher publisher; 위 코드를 작성하면 아래화면과 같이 해당 테이블에 외래키가 자동으로 작성된다. N대1 연관관계를 맺으면 연관된 테이블에 데이터를 가져올때 get 메소드를 통해서 가져온다. System.out.println("Publisher: " + user.getReviews().get(0).getBook().getPublisher()); 예제코드 Review 클래스 생성 package com.example.bookmanager.domain; import lombok.Data; import lombok.EqualsAndHashCode; import .. 2021. 8. 8.
1대N 연관관계 @OneToMany(fetch = FetchType.EAGER): 1대N 연관관계를 즉시 로딩할 수 있도록 선언한다. @JoinColumn(name = "user_id", insertable = false, updatable = false): 선언된 테이블에서는 선언한 컬럼의 해당하는 테이블에 데이터가 수정되거나 생성되지 않도록 선언한다. @Column(name = "user_id"): 컬럼명을 연관관계에 있는 테이블에 컬럼과 맞춰준다. 예제 코드 User 클래스 package com.example.bookmanager.domain; import com.example.bookmanager.domain.listener.UserEntityListener; import lombok.*; import org.s.. 2021. 8. 6.
컴포지션 API - props, context 컴포지션 API에서 props, context 데이터를 가져오는 방법 기존코드 mounted () { console.log(this.color) console.log(this.$attrs) }, methods: { hello() { this.$emit('hello') } }, 컴포지션 API를 이용한 코드(setup 메소드 내부에 선언) setup(props, context) { function hello() { context.emit('hello') } onMounted(() => { console.log(props.color) console.log(context.attrs) }) return { hello } } 예제 코드 App.vue Apple MyBtn 코드 (component) 브라우저 확인 2021. 8. 5.
컴포지션 API - 기본옵션과 라이프사이클 공식 참고 문서 https://v3.ko.vuejs.org/guide/composition-api-introduction.html#composition-api-%E1%84%80%E1%85%B5%E1%84%8E%E1%85%A9 소개 | Vue.js 소개 컴포지션 API가 필요한 이유 Vue 컴포넌트를 만들면 재사용 가능한 코드 조각으로 결합되어진 인터페이스의 반복가능한 부분들을 추출할 수 있습니다. 이것만으로도 어플리케이션에서 유지 v3.ko.vuejs.org 기존 코드 {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} 컴포지션 API를 적용한 코드 vue 패키지안에 속성을 이용하여 기존코드의 기능을 사용할 수 있다. 또한 라이플 .. 2021. 8. 5.
컴포지션 API - 반응형 데이터 각각의 기능별로 동작 기능들을 묶어서 관리 할 수 있다. 예시 기존방법 (script 코드) data() { return { count: 0 } }, methods: { increase() { this.count += 1 } }, 컴포넌트 API를 이용한 코드(script) 반응형 데이터를 이용하기 위해서는 vue패키지의 ref 기능을 가져와서 사용해야한다 또한 setup이라는 메소드를 이용한다. // 컴포지션 API setup() { // ref 를 이용해서 초기값을 설정한다. let count = ref(0) function increase() { count.value += 1 } return { count, increase } } 예제 전체 코드(App.vue) {{ count }} 브라우저 확인 2021. 8. 5.

티스토리툴바