Skip to content

Conversation

@paengdal
Copy link
Collaborator

요구사항

기본 요구사항

공통

  • 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를 사용하여 타입을 오버라이드하거나 확장합니다.

멘토에게

  • 타입스크립트 초보라 제대로 적용이 되었는지 모르겠습니다. 에러 잡느라 전전긍긍한 것 같습니다. ㅠㅠ
  • strict:true를 적용하긴 했는데 더 적용해야할 부분이 있다면 말씀 부탁드립니다!

@paengdal paengdal self-assigned this Mar 17, 2025
@paengdal paengdal added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 최종 제출 스프린트미션 최종 제출본입니다. labels Mar 17, 2025
@paengdal paengdal requested a review from jjjwodls March 17, 2025 08:14
function errorHandler(error: any) {
console.log('AxiosError', error);
if (error.response) {
if (axios.isAxiosError(error && error.response)) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

error.response 넣지 않고 error 만 넣어도 isAxiosError 를 통해 axios error 인지 체크 가능합니다!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if (axios.isAxiosError(error)) 이렇게 넣으라는 말씀이신지요?
그렇게 넣었더니 바로 아래에 throw 부분에서 에러가 발생해서 넣긴 했는데..
그럼 아래쪽에 다시 조건을 넣는게 좋을까요? 잘 모르겠습니다. ㅠㅠ 조언 부탁드립니다!

image

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import api from '../../../../../../api';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

절대 경로 설정을 해주시면 복잡한 상대경로를 해결하실 수 있습니다!

tsconfig.json 에서 baseUrl 을 지정하는 방법을 한 번 확인해 주세요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

앗 tsconfig에 path를 적용했는데 이 부분만 수정이 누락된 것 같습니다!
수정하겠습니다!

productId?: string | undefined;
}

function CommentList({ articleId, productId }: Props) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

id를 단일로 받고 type정보를 추가로 받아 분기하는 방법도 괜찮아 보입니다!

그렇게되면 Id는 필수로 들어오게 되고 type으로만 어떤 api에 요청하여 데이터를 불러올 지 정해주면 되기 때문에 id 존재여부에 대한 분기 로직이 사라지게 됩니다!

어떤 방법이 효율적인지 한번 더 고려해주세요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 이해했습니다. 그게 더 간결할 것 같습니다. 감사합니다!!

@jjjwodls
Copy link
Collaborator

안녕하세요 형민님!

전반적으로 타입스크립트 적용은 잘 해주셨습니다!

리뷰 남겨드린 부분만 한번 더 확인 해주시고 추가로 궁금한 사항 있으면 질문 부탁드릴게요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 최종 제출 스프린트미션 최종 제출본입니다.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants