내일배움캠프 4일차, 미니 프로젝트 진행
第4天
오늘은 모달창만 집중적으로 팠다. 그리고 git을 사용하기 시작했는데 어려웠다.
뭔가 어떻게 돌아가는 건지 ..? 그래도 자꾸 쓰다보면 나아지겠지.
그래도 팀원분들이 다들 조금씩은 잘 알고계셔서 그나마 수월하게 merge하고 충돌해결하고 동기화하고 한 거 같다.
앞으로 공부할 거 많지만 git 과 git hub 공부도 빠지면 안될듯.
왜냐하면 협업은 나의 실수도 우리의 실수고, 우리의 실수도 나의 실수이다.
그렇기 때문에 git hub 사용이 필수적 ,,,
1. 모달창
// 모달 클래스(모달 내용) 가져오기
let modals = document.getElementsByClassName("modal");
// 버튼 클래스(모달 띄우게 하는 카드) 가져오기
let btns = document.getElementsByClassName("btn");
let funcs = [];
// Modal을 띄우고 닫는 클릭 이벤트를 정의한 함수
function Modal(num) {
return function() {
// 해당 btns 클래스의 내용을 클릭하면 Modal을 띄움
btns[num].onclick = function() {
modals[num].style.display = "block";
};
};
}
// 원하는 모달 수만큼 모달 함수를 호출해서 funcs 함수(배열)에 정의
for (let i = 0; i < btns.length; i++) {
funcs[i] = Modal(i);
}
// funcs 배열에서 해당 인덱스 j의 함수 호출
for (let j = 0; j < btns.length; j++) {
funcs[j]();
}
// window 객체를 클릭하면 모달 닫기
window.onclick = function (event) {
if (event.target.className == "modal") {
event.target.style.display = "none";
}
};새로 프로젝트에 적은 다중 모달창의 js 부분 코드이다.
가져온 코드이기 때문에 한줄한줄 엄청 고민하며 코드에 대한 해석을 집중적으로한 거 같다. 근데 js 문법 공부를 하기 전이라 좀 헷갈리는 부분들이 많다.
아무튼 내가 이해한 느낌은 아래 이런 느낌이다.
전반적으로 이 코드는 btn 클래스를 가진 버튼을 클릭하면
이에 해당하는 modal 클래스가 열리고
반대창으로 모달창 외부를 클릭하면 화면이 닫히게끔 구현되어 있다.
먼저 클래스 네임이 “모달”이면 그 클래스들의 요소들을 가져오는 getElementsByClassName 메서드를 사용하여 요소들은 modals라는 변수에 할당되고 클래스 네임이 “btn”인 모든 요소들도 위와 마찬가지로 btns라는 변수에 할당되어 있. (이 변수들은 차례대로 저장되어있고 함수로 실행 가능)
또한 펑스라는 초기화되어있는 배열 함수가 정의되어 있다. (이는 각 버튼에 대한 클릭 이벤트를 처리하고 해당 모달을 여는 함수를 저장하도록 초기화됨)
(기본적으로 css에서 모달배경과 모달창 그리고 내부가 display:none되어있어 보이지 않게끔 설정되어 있음)
다음으로 num이라는 매개변수를 갖는 모달 함수를 실행하면 펑션 함수가 반환되는데
이 펑션(이라는 익명) 함수는 (사용자가) 한 btn 클래스의 내용을 클릭하면
똑같이 그 인덱스 num에 해당되는 modals의 디스플레이가 block 되는
즉, 모달창을 띄우게끔 되어있습니다.
다음으로는 btns 배열을 통해 반복이 진행되어
(각 버튼에 대한 클릭 이벤트를 처리하는 함수로 펑스 배열을 채우게 되어있는데)
각 인덱스 i에 대해 Modal 함수를 호출하고 반환된 함수를 funcs[i]에 저장되게끔 되어있다.
또 다른 for문은 인덱스가 j인 펑스 함수 배열이 반복되며
(=modal(i)가 저장되어있는) (해당 인덱스 j의 (펑스 배열) 함수를 )
각 기능을 호출하여 각 버튼에 대한 클릭 이벤트 처리를 호출하게끔 되어있습니다.
마지막으로 윈도우 객체에 (온클릭: 사용자가 요소를 클릭할 때 발생) 클릭 이벤트 속성이 쓰이는데
이는 클래스 네임이 “모달”인 타켓이라면 그 타켓의 디스플레이를 none시켜
다시 모달창을 닫아 보이지 않게끔 되어있습니다.원래는 모달창을 띄웠다가 다른 모달창을 띄울 시 기존에 창은 꺼지고 그 다른 모달창만 보이게끔 하는 것이 정석이라고 생각한다.
그러나 이 코드의 문제는 모든 창을 띄워놓고 안보이게 숨겨놨다가 해당 버튼을 클릭했을 때 반복문을 돌려 같은 변수를 가진 모달창만 보이게끔 설정이 되어있다는 것이다.
이 점이 너무 아쉽다. 강의 들어보면서 고쳐나가야 한다.
내일 발표인데 너무 떨린다 ...
WIL 때 미니프로젝트 한 거 요약해서 올려야겠다.
