NETFLIX CLONE CODING_JS

---

# 아래와 같은 html 코드 부분에 대한 JS 코드 위주의 리뷰

<div class="tab-container">
    <div class="tab-item" id="tab1">Tab 1</div>
    <div class="tab-item" id="tab2">Tab 2</div>
    <div class="tab-item" id="tab3">Tab 3</div>
    <!-- 각 탭에 대한 컨텐츠 -->
    <div class="tab-content-item" id="tab1-content">Tab 1 Content</div>
    <div class="tab-content-item" id="tab2-content">Tab 2 Content</div>
    <div class="tab-content-item" id="tab3-content">Tab 3 Content</div>
</div>

---

JavaScripts

# '.tab-item', '.tab-content-item' 클래스를 가진 컨텐츠들을 갖고 있음
각 탭은 특정한 ID를 갖고 있어야 하며 이 ID는 탭의 내용을 식별하는 데 사용

<script>
  const tabItems = document.querySelectorAll('.tab-item');
const tabContentItems = document.querySelectorAll('.tab-content-item');

// Select tab content item
// 탭을 클릭했을 때 호출되는 함수 : 선택한 탭에 대한 컨텐츠를 보여주는 역할
function selectItem(e) {
	// Remove all show and border classes
    // removeBorder() : 모든 탭 아이템에서 'tab-border' 클래스 제거, 현재 선택된 탭에만 보더가 그려지도록 수행
	removeBorder();
    // removeShow(): 모든 컨텐츠 아이템에서 '.show' 클래스 제거, 새로운 탭을 선택할 때 이전에 선택한 탭의 내용이 숨겨지도록 수행
	removeShow();
	// Add border to current tab item
    // 현재 선택된 탭에 '.tab-border' 클래스 추가, 선택된 탭에 하단 보더 그려지도록 수행
	this.classList.add('tab-border');
	// Grab content item from DOM
    // 현재 선택된 탭에 대한 컨텐츠 아이템을 DOM에서 선택
    // this.id : 현재 선택된 탭의 ID 나타냄
	const tabContentItem = document.querySelector(`#${this.id}-content`);
	// Add show class
    // 선택된 탭에 해당하는 컨텐츠 아이템에 'show'클래스 추가, CSS를 통해 해당 컨텐츠를 화면에 표시
	tabContentItem.classList.add('show');
}

// Remove bottom borders from all tab items
// removeBorder() : 모든 탭 아이템에서 하단 보더 제거
function removeBorder() {
	tabItems.forEach(item => {
		item.classList.remove('tab-border');
	});
}

// Remove show class from all content items
// 모든 컨텐츠 아이템에서 show 클래스 제거
// tabContentItems.forEach() : tabContentItems 배열의 각 요소에 대해 반복
// 각 요소에 대해 콜백 함수 실행, 해당 요소의 클래스 목록에서 show 클래스 제거
function removeShow() {
	tabContentItems.forEach(item => {
		item.classList.remove('show');
	});
}

// Listen for tab item click
// tabItems.forEach() : tabItems 배열의 각 요소에 대해 반복
// selectItem() : 각 요소에 대해 클릭 이벤트 리스너 추가, 클릭 이벤트가 발생하면 호출
// 선택한 탭에 대한 컨텐츠 표시, 해당 탭에 하단 보더 추가
tabItems.forEach(item => {
	item.addEventListener('click', selectItem);
});
</script>