[이강수] sprint11

[kipid]

스프린트 미션 11 시안 확인

아래 링크를 통해 강의 학습 후 만들어봐야 할 실습 과제 디자인을 확인해 보세요

• 스프린트 미션 11 Figma 디자인 확인하러 바로가기

요구사항

기본 요구사항

공통

• Github에 위클리 미션 PR을 만들어 주세요.

• React 및 Express를 사용해 진행합니다.

• TypeScript를 활용해 프로젝트의 필요한 곳에 타입을 명시해 주세요.

• any 타입의 사용은 최소화해 주세요.

• 복잡한 객체 구조나 배열 구조를 가진 변수에 인터페이스 또는 타입 별칭을 사용하세요.

• Union, Intersection, Generics 등 고급 타입을 적극적으로 사용해 주세요.

• 타입 별칭 또는 유틸리티 타입을 사용해 타입 복잡성을 줄여주세요.

• 타입스크립트 컴파일러가 에러 없이 정상적으로 작동해야 합니다.

프론트엔드

• 기존 React(혹은 Next) 프로젝트를 타입스크립트 프로젝트로 마이그레이션 해주세요.
• TypeScript를 활용해 프로젝트의 필요한 곳에 타입을 명시해 주세요.

백엔드

• 기존 Express.js 프로젝트를 타입스크립트 프로젝트로 마이그레이션 해주세요.
• tsconfig.json 파일을 생성하고, 필요한 컴파일러 옵션을 설정해야 합니다. (예: outDir).
• TypeScript 관련 명령어를 package.json에 설정해 주세요. (예: 빌드 및 개발 서버 실행 명령어).
• ts-node와 nodemon을 사용하여 개발 환경을 구성합니다.
• nodemon과 함께 ts-node를 사용하여 . ts 파일이 변경될 때 서버를 자동으로 재시작하도록 설정합니다.
• Mongoose나 Prisma 등 ORM을 사용하는 경우, 모델에 대한 인터페이스 또는 타입을 정의합니다.
• 필요한 경우, declare를 사용하여 타입을 오버라이드하거나 확장합니다.

[prravda]

이번엔 로직보다는 TS 위주로 comment 를 남겼습니다.

그리고 dist 는 tsc 로 transpile 된 결과물이니, git 에 올라갈 필요가 없습니다. 이건 gitignore 에 추가 해주셔요.

리뷰 남긴 것과 위에 comment 남긴 것 외에는 특이한 사항들이 없어서 approve 처리하겠습니다.

수고하셨습니다!

[prravda]

❓Question | 보면서 궁금한 상황에 대한 질문

---

사용자의 정보(User)를 받고 처리하기 위한 repository 를 정의해주셨네요.
그렇다면 findById 같은 것들은 사용자의 정보를 반환하는 것인데, Promise<User> 로 signature 를 만들어주시는 건 어떨까요?

또한 CRUD 는 여러 repository 가 다 같으니, BaseRepository interface 를 만들어주시고 generic 으로 필요한 값을 넣어준다음 그걸 확장해서 사용하는 것도 boilerplate code 를 줄이는데 도움이 되겠네요.

interface User {
  id: string;
  mail: string;
}

interface IBaseRepository<T> {
  findById: (id: string) => Promise<T>;
  findAll: () => Promise<T[]>;
}

interface IUserRepository extends IBaseRepository<User> {}

class UserRepository implements IUserRepository {
  public async findById(id: string): Promise<User> {
    return Promise.resolve({
      id: '1',
      mail: 'test@gmail.com',
    });
  }

  public async findAll(): Promise<User[]> {
    return Promise.resolve([
      {
        id: '1',
        mail: 'test1@gmail.com',
      }
    ])
  };
}

이런 식으로요.

물론 이 방법은 repository 마다 요구사항이 조금씩 다르기에 그냥 참고하시는 정도로 보시면 될 듯 합니다.
any 로 되어있는 것만 좀 바꾸어 보시죠!

[prravda]

⚙️ Optional | 나중에 시간이 나면 고려

---

혹시 owner 로 묶어준 저 값이 user 와 관련된 거라면, user type 에서 Pick 을 통해 뽑아서 사용해 보시는 것도 좋습니다.
굳이 싶긴 한 comment 이긴 하지만, 이건 공부하는 과정이고 typescript 들의 기능을 최대한 써 보는 스프린트라 연습 차원에서 권장 드려봅니다!