리팩토링: 개명기(記).

dev_sang·2022년 9월 5일

원티드 프리온보딩과 컬리 해커톤이 끝나고, 지난 프리온보딩 팀프로젝트들의 깨작깨작 리팩토링을 진행 중이다. 네이밍에 대한 여러 글도 찾아 보고 프로젝트들을 통해 습득한 내용들을 바탕으로 지난 프로젝트를 바라보니 새롭게 보이는 부분들이 많았다. 그 중 경악(?) 할만 한 변수, 함수명들을 여럿 발견하게 되는데...

일단 포스팅에 들어가기에 앞서 배경 설명을 하자면

아래의 코드들은 한 프로젝트 당 3~5일의 짧은 기간 동안 진행했던 프로젝트들이기 때문에 네이밍에 대한 충분히 고민할 시간이 부족했다.
프리온보딩 과정 동안 클린 코드에 대해 배우고 네이밍에 대한 관심이 더 생겨서 아래의 네이밍 자료들을 더 찾아 읽어보았다.

References

Naming Conventions in React JS

Maintain a clean code based in React — Part 2

JavaScript Naming Conventions

누가 이름을 함부로 짓는가?

1. 스케줄관리 팀 프로젝트

원티드 프리온보딩 : engall 기업과제

먼저 정리를 진행한 부분

수정 전 생각

로직에 React Hook이 사용되지 않았음에도 'use'라는 이름으로 시작한다.
코드 내에 HTML 문법이 사용되지 않음에도 '.tsx' 확장자를 사용하고 있다.
submitTime 함수는 수업 시작 시간과 끝나는 시간을 설정하는 로직을 갖고있다.
함수 내부의 startAddTime, endAddTime은 각각 수업 시작 시간, 끝나는 시간을 date-fns의 매서드를 사용하여 설정하고 있다.

import { add, format } from "date-fns";

export const submitTime = (time: Date, meridiem: string) => {
  const startAddTime = add(time, {
    hours: meridiem === "pm" ? 12 : 0,
  });

  const endAddTime = add(time, {
    hours: meridiem === "pm" ? 12 : 0,
    minutes: 40,
  });

  const startTime = format(startAddTime, "HH:mm");
  const endTime = format(endAddTime, "HH:mm");

  return { startTime, endTime };
};

수정 후 개선 사항

디렉토리 이동 : hooks → utils
파일명 변경 : useDate.tsx → setTime.ts
함수, 변수명 변경
- submitTime → setTime
- startAddTime, startEndTime → setStartTime, setendTime

import { add, format } from 'date-fns';

export const setTime = (time: Date, meridiem: string) => {
  const setStartTime = add(time, {
    hours: meridiem === 'pm' ? 12 : 0,
  });

  const setEndTime = add(time, {
    hours: meridiem === 'pm' ? 12 : 0,
    minutes: 40,
  });

  const startTime = format(setStartTime, 'HH:mm');
  const endTime = format(setEndTime, 'HH:mm');

  return { startTime, endTime };
};

2. 지원자 지원폼 및 어드민 대시보드 팀프로젝트

2-1.

수정 전 생각

pplicant라는 interface를 배열로 지정한 type ApplicantList
List라는 것을 이름에 명시하기보다 복수형으로 나타내는 것이 직관적이다.

interface Applicant {
  id: string;
	...
  phone: string | number;
  email: string;
  isChecked: boolean;
}

type ApplicantList = Applicant[];

수정 후

type Applicants = Applicant[];

2.2

수정 전 생각

React Hook이 사용되지 않았음에도 함수명이 use로 시작한다.
지역 데이터를 받아오는 비동기 함수 getCitys 가 useCityModel 로 한번 더 감싸져 있는 것이 불필요해 보인다.
~~스펠링...... citys ❌ → cities ✅~~

import { dateFormatSetting } from "../utils/utils";
import { useState } from "react";
import { apiRequest } from "../instance/instance";

export const useCitysModel = () => {
  const getCitys = async () => {
    const response: void | any = await apiRequest.get("/city");
    return response;
  };

  return {
    getCitys,
  };
};

수정 후

불필요한 import들 삭제
외부 함수를 제거하고 필요한 함수만 남김
함수명 변경 getCitys → getRegions
- 도시명만 가져오는 것이 아니라 전국 도, 시, 구를 모두 가져온다.

import { apiRequest } from '../instance/instance';

export const getRegions = async () => {
  const response: void | any = await apiRequest.get('/regions');
  return response;
};

2-3

수정 전 생각

위와 같은 문제다 함수명이 use로 시작..
입력받은 지원자 데이터를 생성하는 비동기 함수 postUsers 가 useUsersModel 로 한번 더 감싸져 있는 것이 불필요해 보인다.

import { useState } from "react";
import { apiRequest } from "../instance/instance";

export const useUsersModel = () => {
  const postUsers = async (data: any) => {
    const response: void | any = await apiRequest.post("/users", data);
    return response;
  };

  return {
    postUsers,
  };
};

수정 후

외부 함수를 제거하고 필요한 함수만 남김
함수명을 postUsers → createApplicant 로 변경
- 해당 함수의 목적은 지원자 데이터 생성이다.

import { apiRequest } from '../instance/instance';

export const createApplicant = async (data: any) => {
  const response: void | any = await apiRequest.post('/users', data);
  return response;
};