'Vue'에 해당되는 글 29건
vue + jpa project (25) - 공통코드 연관(join)조회 백엔드(1)
이번 장부터는 알아야할 게 좀 많아서 나 자신도 프로그램을 구현하면서 많이 헤깔리고 어려운 부분이었다. 그래서 이론적인 부분도 잠깐 드려다 보면서 하나씩 진행을 하도록 하겠다. 우선 지난번에 두개 테이블의 관계가 그려진 이미지를 다시 한번 살펴 보겠다. 그룹코드가 부모이고 코드 상세가 그 자식이 된다. 그래서 JPA에서 말하는 연관관계가 있는데 그 연관관계의 종류를 살펴본다면 일대다 단/양방향, 다대일 단/양방향, 일대일 단/양방향, 다대다 단/양방향 같은 것이 존재한다. 여기서 다대다는 실무에서는 거의 사용하고 있지 않는 것으로 알고 있다. 이번 장에서 JPA의 연관관계를 모두 알아보려면 몇일이 걸릴지도 모르기 때문에 일단 이번 장에서는 위의 이미지에 대한 연관관계만 알아보도록 한다. 우선 이미지에서도..
프로그램/Vue.js | 2023. 12. 1. 16:29
vue + jpa project (24) - 공통코드 연관(join)조회 프론트
공통코드 관련 지난번 장까지는 전혀 연관이 없는 각각의 테이블에 대해서 조회를 했었지만 이번 장부터는 서로 연관 관계를 가지는 테이블이라는 점을 가지고 접근을 하려고 한다. 이번장에서는 테스트를 위해서 백엔드 보다 프론트엔드를 먼저 시작하겠다. 백엔드가 상황에 따라서 소스가 계속 수정이 되어야 해서 테스트가 가능하도록 프론트를 먼저 개발하겠다. 1. 코드 리스트 페이지 생성 코드 쪽이어서 /views/code/CodeJoinList.vue 로 생성하겠다. 100% 완벽하지 않겠지만 일단 이것으로도 테스트를 하기엔 충분할 것이다. (검색/버그 등 추후 수정) 상세기준리스트 그룹기준리스트 No 그룹코드 그룹코드명 상세코드값 상세코드명 순번 사용여부 그룹등록일시 그룹수정일시 상세등록일시 상세수정일시 등록된 게..
프로그램/Vue.js | 2023. 12. 1. 15:25
vue + jpa project (23) - 공통코드 상세코드관리(2)
지난번 장에서는 백엔드 쪽을 작성해보았다. 이번엔 프론트엔드 소스를 작성해보겠다. 이것 역시 기존 그룹코드에서 했던 것과 유사하지만 리마인드 하면서 진행하겠다. 상세코드는 그룹코드와 달리 그룹코드 리스트에서 하나의 그룹코드를 가지고 출발하고 그룹코드 별 상세코드를 관리하도록 한다. (상위 메뉴에 추가되지 않는다) 폴더는 그룹코드와 동일하게 src/views/code 로 하고 그 하위에 파일을 추가한다. 1. 공통코드 상세 리스트 CodeDetailList.vue 파일 상위그룹 등록 No 그룹코드 상세코드값 상세코드명 순번 사용여부 등록일시 등록된 게시물이 없습니다. {{ (this.page - 1)*size + (no+1) }} {{ row.group_code }} {{ row.code_value }} ..
프로그램/Vue.js | 2023. 11. 23. 12:34
vue + jpa project (22) - 공통코드 상세코드관리(1)
이번 장에서는 공통코드 관리 중에서 두번째인 상세코드 쪽을 관리하는 화면들을 진행하겠다. 지난번 공통코드 테이블의 설계 모습을 리마인드 차원에서 다시보면 아래와 같다. 1:N 구조인데 이번 장에서는 일단 관계를 좀 잊고 단순한 상세코드 관리로 접근하여 코딩하겠다. 우선 첫번째로 상세코드의 백엔드 소스부터 먼저 정리하겠다. 앞에서 했던 것과 유사하지만 리마인드 하면서 진행하겠다. 1. 상세ID Class ID Class는 처음 나오는데 복합키를 가지는 엔티티의 경우에는 반드시 ID Class를 정의하여야 한다. 그리고 해당 class는 Serializable 도 꼭 상속받아야 한다. 아래와 같이 복합 키에 대한 필드를 정의한다. 패키지는 일단 동일한 entity 를 사용하겠다. @AllArgsConstru..
프로그램/Vue.js | 2023. 11. 23. 12:00
RECENT COMMENT