Home

Web36-QLab

문제의식

쉽고 빠르게 쿼리를 연습할 수 없을까? 🤔
Query를 연습하고 싶은데, DB 환경세팅이 너무 어렵고 많은 시간이 소요되네...

• 조건에 맞는 300만건의 데이터는 어떻게 생성하지? (복잡한 프로시저 작성, js코드 구현하여 작업)
• 쿼리만 빠르데 실행하고 싶은데 복잡한 DB 환경세팅에 너무 많은 시간이 소요됨
• 이전에 실행한 쿼리들의 시간을 비교하는게 어려움

핵심 기능

환경세팅 없이 빠르고 편하게 쿼리를 실행해보세요.

클라우드 상에서 사용자에게 DB 환경을 제공하고 관리해요.

• 쉘 단위로 쿼리를 작성하고 실행해서 결과를 볼 수 있어요.
• 생성된 테이블은 우측 창에서 정보를 실시간으로 확인할 수 있어요.

테이블 생성/수정 쿼리를 간편하게 만들어보세요.

테이블을 GUI를 통해 조작해 손쉽게 테이블 생성/수정 쿼리를 만들 수 있어요.

랜덤 레코드를 쉽게 추가해보세요.

레코드 조건을 설정하면, 해당 설정에 맞는 대량의 레코드를 간편하게 추가할 수 있어요.

예시 쿼리를 추가할 수 있어요.

쿼리를 잘 몰라도, 간편하게 예시 쿼리를 추가할 수 있어요.

핵심경험 (FE)

FE 프로젝트 핵심 경험 : 상세한 프로젝트 핵심 경험은 해당 링크에서 확인하실 수 있습니다.

핵심 경험 요약

• 1주차: 서비스 설계, 작업 관리(플래닝 포커), GitHub 협업 전략.
• 2주차: React Query 도입, API 설계와 모킹(axios-mock-adapter 활용).
• 3~5주차: Sub-key 활용, 상태 관리 최적화, 비즈니스 로직 커스텀 훅 분리.
• 6주차: 코드 리팩토링 및 최적화.

주요 트러블슈팅

성급한 추상화 (feat. useCustomMutation)

• 커스텀 훅(useCustomMutation) 작성 후 범용성과 유연성 부족으로 불편함 발생
• 추상화는 반복된 코드 속 공통점을 충분히 파악한 뒤 이점이 있는 경우 진행해야한다는 교훈을 얻음

상태는 대체 어디에…

• 부모에서 포커스 상태를 관리하자 자식 컴포넌트 전체가 리렌더링되어 깜빡이는 현상 발생
• 상태는 최대한 사용하는 컴포넌트에 두어 불필요한 리렌더링을 방지해야한다는 교훈을 얻음

React의 고유한 key

• new Date().getTime()으로 생성한 키를 사용해 React의 key 경고 발생.
• 서버에서 생성된 ID 사용. 서버 ID가 없을 경우, UUID와 객체 문자열 변환을 조합해 고유 키 생성.

핵심경험 (BE)

BE 프로젝트 핵심 경험(성유진)

BE 프로젝트 핵심 경험(오민택)

BE 프로젝트 핵심 경험(장승훈)

주요 기능 구현 방법 및 트러블 슈팅

사용자의 쿼리 실행 환경은 어떻게 관리되나요?

• 세션을 통한 DB Connection 관리하는 법
• 응답되는 쿼리 실행 시간 측정 방법

유저의 무한한 데이터삽입은 어떻게 제한시키나요?

• 한정된 스토리지 속 유저 데이터 삽입 제한 방법
• Redis pub/sub 이용하기

대용량 랜덤 데이터는 어떻게 삽입되나요?

• 대용량 데이터를 빠르게 넣는 방법
• 유저가 편리하게 데이터 삽입하는 방법

유저에게 더 좋은 쿼리 실행 환경을 제공할 수 있도록 with 부하테스트

기술 스택

분류	기술 스택
공통
프론트 엔드
백엔드

아키텍처 구조

팀원소개 (Query Squard)

J027_김다영	J157_오민택	J214_장승훈	J136_성유진
FE	BE	BE	BE