계란 블로그

에러 해결 axios 요청 응답이 null인 경우 오류 get 요청을 보낸 응답에서 데이터가 없는 경우, 오류가 발생했다. if 문을 만족하지 않으니까 태그 안 코드가 실행되지 않는 게 정상인데 계속해서 들어갔다. 원인 get 요청을 보낸 응답 데이터에 리스트가 비어 있는 경우, res.data 는 null 이 아니고 res.data.data가 null이다. 보통 axios로 요청을 보내면 응답 객체는 data, status, statusText, headers, ...와 같은 구조가 있다. 따라서, 뒤에 ".data"를 붙여야 실제로 필요한 데이터에 접근할 수 있다. 해결 다음과 같이 수정한다. ========== script ========== $axios .get( util.format($apiUr..

Note 선택 불가능한 콤보 박스 만들기 - disabled Detail - 부모 "Detail"은 자식 컴포넌트를 의미한다. 자식 컴포넌트 Detail 에게 statusCdList2라는 데이터를 보내서 자식 컴포넌트의 변수 statusCdList1에 값을 전달한다. 코드 리스트는 statusCdList변수를 선언과 동시에 store에서 데이터를 가져와서 statusCdList에 저장한다. view 라는 컴포넌트가 DOM에 렌더링되자마자 실행되도록 onMounted() 메서드 안에 코드 리스트 가져오는 getCodeList()를 넣어줘야한다. // script onMounted(() => { getCodeList(); }); const getCodeList = () => store.dispatch("St..

인터페이스 지원- QuerydslPredicateExecutor 앞으로 살펴볼 Spring Data가 제공하는 기능은 제약이 커서 복잡한 실무환경에서 사용하기에는 부족하다. 어떤 한계점이 있을까? Ex) 리포지토리에 적용 Repo QuerydslPredicateExecutor public interface UserRepository extends JpaRepository, QuerydslPredicateExecutor { } Iterable result = userRepository.findAll( member.age.between(10, 40).and(member.username.eq("member1"))); Note) 한계점 묵시적 조인은 가능하나 leftjoin은 불가능하다. 클라이언트가 Query..

Spring Data JPA repository 로 변경 Repository @Repository public interface MemberRepository extends JpaRepository { List findByUsername(String username); } test querydsl의 전용 기능인 search를 작성할 수 없다. 따라서 사용자 정의 리포지토리가 필요하다. @Test public void basicTest(){ Member member = new Member("member1", 10); memberRepository.save(member); Member findMember = memberRepository.findById(member.getId()).get(); assertT..

순수 JPA repository와 Querydsl Ex) 순수 JPA repository (Spring Data JPA가 아닌 쌩 JPA) @Repository public class MemberJpaRepository { private final EntityManager em; private final JPAQueryFactory queryFactory; public MemberJpaRepository(EntityManager em) { this.em = em; this.queryFactory = new JPAQueryFactory(em); } public void save(Member member) { em.persist(member); } public Optional findById(Long id)..

Note BooleanBuilder => BooleanExpression 리팩토링 기존에는 쿼리 클래스 안에 projection()이라는 메서드 안에 변수 BooleanBuilder search를 선언했다. 그 다음 쿼리의 where절에 넣고 싶은 조건을 search.and(조건) 형태로 여러 개 나열하는 방식이었다. 하지만, BooleanBuilder를 사용하면 predicate() 메서드가 길어져서 가독성이 떨어졌다. 그리고 해당 조건에 대해 재사용이 불가능하다는 단점이 있었다. 그래서 김영한 강사님께서 알려주신 BooleanExpression을 적용하기로 했다. Ex) 검색 조건 쿼리 - BooleanBuilder 를 사용한 이전 코드 public BooleanBuilder predicate(Mem..

프로젝션과 결과 반환 - 기본 프로젝션: SELECT 대상을 지정한다. 프로젝션 대상이 하나인 경우, 타입을 명확하게 지정 가능하다. 둘 이상인 경우는 튜플이나 DTO로 조회한다. Ex) 프로젝션 결과 반환 - 기본 List result = queryFactory.select(member.username). .... 위와 같이 result의 타입을 username 형태인 String으로 정해줄 수 있다. Ex) 프로젝션 결과 반환 - 튜플 조회 List result = queryFactory.select(member.username, member.age). .... 프로젝션과 결과 반환 - DTO Ex) 순수 JPA에서 DTO 조회 List result = em.createQuery( "SELECT ne..

ToDoList VS code 리팩토링 방법 알아보기 Note 미리 저장해둔 데이터를 for문으로 콤보 박스에 보여주기 데이터베이스에는 어떤 모델의 상태 코드가 있다. ex) 생성(COD_0000, "CREATED")과 같은 형태로 데이터가 저장되어 있는데 관리자 서버에서 데이터 가져오는 API를 만들어두고 필요할 때마다 Http 요청을 보내서 정보를 가져온다. SearchForm (자식 컴포넌트) 뷰 안에 있는 컴포넌트 emit: 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달한다. 컴포넌트가 발생시킬 수 있는 이벤트를 명시적으로 선언해서 부모 컴포넌트에서 사용 가능한 이벤트를 결정한다. List (부모 컴포넌트) 앞에서 자식 컴포넌트(SearchForm)에서 만든 이벤트 searchPretreatme..

Note Vuex 란? Vuex: Vue.js 애플리케이션에서 상태 관리를 위한 라이브러리이다. Vue 개발에서 상태를 관리해주는 기능을 제공한다. 상태 관리 패턴이자 라이브러리이다. 상태 관리: 애플리케이션의 데이터를 중앙에서 관리하고 컴포넌트 간에 공유할 수 있도록하는 것을 말한다. Vue의 공식 툴이며 ES2015 문법을 기준으로 한다. Vuex가 없다면 컴포넌트 간의 데이터(상태)를 주고 받기 위해 부모는 자식에서 props를 통해 전달하고 자식은 부모에게 Emit event 방식을 사용해서 처리해야한다. 데이터를 Store를 통해 관리하고 프로젝트에 존재하는 모든 컴포넌트들이 이 store를 사용한다. Vuex의 구성 요소 State(데이터 객체, 상태): 애플리케이션 전역에서 공유되는 데이터 ..

에러 해결 오류: 페이징 에러 원인: 메서드 실행 순서 오류 해결: 실행 순서를 바꾼다. cf) BeanUtils.copyProperties(A, B): 값이 같은 필드에 대해서만 A를 B에 복사한다. 문제 코드 페이징 인스턴스를 만들고 조건에 맞는 데이터가 몇 개인지 카운트한다. 결과값을 page에 세팅한 다음 model 정보를 paging 인스턴스에 카피해준다. 그런데, 이렇게 하고나서 검색 조회를 하면 페이지 개수가 totalPage 개수로 설정이 되서 조회하는 데이터를 보여줄 페이지가 2개인 경우에도 페이지가 (전체 목록를 보여줄 수 있는) 4까지 조회된다. (3, 4를 누르면 데이터가 없다고 나오기는 한다. ) 문제점: paging 인스턴스와 model 인스턴스 간에 searchedModelCo..