우리는 데이터를 표현하기 위해서 Entity, VO, DTO라는 녀석들을 사용한다. 기본적인 작성 방법이 비슷해서 대충 섞어서 잘못 사용하는 경향이 있는데 이들의 정확한 차이점에 대해서 살펴보자. Entity vs VO vs DTO EntityEntity는 실제 데이터베이스의 테이블과 매핑되어 영속성을 가지는 데이터를 표현하기 위해 사용된다.Entity는 테이블의 기본키(Primary Key)에 해당하는 고유한 식별자(ID)를 가지며 이를 기준으로 동일성을 판단한다.  따라서  Entity 객체 하나가 테이블의 한 행(row)에 대응 된다. Entity는 식별자는 불변이지만 시간에 따라 상태가 변할 수 있는 가변성을 갖는다.Entity는 필요 시 비지니스 로직을 포함할 수 있으며 데이터와 관련된 로직을 ..

이번 포스트에서는 mockito-inline을 이용해서 LocalDateTime.now() 같은 static method를 mocking 해보자. mockito-inline을 이용한 static method mocking mockito-inline 정확하지는 않지만 몇 년 전에 시간 기반의 테스트를 해야했는데 아주 고생한 기억이 있다. 기본적으로 시간을 테스트하려면 LocalDateTime.now() 같은 메서드를 mock 해야 하는데 mockito는 static 메서드를 지원하지 않았다. 그러다 간만에 찾아보니 mockito-inline이라는 라이브러리에서 static method에 대한 mocking이 지원되는 것을 발견했다. 유레카!! org.mockito mockito-inline 5.2.0 te..

이번 포스트에서는 vitest와 VTU를 이용해 TODO 앱에 대한 단위테스트를 작성해보자. Todo 단위테스트 Todo App 이전에 작성했던 Todo App을 대상으로 단위테스트를 처리해보자. https://goodteacher.tistory.com/659 [Vue 3] 03.Vite 기반의 Vue 개발 2 이번 포스트에서는 Vite 기반 프로젝트에서 간단한 코딩을 해보자. 소스 코드 작성 src의 구조 먼저 src의 구조에 대해 살펴보자. Vue 애플리케이션은 index.html에서 main.js를 로딩하고 main.js에서 App.vue goodteacher.tistory.com 테스팅 이후의 테스트들은 테스트만 첨부한다. 여러 API를 써보기 위한 목적이기 때문에 TDD등과는 거리가 멀다는 점을..

이번 포스트에서는 VTU를 이용한 vue component test에 대해서 살펴보자. VTU(Vue Test Utils) VTU란? VTU란 vue test utils의 약자로 vue component를 테스트하기 위한 도구들이다. vitest는 사실 vue와 상관없이 vite라는 환경에서 javascript의 동작을 테스트하기 위한 것이어서 vue를 테스트하기에는 한계가 있기 때문에 VTU가 추가로 필요하다. (vitest가 Junit이라면 VTU는 @ExtendWith(SpringExtension) 정도로 생각하면 쉽겠다) https://test-utils.vuejs.org/ Vue Test Utils The official testing suite utils for Vue.js 3 test-uti..

이번 포스트에서는 pinia에서 사용할 수 있는 persistant plugin 에 대해 살펴보자. pinia-plugin-persistedstate 기존 상황의 문제점? 특징! 이제까지 간단하게 pinia를 통해 app 전역의 상태를 관리할 수 있었다. 열심히 할 일도 추가하고 완료된 일들을 필터링 할 수도 있었는데 새로고침을 한번 하는 순간 어떤 문제가 발생할까? pinia는 단순히 javascript에서 객체로 정보를 관리하기 때문에 새로고침 하는 순간 처음으로 reset 된다. 그럼 어떻게 하면 이런 정보를 지속성있게 저장할 수 있을까? 클라이언트에서 브라우저를 이용하면서 사용할 수 있는 저장소는 당연히 storage이다. 우리는 store를 구독(또는 watch)하고 있다가 변경이 발생할 때마다..

이번 post에서는 pinia의 부가적인 기능들에 대해 살펴보자. 내장 함수들 $subscribe watch와 유사하게 store의 $subscribe 함수를 이용하면 state의 상태 변화를 모니터링할 수 있다. $subscribe의 콜백 함수에는 mutation과 state 객체가 전달되는데 mutation에는 변경에 대한 상세한 정보가 추가된다. todoStore.$subscribe((mutation, state) => { console.log("변경됨: ", state); console.log(`mutation type: ${mutation.type}`); // direct | patch object | patch function console.log(`mutation storeId: ${muta..

이번 포스트에서는 setTimeout 이나 setInterval 사용 환경 즉 Timer에 대한 테스팅에 대해 살펴보자. Timer Test 테스트 대상 함수 준비 먼저 테스트 할 함수를 준비해보자. 전체적인 테스트는 sync와 async 환경에서 테스트 한다. let interval500 = 0, timeout2000 = 0 // 동작 회수를 카운트하기 위한 변수 let intervalId // interval 작업을 중지하기 위한 변수 const mywork = () => { setTimeout(() => { console.log('timeout 2000', timeout2000++) }, 2000) intervalId = setInterval(() => { console.log('interval 5..

이번 포스트에서는 pinia를 통해 일정 관리 앱을 만들어 보자. 미리 이야기 하지만 사실 이 예는 pinia의 사용법에 대해 이야기 하기 위해 작성하는 것이지 이런 경우에 pinia가 유리하다는 이야기는 절.대. 아니라는 점을 미리 이야기 해둔다. todo 개요 아래와 같이 구성된 Todo 관리 애플리케이션을 작성한다고 생각해보자. TodoView의 자식 컴포넌트로 TodoList에서 목록을 보여주고 수정, 삭제 작업을 처리하며 TodoControl에서 추가,필터링 등의 작업을 처리한다. 이 경우 Todo 목록을 어디에 관리하는 것이 좋을까? 목록이니까 TodoList에서 관리한다면 할일 추가를 위해서 TodoControl에서 emit 후 TodoView에서 props로 TodoList에 내려주는 형식..