Next 오마린 스프린트 미션 11제출#82
Hidden character warning
Conversation
| import { Request, Response, NextFunction } from "express"; | ||
| import { PrismaClient } from "@prisma/client"; | ||
|
|
||
| const prisma = new PrismaClient(); |
There was a problem hiding this comment.
db 클라이언트 인스턴스를 중복으로 생성하면 불필요한 커넥션 증가로 인한 문제가 발생할 수 있어서 prisma client 같은 경우는 인스턴스를 재사용하는 편이 좋습니다.
config/prisma.ts에서 export하고 있는 인스턴스를 재사용할 수 있어 보입니다.
There was a problem hiding this comment.
모두 동일한 prisma 디렉터리가 중복으로 있는 것 같은데 혼란을 방지하기 위해 사용하지 않는 쪽은 제거해주세요.
There was a problem hiding this comment.
next config 파일은 불필요하게 2개나 생성할 이유가 없습니다. 아마 사용하는 모듈 시스템 방식에 따라 한 쪽은 로드 자체를 안 하고 있을 텐데 확인 후 하나로 통합하면 좋을 것 같습니다.
| let url = `https://panda-market-api.vercel.app/articles?orderBy=${orderBy}&pageSize=10`; | ||
|
|
||
| if (searchKeyword) { | ||
| url += `&keyword=${encodeURIComponent(searchKeyword)}`; | ||
| } |
There was a problem hiding this comment.
- API 주소 같은 값은 매번 raw string을 사용하기보다 상수 또는 환경 변수로 정의해서 사용하는 게 좋아 보입니다. 당장 같은 파일에서도 중복이 발생하고 있네요.
- 코드 로직에서 URL을 변경하는 조작이 필요하다면 URL 객체를 활용하는 것도 좋은 방법입니다.
| const formatDate = (dateString: string): string => { | ||
| if (!dateString) return ""; | ||
| const date = new Date(dateString); | ||
| return date | ||
| .toLocaleDateString("ko-KR", { | ||
| year: "numeric", | ||
| month: "2-digit", | ||
| day: "2-digit", | ||
| }) | ||
| .replace(/\. /g, ". "); | ||
| }; |
There was a problem hiding this comment.
포매팅 관련 로직은 다른 컴포넌트에서도 쓰일 수도 있을 것 같으니 컴포넌트에 내부에 정의하기보다는 별도의 함수로 분리하면 좋을 것 같습니다.
| <div | ||
| style={{ | ||
| width: "100%", | ||
| maxWidth: "1200px", | ||
| margin: "0 auto", | ||
| padding: "0 20px", | ||
| }} | ||
| > | ||
| <section | ||
| style={{ | ||
| maxWidth: "1000px", | ||
| margin: "0 auto", | ||
| marginBottom: "60px", | ||
| }} | ||
| > |
There was a problem hiding this comment.
이 스타일은 나름대로 의미가 있는 값들로 보이는데, 의미가 있는 값들이라면 클래스로 정의하는 게 좋아 보입니다.
| </div> | ||
| </main> | ||
|
|
||
| <footer className="footer"> |
There was a problem hiding this comment.
전체적으로 컴포넌트마다 리턴하는 JSX 구문이 너무 길고, footer 같은 경우는 중복이 여러 번 발생하고 있네요.
|
넵 감사합니다 참고하겠습니다 |
2 participants
[x] Github에 위클리 미션 PR을 만들어 주세요.
[x] React 및 Express를 사용해 진행합니다.
[x] TypeScript를 활용해 프로젝트의 필요한 곳에 타입을 명시해 주세요.
[x] any 타입의 사용은 최소화해 주세요.
[x] 복잡한 객체 구조나 배열 구조를 가진 변수에 인터페이스 또는 타입 별칭을 사용하세요
[x] Union, Intersection, Generics 등 고급 타입을 적극적으로 사용해 주세요.
[x] 타입 별칭 또는 유틸리티 타입을 사용해 타입 복잡성을 줄여주세요.
[x] 타입스크립트 컴파일러가 에러 없이 정상적으로 작동해야 합니다.
프론트엔드
[x] 기존 React(혹은 Next) 프로젝트를 타입스크립트 프로젝트로 마이그레이션 해주세요.
[x] TypeScript를 활용해 프로젝트의 필요한 곳에 타입을 명시해 주세요.
백엔드
[x] 기존 Express.js 프로젝트를 타입스크립트 프로젝트로 마이그레이션 해주세요.
[x] tsconfig.json 파일을 생성하고, 필요한 컴파일러 옵션을 설정해야 합니다.
[x] TypeScript 관련 명령어를 package.json에 설정해 주세요.
[x] ts-node와 nodemon을 사용하여 개발 환경을 구성합니다.
[x] nodemon과 함께 ts-node를 사용하여 . ts 파일이 변경될 때 서버를 자동으로 재시작하도록 설정합니다.