멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 37 (UI 컴포넌트(구성 요소), 디버깅)

 

목차

• UI 컴포넌트(구성 요소)
• 오프 캔버스(Off Canvas)
• 모달 다이얼로그(Modal Dialog)
• 디버깅(Debugging)
• 오늘 하루를 돌아보며

 

UI 컴포넌트(구성 요소)

JavaScript 초보 개발자에게 가장 중요한 단계는 아이디어를 실제 작동하는 프로토타입으로 구현하는 것이다. 빌트인 컴포넌트(Native Component)가 없을 때는 직접 컴포넌트를 만들어야 한다.

수업 시간에는 오프 캔버스(Off Canvas) 메뉴와 모달 다이얼로그(Modal Dialog)를 만들어 봤다.

 

오프 캔버스(Off Canvas)

오프 캔버스 메뉴는 화면(캔버스) 밖에 숨어 있다가 버튼을 누르면 화면 안으로 밀려 들어오는 메뉴다. 브라우저 창 바깥에 위치해 있다가 버튼을 누르면 화면을 오른쪽으로 밀고, 다시 버튼을 누르면 왼쪽으로 민다.

<div class="offsite-container">
  <nav class="nav">
    <!-- 메뉴 내용 -->
  </nav>
</div>

<div class="site-container">
  <button type="button">
    <span>메뉴 열기</span>
  </button>
  <!-- 사이트 내용 -->
</div>

위와 같은 구조에서 메뉴를 열면 .offsite-container와 .site-container 요소가 모두 오른쪽 방향으로 이동해야 한다. CSS에 .off-site-open 클래스에 translate 속성을 사용하여 이동할 수 있다.

.offsite-is-open {
  .offsite-container, .site-container {
    translate: 14rem 0;
  }
}

자, 그럼 이제 JS로 메뉴를 열고 닫을 수 있도록 button 요소에 이벤트 리스너를 연결하고, 콜백 안에 클래스를 추가하고 뺄 수 있는 기능을 구현해 보자.

const body = document.body
// 버튼 찾기
const button = document.querySelector('.site-container button')
// 이벤트 리스너 추가
button.addEventListener('click', () => {
  // 메뉴 열기 기능
  if (body.classList.contains('offsite-is-open')) {
    body.classList.remove('offsite-is-open')		
  }
  // 메뉴 닫기 기능
  else {
    body.classList.add('offsite-is-open')	
  }
})

 

또는 아래와 같이 토글 기능을 넣을 수도 있다.

button.addEventListener('click', () => {
  body.classList.toggle('offsite-is-open')
})

 

모달 다이얼로그(Modal Dialog)

모달 다이얼로그는 메인 콘텐츠 위에 띄워져 사용자와 상호작용하는 컴포넌트(구성요소)다. 모달이 없는 팝업(Non-modal Popups)을 모달이라고 잘못 얘기하는 경우가 있다. 모달 팝업과 모달이 없는 팝업의 차이를 알고 단어 사용에 유의하자.

• 모달 팝업(Modal Popup): 화면 전체를 덮으며, 팝업을 닫기 전까지 다른 작업을 할 수 없다. 주로 중요한 결정이나 입력이 필요할 때 사용한다.
• 모달이 없는 팝업(Non-modal Popup): 화면 일부에 나타나며, 팝업이 떠 있어도 다른 작업을 할 수 있다. 툴팁이나 드롭다운 메뉴 등에 사용한다.
• 토스트(Toast): 화면 한쪽에 잠깐 나타났다가 사라지는 간단한 알림을 토스트라고 한다.

 

이번에는 모달 팝업을 만들어 보자. 구조는 아래와 같다.

<div class="container"><!-- 일반 콘텐츠 --></div>
<div class="modal-overlay"><!-- 모달 콘텐츠 --></div>

.modal-overlay는 화면 전체를 덮어야 하고 처음부터 화면에 보이지 않도록 설정해야 한다. .modal-is-open 클래스가 추가되면 화면에 표시되도록 다음과 같이 CSS 스타일을 적용한다.

.modal-overlay {
  /* 화면 전체 덮기 */
  position: fixed;
  inset: 0; /* top right bottom left */
  
  /* 화면에 보이지 않도록 설정 */
  opacity: 0;
  z-index: -1;
  position: fixed;
  inset: 0;
  
  /* 클래스가 추가되면 보이도록 */
  &.modal-is-open {
    opacity: 1;
    z-index: 10;
  }
}

 

여는 버튼과 닫는 버튼이 각자의 기능을 하도록 JS 코드를 다음과 같이 작성한다.

// 모달 다이얼로그를 여는 버튼 선택
const modalOpenButton = document.querySelector('.modal-open-button')
// 모달 다이얼로그를 닫는 버튼 선택
const closeButton = modalOverlay.querySelector('.modal-close-button')
// 모달 오버레이 선택
const modalOverlay = document.querySelector('.modal-overlay')

// 이벤트 리스너 추가
openButton.addEventListener('click', () => {
  // 여는 버튼을 클릭하면 .modal-is-open 클래스 추가
  modalOverlay.classList.add('modal-is-open')
})
closeButton.addEventListener('click', () => {
  // 닫는 버튼을 클릭하면 .modal-is-open 클래스 제거
  modalOverlay.classList.remove('modal-is-open')
})

 

디버깅(Debugging)

코딩을 하다보면 초보자든 전문가든 누구나 실수한다. 실수하지 않는 사람은 없다.

오류는 프로그래밍 과정에서 흔하게 일어나는 일이다. 오류는 실수나 실패가 아니라 무언가 놓쳤다는 신호이자 더 나은 코드를 만들 수 있는 기회다. 오류가 났을 때 문제의 근본 원인을 파악하며 해결책을 찾아나가는 과정을 디버깅이라고 한다.

 

디버깅은 단순히 오류를 없애는 과정이 아니라, 문제 해결 능력을 기르고, 시스템을 깊이 이해하며, 논리적 사로를 훈련하는 소중한 기회다. 처음부터 완벽한 코드는 없다. 실수를 인정하고 침착하게 문제를 분석하며 필요한 수정을 해나가는 태도와 기술이 훌륭한 개발자가 되기 위해 꼭 필요한 능력이다.

 

오늘 하루를 돌아보며

강사님이 디버깅에 대해 설명해 주시면서 말씀해 주신 내용이 마음에 깊게 와닿았다. 오류를 두려워하지 마라! 오류는 성장하고 있다는 증거다! 오류 앞에서 당황하기보다 어디서 잘못됐을지 스스로 질문하는 습관을 들여야 한다!

 

개발은 끊임없이 시도하고, 실패하고, 그 실패를 고쳐나가며 더 나은 방향으로 나아가는 반복의 과정이다. 가장 중여한 것은 반복이다! 반복할수록 실수도 줄어들 것이고, 더 깊이 이해할 것이며, 성장할 것이다!

 

앞으로도 코드에 빨간 줄이 생겼다고 당황하지 않고, 에러가 떴다고 쩔쩔매지 말고, 차분하게 원인을 파악하고 천천히 해결책을 찾아나가야겠다. 어디서 잘못됐을지 질문하는 습관을 들이자!