.# 🙋‍♂️ qub

• 배포 URL:

• 테스트 아이디: [email protected]

• 테스트 비밀번호: 12341234@

프로젝트 소개

• �Qub는 개발자들이 서로 모르는 질문을 해결할 수 있도록 돕는 Q&A 보드 애플리케이션입니다.
• 사용자는 다양한 카테고리(예: 프론트엔드, 백엔드, 데이터베이스 등)를 선택하여 자신이 직면한 문제를 질문으로 등록할 수 있습니다.
• 질문자와 답변자 간의 상호작용을 통해 문제 해결뿐만 아니라 개발 역량을 함께 키울 수 있는 커뮤니티를 제공합니다.

프로젝트 실행하기

프론트

$ git clone https://github.com/�QnABoard/front.git
$ pnpm install
$ pnpm run dev

백엔드

$ git clone https://github.com/QnABoard/back.git
$ npm install
$ npm run start

개발 환경

프론트엔드

백엔드

협업 도구 및 배포

폴더 구조

src/
├── api/                 # API 호출 및 관련 로직
├── assets/              # 이미지 및 정적 자산
├── fonts/               # 폰트 파일
├── hooks/               # 커스텀 훅
├── mocks/               # Mock 데이터
├── pages/               # 페이지 컴포넌트
├── routes/              # 라우트 설정
├── store/               # 상태 관리 관련 코드
    ├── queries
    └── stores
├── styles/              # 스타일 관련 파일
├── ui/                  # UI 컴포넌트
    ├── components
    └── view
        ├── atom
        ├── molecule
        └── template
└── utils/               # 유틸리티 함수 및 모듈

트러블슈팅

• API 응답 데이터 타입 불일치 문제 및 해결

  labels 필드가 배열로 전달될 것으로 예상했지만, 실제로는 쉼표로 구분된 단일 문자열로 반환되었습니다. 확인해보니 백엔드에서 배열 데이터를 JSON 직렬화하면서 쉼표로 구분된 문자열로 변환된 것이 원인이었습니다.
  

  이에 대해 아래의 과정을 통해 이 문제를 해결했습니다.

  1. API 응답 데이터를 확인해 labels가 배열 대신 문자열로 반환된 문제를 발견했습니다.
  2. 백엔드에 수정 요청을 보내 배열 형태로 반환하도록 조치했습니다.
  3. 백엔드 수정 전까지는 임시로 쉼표로 구분된 문자열을 배열로 반환하는 로직을 추가하여 처리했습니다.
     

  결과적으로, 백엔드 수정 후 labels가 배열 형태로 변환되며 프론트엔드에서 예상대로 데이터 처리가 가능해졌습니다.
  API 명세서를 통해 데이터 타입을 명확히 정의하고, 방어 코드를 작성하여 데이터 타입 이상 시 오류를 사정에 검지하여 해당 문제가 더 이상 발생하지 않도록 예방할 것 입니다.

• 순환 참조 오류 문제 및 해결

  프로젝트 진행 중, Redux와 상태 관리 구조를 설계하는 과정에서 순환 참조 오류가 발생하였습니다. 이 오류는 잘못된 의존 관계로 인해 발생한 문제였습니다.

  1. 발생한 오류

  Uncaught ReferenceError: Cannot access 'authReducer' before initialization

  2. 원인
  • store.ts에서 authSlice.ts 를 import하여 Redux Store를 구성하는 과정에서, authSlice.ts는 RootState 타입을 사용하기 위해 store.ts 를 참조
  • store.ts -> rootReducer.ts -> userSlice.ts -> store.ts
  • store.ts <-> autuSlice.ts 간의 순환 참조 오류가 발생
  3. 해결
  • Slice는 Store나 Reducer를 직접 참조하지 않고 상태 관리만 담당하도록 설계하였습니다.
  • rootReducer는 Slice를 결합하는 역할만 수행, Store 설정은 store.ts에서 처리하도록 분리하였습니다.

순환 참조 오류를 해결한 이후, Slice, Reducer, Store 간 참조 방향을 명확히 정의하고 단방향 참조를 유지하는 구조를 설계하는 것이 중요하다는 점을 느꼈습니다. 이를 통해 의존 관계를 명확히 하고, 유지보수성을 크게 향상시킬 수 있었습니다. 또한, 타입 파일을 별도로 분리하여 참조 관계를 최소화함으로써, 유사한 문제를 사전에 예방하는 데 집중하고 있습니다.

• DB 접근 최소화

설계단계에서의 미흡으로 API 호출 시 응답데이터가 정확히 명시되지 않은 채 구현을 진행해 API의 흐름간에 데이터 확인을 위한 PK가 전달되지 않아 이를 확인하기 위해 DB에 접근하는 등의 불필요한 DB 접근이 발생.

이는 각 API 응답데이터에 PK 및 중요 정보를 포함해 데이터 의존성을 최소화 하거나 기존 설계의 데이터 흐름을 수정하는 식의 리팩토링을 통해 최적화의 여지가 있다고 생각됨.

주요 기능

시연 예정

FlavorPath 팀

FE: 고홍비, 신유지, 정동현, 이찬, 한태동 BE: 정동현