[엘리스 SW 트랙] 2차 프로젝트 : 코드 리뷰

 

...
const CommentItem: React.FC<CommentItemProps> = ({ item, onDelete }) => {
  const handleDelete = () => {
    onDelete(item._id);
  };
...

• 함수 컴포넌트를 React.FC 로 타이핑한게 눈에 들어옵니다. 이전에는, 암묵적인 children 및 숫자나 문자를 반환하면 에러가 발생하였는데 이제는 괜찮아 졌습니다. 그런데, 여전히 제네릭이라던가 defaultProps 는 개선이 안된 것 같습니다 . 그리고 오히려 저 코드가 더 읽기 어렵게 만들수도 있기에, 우리에게 친숙한 props 에만 타입을 명시해주는 형태로 작성하셔도 됩니다. :)
  • 참고링크 : )https://www.totaltypescript.com/you-can-stop-hating-react-fc

import axios from "axios";
import { CategoryType } from "./Category.type";

const instance = axios.create({
  baseURL: `${import.meta.env.VITE_BACKEND_URL}/api/categorys`,
});

• 각각에 api 파일을 확인해보면, axios instance 를 생성합니다. 이거를 하나에 axiosUtils.js 에서 api 엔드포인트로 생성한 인스턴스를 내보내기 해주고 실제 *.api.ts 파일에는 각 도메인별 api 코드만 있으면 되지 않을까 생각이 듭니다. 이런 경우에는, 각 인스턴스마다 인터셉터 코드도 중복이 될거 같습니다.

 return (
    <>
      <S.Container>
        <S.CategoryList>
          {categorys?.map((category, index) => {
            return <li key={index}>{category.category}</li>;
...

• 해당 아이템에 id 값을 사용하시는게 더 좋습니다. 없다면 index 를 그대로 사용하셔도 됩니다. :)

...
handleLogout: asyncHandler(async (req: express.Request, res: Response) => {
    res.clearCookie("service_token", { path: "/", maxAge: 0 });
    res.status(204).send();
  }),
  handleWithdraw: asyncHandler(async (req: express.Request, res: Response) => {
    const userToken = req.cookies.service_token;
    const userId = authService.extractDataFromToken(userToken, "user_id");
...

• jwt의 payload를 뽑아서 req 객체에 payload 데이터를 추가하는 미들웨어를 설정하면, 조금 더 효율적일 것 같습니다.

• 위 사진을 보시면, 현재 프로젝트 구조는 저렇게 되어있는게 확인이 가능합니다. /src 폴더는 다들 이해하고 있겠지만, 우리가 작성한 리액트 코드를 관리하는 폴더 입니다. 그 src 내에 /components 폴더에는 우리가 작성한 리액트 컴포넌트 코드들을 관리하는 폴더 입니다. 지금 코드를 보면, components 폴더로 구분을 하였으나 사실 컴포넌트 폴더내에 컴포넌트 코드뿐만이 아니라 hooks, api, 관련한 기능들이 모두 들어있습니다. 여러분들 입장에서는 각 도메인 또는 페이지 단위로 모아둬서 관리하고 싶으셨을텐데 이를 아래와 같이 개선해보면 어떨까요?

• 사실 각 컴포넌트마다 고유의 기능이 있기에, 이를 components 폴더로 구분하는거보다는 features 라고 구분하여 해당하는 기능단위 아래에 사용하는 컴포넌트 코드 및 type, api 코드들을 관리하면 좋지 않을까 생각해보았습니다. services 는 로직을 수행하는 코드를 담당하는 애들인데, 여기에 보통 API 호출 및 로직을 처리하는부분을 담당하여 모듈화 하여 사용 합니다.
• 프로젝트에 eslint 와 prettier 잘 적용해서 사용하시는걸로 알고 있습니다 . 눈에 띄는게, import 구문이 정렬이 되어있지 않은게 확인이 됩니다. 꼭 필수는 아니지만, 코드를 열어서 읽을때 뒤죽박죽한 import 구문을 보면 뭔가 해당 코드에 어떤 모듈 or 어떤 코드와 의존성이 있는지 파악하기 어려운 경우가 있습니다.
  • "eslint-plugin-import" 한번 검색해보셔서 적용하시면 좀 더 높은 코드 퀄리티를 제공할거 같습니다.

const [comment, setComment] = useState<string>("");

• 타입 작성을 대부분 잘 해주셨습니다만 제 개인적인 의견을 드리자만.. 간간히 이런 코드들이 눈에 뛰는데, 저런 경우는 어차피 초기값을 통해서 타입추론이 잘 이루어지기 때문에 굳이 타입을 꼭 명시를 해주시지 않아도 됩니다 :)

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript