이번 포스트에서는 vue에서 사용되는 pinia에 대해 살펴보자.  Pinia 개요 스토어?스토어란 특정 컴포넌트에 바인딩되지 않은 상태 또는 처리해야 할 일의 로직을 가지는 것이다. 즉 모두가 사용하는 전역 상태를 호스팅 한다. 따라서 스토어에 저장된 정보는 모든 페이지나 컴포넌트에서 공유될 수 있는 것이다.이렇게 이야기 하면 많은 경우 스토어를 만능 저장소로 생각해서 모든 데이터를 빨아들이는 블랙홀로 생각할 수 있는데 당연히 지양해야 할 태도다. 우리가 프로그래밍 하다 보면 전역 변수의 사용이 많지 않은 것과 같은 이유이다.스토어에 저장할만한 정보는 여러 페이지에서 보여지는 사용자의 로그인 정보나 다단계를 거쳐서 구성되는 복잡한 데이터 등이다. 상태 관리를 한다고 해서 Pinia를 데이터베이스 처럼..

이번 포스트에서는 index를 적용하지 않았을 때, cluster index를 사용했을 때, 보조 index를 사용했을 때 성능 비교를 통해 효율적인 인덱스의 사용에 대해 고민해보자.   샘플 데이터베이스 설치 employees 스키마 설치 먼저 효율적인 테스트를 위해 많은 데이터를 포함한 데이터베이스 스키마를 설치해보자.https://dev.mysql.com/doc/employee/en/employees-installation.html MySQL :: Employees Sample Database :: 3 InstallationThe Employees database is available from Employees DB on GitHub. You can download a prepackaged ar..

이번 포스트에서는 Transaction Isolation level에 대해 살펴보자. 독립성과 Isolation Level Isolation Level데이터베이스에서는 lock의 경직성에서 동시성을 확보하기 위해 트랜젝션에 isolation level을 줘서 독립성과 동시성을 적절한 레벨에서 선택해서 사용할 수 있게 한다. isolation level은 동시에 여러 트랜젝션이 처리될 때 특정 T.X가 다른 T.X에서 변경중이거나 조회중인 데이터를 불 수 있게 허용할 것인가를 결정하는 수준으로 Read Uncommitted, Read Committed, Repeatable Read, Serialize 4가지가 존재한다.Read Uncommitted: 각 T.X의 commit, rollback 여부와 상관 ..

이번 포스트에서는 Transaction과 동작 방식에 대해서 살펴보자. 일반적인 쿼리의 기준은 mysql로 한다.  다 아는 Transaction이야기 Transaction의 정의Transaction이란 데이터 처리의 한 단위로 개별 쿼리 단위가 아닌 사용자의 액션(업무)단위의 큰 틀로 묶어서 제어하게 된다. 트랜젝션의 목적은 데이터베이스 내의 데이터를 완전하게 유지하기 위해서 사용된다.예를 들어 A 계좌에서 B 계좌로 100원을 이체해야하는 경우를 생각해보자.이 과정에서는 2개의 update 문장이 필요하다. 즉 A 계좌에서 출금 update가 일어나고 B 계좌에서 입금 update가 일어나야 한다. 이 두 개의 sql을 하나로 묶은 것이 이체라는 업무이다.만약 A 계좌에서 성공적으로 인출한 후 무언가..

이번 포스트에서는 가짜 객체인 mock을 이용한 테스트 방식에 대해서 살펴보자. 시간 기반 테스팅과 가짜 객체의 활용 시간 기반 테스트 진짜 코드들만도 관리하기 힘든데 왜 우리는 가짜 객체까지 활용하면서 테스팅을 해야할까? 만약 일과 시간(09:00 ~ 18:00) 에만 동작해야 하는 함수가 있다고 생각해보자. const purchase = () => { const currentHour = new Date().getHours() const [open, close] = [9, 18] return currentHour > open && currentHour < close } 위 함수가 제대로 동작하는지 검증하기 위해서는 일과 시간이 아닌 때 호출해서 동작 안하는지 확인하고 일과 시간에 호출해서 동작하는지 확..

이번 포스트에서는 vitest에서 assertions을 작성하기 위해 사용하는 다양한 matcher들에 대해 살펴보자. 아래 내용들은 https://vitest.dev/api/expect.html 의 api들을 일부 요약한 것이므로 한번쯤 사이트에 방문하여 어떤 기능들이 있는지 가볍게 살펴보는 것을 권한다. Vitest A blazing fast unit test framework powered by Vite vitest.dev toBeXX toBe toBe는 기본형과 객체형을 === 연산자로 비교한 결과를 사용한다. 따라서 기본형은 형변환 없이 값이 같음, 참조형의 경우 같은 객체를 참조하고 있는지 즉 동일성을 검사한다. test('toBe: 기본형과 객체형의 === 비교', () => { const ..

이번 포스트에서는 vitest를 이용한 단위테스트에 대해 살펴보자. vue와 테스트 테스트의 종류 일반적으로 테스트는 단위 테스트, 통합 테스트, 엔드투엔드 테스트로 크게 나눠볼 수 있다. 단위 테스트(Unit Test)는 가장 빈번히 사용되는 테스트로 하나의 단위(함수, 컴포넌트)로 테스트 케이스를 작성한다. 단위 테스트는 종속성이나 다른 요소와의 복잡한 상호 작용이 없는 테스트이다. 이를 위해 연관된 부분에 대해서는 가짜 객체인 Mock을 이용하기도 한다. 단위 테스트는 테스트 비용이 가장 저렴하고 테스팅 속도가 매우 빠르다. 통합 테스트(Integration Test)는 다른 요소와의 종속성을 처리하므로 좀 더 복잡도가 높아진다. 쉽게 생각하면 기존에 Mock으로 테스트하던 부분이 실제 구현부분으로..

이번 포스트에서는 자식 컴포넌트에 v-model을 적용하는 방법에 대해 알아보자. v-model의 동작 native element에서의 v-model native element 즉 html의 input 요소에 v-model을 적용하면 손쉽게 양방향의 바인딩이 구현된다. 그럼 사용자 정의 컴포넌트에서 처리하려면 어떤 과정이 필요할까? 사실 v-model은 내부적으로 value 속성에 값을 할당하는 v-bind와 input 이벤트 시 값을 입력하는 v-on 두 개의 directive가 합쳐서 동작하는 것이다. 예를 들어 input 요소에 age를 연결하는 과정은 아래 두 가지 과정으로 나눠볼 수 있다. vmodel : 사실은.. component에서의 v-model 그럼 위 개념이 그대로 component에..