javascript] 코드와 함께

javascript] 코드와 함께

728x90

반응형

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

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/

반응형

from http://jjunii486.tistory.com/283 by ccl(A) rewrite - 2021-12-23 09:27:32