본문 바로가기
개발자의 공부방/Frontend

javascript] 코드와 함께

by 쥬니준 2021. 12. 23.
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/

 

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

{{item.name}} B마트 프론트엔드 신규 입사자의 온보딩 프로세스를 끝마치며 안녕하세요! 10월 26일 우아한형제들 B마트서비스팀의 웹 프론트엔드 개발자로 합류하게 된 권기석입니다. 오늘은 B마트

techblog.woowahan.com

반응형

댓글0