목차

고민해보기
코드 재활용

고민해보기

• 개발자마다 좋은 코드의 기준은 다를 수 있지만, 현재 제 생각으로 좋은 코드란 변경하기 쉬운 코드라고 생각합니다. 물론 이 기준이 언제 어떻게 바뀔지는 모르겠지만, 변경하기 쉬운 코드가 나의 야근을 줄여주고, 나의 스트레스를 줄여주고, 나의 귀찮음을 줄여주기 때문입니다.

• 그래서 오늘은 변경하기 쉬운 코드를 잘 작성하기 위해 한 단계 성장하기 위해 고민해 본 부분을 적어보려고 합니다.

• 지금부터 작성하는 코드는 정말 좋은 코드가 맞는지, 굳이 이렇게? 혹은 잘못된 방향으로 작성됐을 수 있습니다. 혹시 이 글을 보신다면 피드백 적극 찬성입니다.

---

코드 재활용

• 똑같지는 않지만 같은 기능을 하고, 비슷한 UI를 나타내는 부분을 어떻게 재활용할 수 있을까? 고민해 보고 적용해 보려고 합니다.

• 아래의 사진과 같이 비슷하지만, 똑같지는 않은 3개의 팝업이 존재합니다.

공통점

1. 팝업창 열기
2. x버튼 클릭시 팝업창 닫기

차이점

1. 빨간색 팝업 : title이 없음, contents 내용이 다름
2. 초록색 팝업 : title 밑에 실선이 존재, contents 내용이 다름
3. 파란색 팝업 : title 밑에 점선이 존재, contents 내용이 다름

코드 작성

• 공통으로 적용할 컴포넌트에서는 아래와 같이 구성합니다.
  1. title : 선택적으로 props로 받아서 처리
  2. contents : 필수적으로 props로 받아서 처리
  3. x버튼 : ui 및 기능 고정

저는 vue2를 통해 코드를 작성했습니다.
만약 react로 작성한다면 slot 부분은 children을 사용, emit 부분은 props로 setter를 받거나, 전역 상태로 팝업창 상태로 관리하면 될 것 같습니다.

공통 컴포넌트

적용 코드

• title 부분은 css(className)과 title명을 다르게 전달했습니다.
• contents 부분은 너무 길어서 접어놨지만, 내용이 다릅니다.

결과적으로

• 만약 자료실, 자료검색, 자료탐색, 자료..1, 자료...2, 자료..30 총 30개의 팝업을 만들었고, 닫기버튼의 css를 수정해주세요! 라는 요구사항이 추가된다면 30개의 팝업을 다 수정해야하는 문제가 발생할 수 있습니다.

• 물론 엄청 대단한 코드를 작성하진 않았지만 위 코드는 최소한 공통적으로 사용되는 버튼에 관련된 부분을 수정하거나, title 및 contents 분에 공통적으로 수정해야 할 부분이 발생한다면 팝업이 30개든, 300개든, 30000개든 한 번만 수정하면 되기 때문에 많은 시간을 줄여줄 수 있을 것 같습니다.