<aside> 💡 부스트캠프 내에서 오프라인 모각코를 개설하고 관리할 수 있는 서비스

</aside>

4주차 개발 사항

• FE/BE 공통 타입 적용
• 캘린더 페이지
• 지도 페이지
• 실시간 채팅

모노레포에서 FE/BE 공통 타입 사용하기

TurboRepo

• TurboRepo란 JS를 위한 MonoRepo 빌드 시스템
• 주요 특징
  1. 효율적인 캐싱: 이전에 실행된 작업의 결과를 캐시하여, 중복된 작업 수행을 방지합니다. 이는 빌드 시간을 대폭 줄여줍니다.
  2. 병렬 처리: 여러 작업을 동시에 실행하여 CPU 자원을 최대한 활용합니다.
  3. 의존성 관리: 프로젝트 간의 의존성을 관리하고, 변경된 부분에 대해서만 빌드 혹은 테스트를 수행합니다.
  4. 원격 캐싱: 캐시를 원격 서버에 저장하여, 다른 개발자나 CI/CD 시스템에서도 캐시를 공유할 수 있습니다.
• 기존에는 ESLint 설정, 실행 스크립트 등을 한 번에 처리하기 위해서 사용하였습니다.

# 모노레포 내 모든 애플리케이션의 lint 스크립트 병렬 실행
$ turbo lint

# backend 애플리케이션의 start:dev 스크립트만 실행
$ turbo start:dev --filter backend

# frontend 애플리케이션의 dev 스크립트만 실행
$ turbo dev --filter frontend 

# frontend 애플리케이션의 lint, build, dev 스크립트 병렬 실행
$ turbo lint build dev --filter frontend 

• FE/BE에서 공통으로 사용하는 API 데이터 타입을 위해 공통 타입을 정의하여 사용하였습니다.

  • 백엔드에서 정의가 바뀌면 프론트에서도 바로 반영 가능합니다.

  .
  ├── app
  │   ├── backend
  │   └── frontend
  └── packages
      ├── **apitype** 
      ├── eslint-config
      ├── tsconfig
      └── vault
  

// API Request Type
export interface RequestCreateMogacoDto {
  groupId: Bigint;
  title: string;
  contents: string;
  date: string;
  maxHumanCount: number;
  address: string;
  latitude: number;
  longitude: number;
  status: string;
}

// API Response Type
export interface ResponseMogacoDto {
  id: Bigint;
  groupId: Bigint;
  title: string;
  contents: string;
  date: Date;
  maxHumanCount: number;
  address: string;
  latitude: number;
  longitude: number;
  status: string;
  createdAt: Date;
  updatedAt: Date;
  deletedAt: Date | null;
  group: ResponseGroupsDto;
}

// export type Bigint = string;

DB에서 id 값들의 경우 bigint 타입을 사용 중

하지만 bigint 타입을 json으로 직렬화 시킬 경우 에러가 발생함 그렇기 때문에 서버단에서는 json으로 보내는 bigint 타입을 string으로 바꿔서 사용하고 있음

하지만 리액트에서는 bigint 타입을 지원하지않기 때문에 전부 dto를 string으로 변환하였고, bigint라는 타입의 의미는 알아볼 수 있어야한다고 판단되어 다음과 같이 작성함 결론: 좀 더 쉽게 사용하고자 의미는 알아볼 수 있도록 타입을 변경하여 사용

모달

<dialog className={styles.container} open={open}>
	<form method="dialog" className={styles.form}>
	  <div className={styles.textArea}>
	    <div className={sansBold24}>{title}</div>
	    {content && <div className={sansRegular16}>{content}</div>}
	  </div>
	  <div className={styles.buttonArea}>
		  <button type='button'>{confirmButtonText}</button>
		  <button type='button'>{cancelButtonText}</button>
		</div>
	</form>
</dialog>