npm run start:container
사용 포트: 3000,4173
쉽고 빠르게 쿼리를 연습할 수 없을까? 🤔
Query를 연습하고 싶은데, DB 환경세팅이 너무 어렵고 많은 시간이 소요되네...
- 조건에 맞는 300만건의 데이터는 어떻게 생성하지? (복잡한 프로시저 작성, js코드 구현하여 작업)
- 쿼리만 빠르게 실행하고 싶은데 복잡한 DB 환경세팅에 너무 많은 시간이 소요됨
- 이전에 실행한 쿼리들의 시간을 비교하는게 어려움
클라우드 상에서 사용자에게 DB 환경을 제공하고 관리해요.
- 쉘 단위로 쿼리를 작성하고 실행해서 결과를 볼 수 있어요.
- 생성된 테이블은 우측 창에서 정보를 실시간으로 확인할 수 있어요.
세션을 이용하여 DB Connection 관리하는 법
실제 쿼리 실행 시간 측정 방법
테이블을 GUI를 통해 조작해 손쉽게 테이블 생성/수정 쿼리를 만들 수 있어요.
레코드 조건을 설정하면, 해당 설정에 맞는 대량의 레코드를 간편하게 추가할 수 있어요.
대용량 데이터를 효율적으로 삽입하는 법
한정된 스토리지 속 유저 데이터 관리 방법
Redis pub/sub 이용하기
쿼리를 잘 몰라도, 간편하게 예시 쿼리를 추가할 수 있어요.
부모에서 포커스 상태를 관리하자 자식 컴포넌트 전체가 리렌더링되어 깜빡이는 현상 발생
상태는 대체 어디에…
리액트를 처음 사용하면서 가장 어려웠던 점은 상태를 어디에 배치해야하는지 고민하는 것이었습니다.
처음에는 상태에 접근하기 쉽게 부모에 상태를 주는 경우가 많았습니다.
그중에 대표적인 사례는 각 쉘 즉 인풋 컴포넌트의 포커스 여부를부모 컴포넌트에 줬던 경험이었습니다.
이 경우 부모 상태가 변경되면 모든 자식 쉘이 리랜더링되면서 깜빡이는 현상이 발생했습니다.
이에 해당 상태를 각 쉘에게 부여하는 방식으로 수정했습니다.
저희 서비스 기능에는 입력이 많습니다. 이 많은 입력을 어떻게 받아올 것인가 고민이 많았습니다.
서버에서 받아온 정보를 기반으로 입력창이 바뀌어야 했기에,
먼저 서버로부터 받은 테이블 데이터를 가공해서 response 형식에 맞는 데이터로 변경해 줬습니다.
그리고 변경한 response 형식의 객체를 기반으로 입력폼을 만들었습니다.
이후에 hook form과 zod를 같이 사용하여 백엔드와 스키마를 공유하고 유저 입력을 검증했습니다.
검증을 생각하지 않고 다 구현하고 스키마랑 연동했더니 무수히 많은 타입에러가 발생했습니다.
입력이 있으면 무조건 검증 로직을 고려해야한다는 것을 깨달았습니다.
쿼리 테스트에서 가장 중요한 지표는 실행 속도입니다.
만약 실행 속도가 사용자가 작성한 쿼리가 아닌 다른 요인으로 인해 느려진다면, 쿼리 검증이 어려워질 수 있습니다.
이 문제를 해결하기 위해 우리는 어떤 기술적 접근 방식을 도입했으며, 이를 검증하기 위해 어떤 방법을 사용했을까요?
유저에게 더 좋은 쿼리 실행 환경을 제공할 수 있도록 with 부하테스트
유저가 입력한 쿼리 실행이라는 특별한 API에 대한 특별한 부하테스트 방법
지표를 통해 서비스 개선 하기
유저 DB에 쿼리를 실행해야 하는 경우는 단순히 유저가 직접 쿼리를 실행하는 상황뿐만 아니라, 다양한 경우에 발생합니다.
유저의 현재 테이블 정보를 조회하거나, 사용량을 확인하거나, 랜덤 데이터를 삽입하는 경우가 이에 해당합니다.
이러한 요청에 따라 효율적으로 커넥션을 관리하기 위해 우리는 코드적으로 어떤 개선을 도입했을까요?
인터셉터의 특징을 활용하여 코드 개선하기
서비스의 핵심 요소인 유저 DB 환경 제공은 단위 테스트만으로는 검증에 한계가 있었습니다.
이를 보완하기 위해 통합테스트를 도입했으며, 어떤 고민을 하였을까요?
test container을 통한 통합테스트 도전
가치있는 테스트 코드를 작성하기 위한 고민
| 분류 | 기술 스택 |
|---|---|
| 공통 |   |
| 프론트 엔드 |      |
| 백엔드 |        |
서버 인스턴스는 2개를 사용하며, 각 인스턴스의 역할을 목적에 따라 분리하였습니다.
서버를 분리함으로써, 추후 AutoScaling이나 LoadBalancer를 적용할 때 큰 변경 없이 자연스럽게 확장할 수 있도록 설계하였습니다.
프로젝트를 구현하기 위해 했던 자세한 경험과 구현과정은 WIKI 에서 확인할 수 있습니다.
- 프로젝트 상세 설명
- 개인별 프로젝트 핵심 경험
- API 명세서,ERD
- 회의록, 회고록
- 트러블 슈팅
