ChatGPT로 Next.js 코드리뷰하기

코드 리뷰를 계속 해야지 이랬는데, 시기를 놓쳐서 지금 하게 되었다.

강의를 들으면서 짠 코드인데 이를 어떻게 더 발전시킬까 하다가, 우연히 chatgpt 글을 보게 되어서 ai한테 코드리뷰를 시켰다. 아래는 해당되는 코드리뷰이다.

1. project-items의 코드 설명

아래의 코드를 조금 설명하자면, notion api를 사용해서 가져온 데이터이다. 이는 fetch를 사용해서 가져온 데이터이다.

프로젝트 이미지

→ 코드를 실행시키면 위의 이미지를 가져오면서 아래의 해당 프로젝트에 대한 내용이 보여진다.

2. 코드 리뷰

1) data.properties의 반복

1-1) 수정전 코드

	const icon = data.icon.emoji;
  const title = data.properties.Name.title[0].plain_text;
  const start = data.properties.Date.date.start;
  const end = data.properties.Date.date.end;
  const stack = data.properties.Stack.multi_select;
  const team = data.properties.Team.rich_text[0].plain_text;
  const description = data.properties.Description.rich_text[0].plain_text;
  const imgSrc = data.cover?.file?.url || data.cover?.external.url;

→ 위의 코드를 보게 되면 몇몇의 코드를 빼고 ***data.properties라는 코드를 계속적으로 사용***한다.

1-2) 수정후 코드

const { icon, properties, cover } = data;
const icons = icon.emoji;
const title = properties.Name.title[0].plain_text;
const start = properties.Date.date.start;
const end = properties.Date.date.end;
const stack = properties.Stack.multi_select;
const team = properties.Team.rich_text[0].plain_text;
const description = properties.Description.rich_text[0].plain_text;
const imgSrc = cover?.file?.url || cover?.external.url;

→ 위와 같이 수정하였다. 그런데 ai에서 icon에 대한 코드를 빠트려서 추가하였다. 이렇게 하니까 간결해졌다.

2) 함수를 단순화하기

1) 수정 전 코드

  const calculatedPeriod = (start, end) => {
    const startDateStringArray = start.split('-');
    const endDateStringArray = end.split('-');

    var startDate = new Date(startDateStringArray[0], startDateStringArray[1], startDateStringArray[2]);
    var endDate = new Date(endDateStringArray[0], endDateStringArray[1], endDateStringArray[2]);

    console.log(`startDate: ${startDate}`)
    console.log(`endDate: ${endDate}`)

    const diffInMs = Math.abs(endDate - startDate);
    const result = diffInMs / (1000 * 60 * 60 * 24);

    console.log(`기간 : ${result}`)
    return result;
};

→ 해당 함수에 보면 startDate와 endDate에 new Date를 써서 변수를 할당하였다. 그런데 각각 배열 요소를 하나씩 할당하다 보니 코드도 길어진다.

2) 수정 후 코드

const calculatedPeriod = (start, end) => {
  const [startYear, startMonth, startDay] = start.split('-');
  const [endYear, endMonth, endDay] = end.split('-');

  const startDate = new Date(startYear, startMonth, startDay);
  const endDate = new Date(endYear, endMonth, endDay);

  const diffInMs = Math.abs(endDate - startDate);
  const result = diffInMs / (1000 * 60 * 60 * 24);

  console.log(`기간 : ${result}`);
  return result;
};

→ 눈으로 봤을 때 확실히 코드가 짧아짐을 느낄 수 있다. 이는 ES6의 배열 디스트럭처링(Destructuring)을 이용한 것이다. Destructuring을 간단히 말하자면 배열의 각 요소를 배열로부터 추출하여 변수에 할당하는 것을 말한다.

 const [startYear, startMonth, startDay] = start.split('-');
  const [endYear, endMonth, endDay] = end.split('-');

변수이름을 짧게 하여 배열 요소를 할당했더니 new Date에 넣어줄 때 코드가 한결 짧아진다.

3) 템플릿 리터럴을 사용

3-1) 수정 전 코드

<h3 className="flex mb-2">
    {start} ~ {end} ({calculatedPeriod(start, end)}일)
</h3>

→ 내가 생각했을 때는 수정전 코드나 수정후 코드나 상관이 없을듯하다. 그러나 깔끔한게 좋다면 아래의 코드를 사용해도 무관할듯 하다.

2) 수정 후 코드

<h3 className="flex mb-2">
  {`${start} ~ ${end} (${calculatedPeriod(start, end)}일)`}
</h3>

→ 위의 코드는 템플릿 리터럴을 사용하여 변수를 연결하는 대신 문자열로 보간할 수 있다.