RARRIT

기억을 너무 믿지 말자

:ledger: 프로젝트에서 상수 관리에 대해 알아보자!

상수란 변하지 않는 값을 말한다. 리액트, 넥스트 프로젝트를 진행하며 상수 처리를 잘 못하는 편이었다. 최종 프로젝트 또한 비슷했고 코드 리뷰 중 상수를 처리에 대해 이야기가 나왔는데, 왜 해야하는지는 알고는 있는데 항상 직접 처리하지는 못했었다. 상수 관리에 대해 알아보며 이후에 더 잘 활용할 수 있도록 해보자.

:one: 프로젝트에서 상수는 어떤게 있고, 장점이 뭘까?

먼저 상수는 변하지 않는 값으로 변수를 배울 때 const를 배우며 친숙해졌다. 그렇다면 프로젝트에서 상수는 언제 사용하는게 좋을까? 아래의 예시를 보도록 하자.

  • API 엔드포인트
  • 라우트(URL) 경로
  • 특정 TAG
  • count (숫자 값)

이보다 더 많을 수 있다고 생각하지만, 현재 생각나는 것은 위와 같다. 이들의 공통점은 반복적으로 사용되는 값이라는 것인데 이러한 값들을 상수로 처리하고 한 곳에서 관리한다면 장점은 아래와 같다.

  • 중복 코드 감소: 상수를 한 곳에서 정의하고 재사용함으로써 코드의 일관성을 유지함
  • 수정하기 편함: 상수의 값이 변경되어야 할 때 한 곳에서 수정하면 전체 프로젝트에 반영됨
  • 가독성이 좋음: 상수 네이밍을 의미있게 작성하여 코드의 목적을 명확히 한다.

:two: 중앙 집중식 관리

위와 같이 상수를 관리하면 장점이 정말 많다. 그렇다면 어떻게 관리하는 것이 좋을까? 이 부분에 대해선 강의를 통해 분명 봤었던 것이다. 다만, 항상 까먹었을 뿐 src 디렉토리 내에 constants 디렉토리를 만들어서 상수로 처리될 파일들을 관리한다. 예시는 아래와 같다.

src/
├── constants/
│   ├── api.ts          # API URL 관련 상수
│   ├── routes.ts       # 페이지 라우팅 경로
│   └── common.ts       # 모든 상수를 통합해서 export

여러 디렉토리 내에서 분리되어 있는것 보단 최상단 디렉토리에서 위와 같이 각 역할에 맞는 파일들을 생성하여 한 곳에서 관리한다.

:three: 상수 네이밍

상수 네이밍은 코드의 가독성과 유지보수성에 중요한 영향을 미친다. 명확하고 일관된 네이밍 규칙을 사용하면 코드의 의미를 쉽게 이해할 수 있고, 협업 시 혼란을 줄일 수 있어서 중요한 부분이다.

:pushpin: 3-1) 스네이크 케이스 사용

상수는 변하지 않는 값이여서 일반적으로 대문자 + SNAKE_CASE 를 사용한다.

const API_BASE_URL = "https://sdklfjsdklj.com";

:pushpin: 3-2) 의미를 명확하게 전달해야함

상수 이름은 값의 목적이나 의미를 명확하게 나타내야 한다.

const URL = "asdfasfdaf"; // 무슨 url임?
const CAMPING_API_BASE_URL = "asdfsadffsa"; // API 기본 URL임을 알 수 있음

:pushpin: 3-3) 접두어 사용

공통된 맥락을 가진 상수는 접두어(prefix)를 사용하여 그룹화함

const USER_ROLE_ADMIN = "admin";
const USER_ROLE_EDITOR = "editor";
const USER_ROLE_VIEWR = "viewer";

:fire: 마무리

상수 관리는 프로젝트의 품질과 유지보수성을 높이는 핵심 요소다. 디렉토리 구조를 잘 정의하고 상수를 적절히 분리하여 협업과 확정성에서 큰 이점을 얻을 수 있으며, 코드의 중복을 줄이고 변경 사항을 한 곳에서 관리하여 수정에 정말 용이하다. 이후에 코드 컨벤션을 통해 미리 정의하고 준수하는 습관을 들이는게 좋을 것 같다.

참고