팀프로젝트 파일 관리

주제로는 팀프로젝트를 진행하며 받은 코드리뷰 중, 들은 꿀팁을 간단하게 작성하려한다.

Config.js

const BASE_URL = 'http://10.58.0.250:3000';

export const API = {
  MAIN: `${BASE_URL}`,
  SIGNUP: `${BASE_URL}/users/signup`,
  LOGIN: `${BASE_URL}/users/login`,
  NEW: `${BASE_URL}/products/new/list`,
  RECOMMEND: `${BASE_URL}/products/recommend/list`,
  RECOMMEND_RANDOM: `${BASE_URL}/products/random/list`,
  CART: `${BASE_URL}/cart`,
  PAYMENT: `${BASE_URL}/orders/payment`,
  POINTS: `${BASE_URL}/orders/point`,
};

프로젝트 과정에서 백엔드와 통신하고 데이터를 주고받는 모든 구문은 fetch 함수를 사용하게된다.

그때 필요한 통신주소의 EndPoint 를 전부 저장해놓은 파일이다.

//fetch(`http://10.58.0.250:3000/cart/${orderItemsId}`, {
fetch(`${API.CART}/${orderItemsId}`, {
  method: 'PATCH',
  headers: {
    'Content-Type': 'Application/json',
    Authorization: userToken
    },
  body: JSON.stringify({
    quantity: stock + 1,
  }),
});

매번 fetch 함수를 사용할 때 마다 주석문과같이 주소를 일일히 사용하는것 보다
작업 전반적으로 수월해진다.

---

Utils.js

export const appendComma = number => {
  return number.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');
};

export const goToUrl = (navigate, url) => {
  navigate(url);
  window.scrollTo(0, 0);
};

프로젝트 전반적으로 자주 사용하는 커스텀 함수를 저장해놓은 파일이다.

<span className="summaryPrice">
  ₩ {appendComma(summaryPrice)}
</span>

--------------------------------

<button 
  className="linkButton"
  onClick={() => goToUrl(navigate, '/categories/1/type/1')}>
    <span>더 많은 제품 보기</span>
    <i className="fa-solid fa-angle-right fa-lg" />
</button>

상단에 사용된 appendComma 함수는
백엔드 서버에서 받아온 가격정보를 처음 표기에 바로 사용하면
3000.00 과같은 형태를 띄고있었다.

정규식을 이용해서 3자리수마다 쉼표를 붙혀주고
Number() 메소드를 이용해서 소수점 표기를 없애주는 코드이다.

해당 함수는 가격에 관련된 정보가 표기되는 모든 부분에 사용되었다.

---

하단에 사용된 goToUrl() 함수는
SPA형식의 리액트환경에서 진행된 프로젝트였기 때문에

다른 페이지로 넘어가는 (라우팅주소가 바뀌는) useNavigatge 의 경우에는
이전페이지의 스크롤이 유지되는 현상이 있었다.

그래서 커스텀함수인 goToUrl()에 스크롤을 초기화해주는 구문을 추가하여 사용하였다.

마치며..

아마 이것 말고도 비슷한 유형의 공용파일이 많이 있을것 같다.
굳이 따지자면 styles폴더의 variable.scss 와 같은 역할을 한다고 생각한다.

위의 파일을 사용하기 시작하면서 프로젝트 진행에 있어서 편의성이 상당히 좋아졌다.

fetch 함수 자체도 커스텀하는 분이 계셨었는데,
나도 재사용 가능한 부분을 잘 파악하고 미리미리 공용함수,변수화하여
프로젝트 초기부터 깨끗한 코드로 작성되었다면
좀 더 수월한 프로젝트 기간이 되지 않았을까 라는 생각이 든다.