javascript] 코드와 함께

우아한형제들의 기술블로그에서 나온 내용을 조금이나마 참고해서 작성한다.

 

1. 확장하기 좋은 코드

before

const colors = {
    gray1: '#22222',
    gray2: '#44444',
    gray3: '#55555',
    gray4: '#66666',
    gray5: '#77777',
    gray6: '#88888',
    gray7: '#99999',
}

프론트엔드에서 이런 형태의 컬러값을 지정 혹은 지속적으로 넣어야하는 값을 설정할 때

보통은 순차적으로 지정해서 사용한다.

 

이때 gray1과 gray2 사이에 '#33333' 이라는 색상이 들어와야한다면? 어떻게 할 것인가?

 

after

const colors = {
    gray_100: '#22222',
    gray_200: '#44444',
    gray_300: '#88888',
    gray_400: '#e6e6e',
    gray_500: '#f7f7f',
}

after의 코드를 보면 추후에 gray100, 200 등의 값이 추가가 된다면, gray_150 등으로 지정해서 사용할 수 있고,

그 외에도 99가지 사이의 값을 지정할 수 있다.

 

 

 

출처 : https://techblog.woowahan.com/6851/

내가 경험한 B마트 프론트엔드의 온보딩 프로세스 | 우아한형제들 기술블로그