Week1 스프린트 기록

팀 고민 기록

• 내차 만들기 - 셀프 모드

  • 첫 진입 시 견적 확인이 가능해야함

    • 처음부터 모든 옵션에 대한 정보(부품 이름, 가격…)를 API로 요청할지
      • 굳이 선택하지 않을 데이터까지 모두 불러올 수 있으므로 비효율적임
    • 처음엔 디폴트 값으로 선택된 옵션의 정보만 요청하고 선택하고 넘어갈 때마다 추가로 필요한 옵션의 정보를 요청.

  • 이전 선택화면으로 돌아갈 경우 (iOS, Front)

    • 선택된 옵션을 보여준다.
    • 보고있던 옵션을 그대로 보여준다. ( ex.선택은 화이트 색상을 해두고 레드 색상으로 스와이프 해둔 상태)
    • 사용자가 이전에 선택한 기억하지 않아도 됨
    • 처음부터 선택을 다시하지 않아도 되므로 번거로움을 줄여줌

  • 옵션 누락 팝업 조건을 어떻게 처리할지 애매하다.

    • 듀얼 머플러 패키지가 선택이 되어있는지 않는지만?

  • 색상 선택 방식(iOS, Front)

    • 스크롤시 바로 선택
    • 스크롤하더라도 다시 클릭해야 선택한다. → 선택하지 않은 색상을 보고있을 때 선택 완료 버튼 클릭시 피드백 모션을 어떻게 보여줄 것인가? → 선택 완료 버튼 클릭시 다시 선택된 색상으로 돌아가서 피드백 모션을 보여주고 넘어간다.

  

• 백카사전 팝업 띄우기 구현 방법

  • 처음에 생각한 것: 백카사전에 등록된 모든 단어들을 현재 클라이언트에 렌더링된 텍스트를 대상으로 완전 탐색

    • 텍스트의 양이 많을 수록 탐색 속도가 느려질 수 있으며, 렌더링 시간이 길어질 수 있음
    • 렌더링되는 화면이 변경될 때 마다 탐색을 진행해야하기 때문에 연산 증가

  • (iOS) 백카사전 단어만 하이라이트해서 띄우기 방법의 어려움 → attributedText를 통해 해결.

    • 해당 단어만 클릭 이벤트를 구현하는 방법은?

  • (iOS) 자세히보기 팝업 위에 팝업을 또 띄우는 건지? → 다른 팝업이라고 느껴지지않도록 나란히 띄운다.

  • (Back,Front,iOS) 백카사전 단어 데이터 전송 방식

  • (백엔드) 데베에 설명 저장 시 태그로 백카사전 키워드를 감쌈 → 프론트에서 키워드 발견하면 하나씩 정보 요청 (롤체지지 참고)

백엔드 고민 기록

안녕

IOS 고민 기록

안녕

프론트엔드 고민 기록

• 사용기술 선택 CRA(Create React App) vs Vite

  • Vite는 최신 기술을 사용하여 개발 속도를 높여줌
    • 빌드를 위해 롤업 번들러를 활용하여 웹팩 기반의 CRA보다 더 작고 최적화된 번들링 가능
    • 로컬에서 개발할 때 번들링하지 않고 ESM 방식을 사용해 필요한 모듈만 로드하기 때문에 로컬 서버 구동 속도가 매우 빠름
  • 오래된 브라우저로는 새로운 JS기능을 실행하지 못하는데 호환성이 좋은 코드로 변환해줌

• 개발 환경 설정 중 백엔드 팀 도커에서 프론트엔드 팀의 코드가 빌드되지 않는 문제발생

Error RUN npm run build

원인

• 백엔드팀의 도커에서 지원하는 Node의 버전과 프론트에서 사용하는 TypeScript의 컴파일 JS(es2020)버전이 상이
• 프론트엔드 파일 설정에서 TypeScript의 컴파일하는 JS버전을 쉽게 설정할 수 있어서, 프론트에서 버전을 낮추는 방법으로 해결

코드컨벤션: Airbnb Style Guide

• 자바스크립트/타입스크립트 코드의 가독성, 일관성, 유지보수성을 향상시키기 위한 목적

컴포넌트 구조 설계

• 기능을 가지고 있거나 사용자에게 중요한 정보를 포함하고 있는 요소들을 기준으로 컴포넌트로 분리

Self
├─ Header
│  ├─ PageSwitcher
│  │  ├─ MainPageButton
│  │  └─ ModeChangeButton
│  └─ ContentSwitcher
│     ├─ HighlightButton
│     └─ ModelChangeButton
├─ OptionProgress
│  └─ OptionList
│     └─ Option
└─ Content
   ├─ SelectedOptionImage
   └─ SelectedOptionInfo
      ├─ OptionCardList
      │  └─ OptionCard
      │     └─ DetailInfo  
      └─ Footer
         ├─ ModalToggle
         ├─ SummaryModal
         └─ OptionSwitcher
            ├─ PrevOptionButton
            └─ NextOptionButton

구조 설계 근거

모듈화와 재사용성

• 컴포넌트가 독립적으로 설계되고 구현되어 재사용이 용이
• 유사한 기능이나 디자인 요소를 갖는 컴포넌트는 쉽게 재사용

유지보수성

• 컴포넌트 단위로 파일이 구성되면 코드를 이해하고 수정하기가 훨씬 쉬움

가독성

• 컴포넌트 구조를 따르면 프로젝트의 디렉토리 구조가 의미를 갖고 더욱 직관적
• 코드를 이해하기 쉽고, 개발자들 간의 원활한 협업

확장성

• 새로운 기능을 추가하거나 수정할 때, 해당 기능과 관련된 컴포넌트만 수정가능

디버깅 용이성

• 각 컴포넌트가 독립적이기 때문에 버그를 추적하고 해결하는 것이 더욱 용이
• 버그가 발생한 곳을 정확히 파악할 수 있으며, 해당 컴포넌트만 집중적으로 검사