상수 분리 중요성

이번 솝트 34기 웹파트에서 2주차 자바스크립트 과제(쇼핑몰 및 장바구니)에 대해

약 15명 정도 코드리뷰를 돌며 공통적으로 느낀 부분이라,

같이 한 번 살펴보면 좋을 것 같아 작성하였습니다.

 

 

 

'상수화' 

-> 변수를 변하지 않게 만든다.

왜?

-> 유지보수를 쉽게 하기 위해서.

 

예를 들어보자.

 

많은 사람들이, 홈페이지와 장바구니 페이지를 이동하는 함수를 아래와 같이 구현하였다.

navigateHome() {
    location.href = "index.html";
  }

 

과제에 요구된 기능을 구현하는데에 초점을 맞춘다면, 

이렇게 구현해도, 나쁠 것은 없다.

 

다만, 우리가 목표로 두고 있는 점은 웹잼이고,

이 웹잼도 단순히 2주만 진행하고 끝나는 팀 보다는 꾸준하게 가지고 갈 서비스를 목표로 두고 있는데,

솝트 과제를 대하는 자세가 기능구현이 아니라, 진짜 웹잼에서 어떻게 사용할 수 있을까를 고민하며 구현한다면 더 좋지 않을까?

(바쁘면 어쩔수 없지만...)

 

다시 돌아와서, 이 과제에서 index.html로 이동시키는 부분은 단 한 곳 뿐이다.

 

그러나, 만약 더 큰 프로덕트라면?

 

사용될 모든 곳에 "index.html" <- 이 문자열을 계속 입력하는 방식을 취하는게 맞을 것인가?

 

그러다가 오타라도 난다면?

 

혹은

 

기획과 디자인 팀원들의 요구사항이 바뀌어서 "index.html"이 아니라 다른 곳으로 이동시켜야한다면?

 

사용한 모든 곳에 다니면서 수정하는 방향을 택할 것인가?

 

미리 상수화 해두고 딱 한 곳에서만 수정하는 방향이 더 효율적이지 않겠는가?

 

 

constant 파일을 하나 만들고,

export const HOME = "index.html";

 

그 다음 사용하는 쪽에서

 

navigateHome() {
    location.href = HOME;
  }

 

 

이렇게 사용한다면 추가적인 요구사항에 대응하기에 더 편하지 않겠는가?

 

메세지 또한 마찬가지.

 

export const MESSAGES = Object.freeze({
  CONFIRM_ADD_CART: "상품을 장바구니에 담으시겠습니까?",
  COMPLETE_ADD_CART: "상품이 장바구니에 담겼습니다. 장바구니로 이동합니다.",
  CANCEL_ADD_CART: "취소 되었습니다.",
  COMPLETE_PURCHASE: "구매가 완료되었습니다.",
});

 

 

Object.freeze를 사용하지 않더라도, 이렇게 한 곳에 묶어 관리한다면 더 효율적일 수 있다.