TIL

191016_TIL(포트폴리오 코드리팩토링)

TIL

포트폴리오 코드 리팩토링

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 기존 코드

// 메가박스
const $megaboxWrapper = document.querySelector('.megabox-wrapper');
const $megaboxDetail = document.querySelector('.megabox-detail');
const $megaboxClose = document.querySelector('.megabox-close');

// 트렐로
const $trelloWrapper = document.querySelector('.trello-wrapper');
const $trelloDetail = document.querySelector('.trello-detail');
const $trelloClose = document.querySelector('.trello-close');

const openModal = (div) => {
	...
};

const closeModal = (div) => {
	...
};

// 메가박스 모달 열기
$megaboxDetail.onclick = (e) => {
	e.preventDefault();
	openModal($megaboxWrapper);
};

// 메가박스 모달 닫기
$megaboxClose.onclick = (e) => {
	e.preventDefault();
	removeModal($megaboxWrapper);
};

// 트렐로 모달 열기
$trelloDetail.onclick = (e) => {
	e.preventDefault();
	openModal($trelloWrapper);
};

// 트렐로 모달 닫기
$trelloClose.onclick = (e) => {
	e.preventDefault();
	removeModal($trelloWrapper);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 개선한 코드

const el = (selector) => document.querySelector(selector);
const elList = (selector) => document.querySelectorAll(selector);

const $projectDetailbuttons = elList('.project-detail-btn');
const $closeModalbuttons = elList('.modal-close-btn');
const $projectWrappers = elList('.project-wrapper');

const openModal = (div) => {
	...
};

const closeModal = (div) => {
	...
};

// 모달 열기
$projectDetailbuttons.forEach((button, index) => {
    button.onclick = (e) => {
        e.preventDefault();
        openModal($projectWrappers[index]);
    };
});

// 모달 닫기
$closeModalbuttons.forEach((button, index) => {
    button.onclick = (e) => {
        e.preventDefault();
        removeModal($projectWrappers[index]);
    };
});
  1. 함수를 이용하여 중복되는 코드인 document.querySelector() 제거
  1. document.querySelector() 매서드를 이용하여 요소를 변수에 하나하나 할당해준던 것을 document.querySelectorAll() 매서드를 이용하여 NodeList 배열 형식으로 하나의 변수에 요소들을 할당
  1. 각각의 요소에 동일한 클릭 이벤트를 달아 주던 것을 forEach 매서드를 이용하여 코드의 중복을 제거하고 유지 보수성을 개선
Share