기존 이미지 경로 관리 방식을 개선하는 방법
프론트엔드 개발을 하다 보면 이미지 경로를 변수에 할당하는 경우가 자주 발생한다. 현재 사내 Angular 프로젝트에서 이런 이미지를 관리하는 방식은 다음과 같다:
이 방법도 나쁘지 않지만, 코드가 길어지고 가독성이 떨어질 수 있다. 특히, 여러 이미지를 관리해야 할 때 경로 문자열이 여러 곳에 반복되는 문제가 발생한다.
개선된 방법: enum 사용하기
이 문제를 해결하기 위해 enum을 사용할 수 있다. enum을 사용하면 이미지 경로를 보다 명시적이고 간결하게 관리할 수 있다. 다음은 enum을 사용한 예시이다:
트리 셰이킹을 위한 const enum 사용
하지만, enum에는 트리 셰이킹(tree shaking)이 되지 않는 단점이 있다. 이를 개선하기 위해 const enum을 사용할 수 있다. const enum을 사용하면 컴파일러가 해당 값을 인라인(inline) 처리하여 트리 셰이킹이 가능해진다.
다음은 const enum을 사용한 예시이다:
이제 코드의 다른 부분에서 다음과 같이 사용할 수 있다:
이처럼 const enum을 사용하면, 코드가 더 효율적이고 명확해진다. 이미지 경로를 보다 쉽게 관리할 수 있고, 코드의 가독성도 향상된다.
결론
기존의 이미지 경로 문자열을 직접 할당하는 방식에서 벗어나, enum을 사용하여 보다 명시적이고 관리하기 쉬운 코드로 개선할 수 있다. 여기에 트리 셰이킹까지 고려한다면, const enum을 사용하는 것이 최선의 방법이다. 이를 통해 코드의 가독성을 높이고, 유지보수성을 향상시킬 수 있다.
프론트엔드 개발에서는 작은 개선이 큰 차이를 만들 수 있다. enum과 const enum을 활용하여 더욱 효율적이고 명확한 코드를 작성해보자.
