여는 글
오늘로 첫 프로젝트가 대강 마무리되어가고 있다.
혼자 무언가를 만들때와는 다르게 팀원들과 소통하고 맞춰가며 조율해야 하는 부분들이 많았기 때문에 그런 부분에서 오는 어려움도 분명히 있었지만, 그만큼 재미와 성취감을 얻을 수 있었다. 누군가와 함께 어려움을 극복한다는 게 이렇게 재미있을 줄이야.
팀원들도 다들 재치있고 유쾌한 분들이라서 하루에 12시간이라는 고된 강행군에도 지치지 않고 즐겁게 하루하루를 보내고 있는 것 같다. 그리고 가끔씩 다른 조들 염탐하는데, 역시 우리 조가 짱이다. 물론 다른 조가 못한다는 게 아니라 나는 우리 조원들이 흘린 땀방울들을 알고 있으니 팔이 안으로 굽을 수 밖에 없지 않은가.
오늘의 업무
오늘은 어제 합쳐놨던 조원들의 코드를 정리하고, 팀 소개 페이지와 방명록 페이지를 메인 브랜치로 합치는 게 주요한 과제였다. 물론 팀원들에게 일을 부탁했으니 사실 나는 입으로만 일했다고 볼 수도 있다.
짜잘짜잘하게 많은 수정이 있었다. 처음에 코드를 짤 때, 같은 컴포넌트의 경우 각자 코딩하지만 class나 id 같은 선택자를 맞춰서 작업하기로 했는데, 선택자는 같은데 코딩은 각자하다보니 이후에 합쳤을 때 서로의 css코드가 서로서로 침범해서 비극적인 상황이 종종 연출되고는 했다. 하지만 덕분에 이제는 chrome 콘솔을 보면서 버그 잡아내는 능력이 기가막히게 늘었다. 그리고 후반 작업에 들어서서는 팀원들과 작업을 계획할 때, 미리 구획을 나누고 선택자를 미리 정해서 작업하는 방법이 상당히 도움이 된 것 같다.
첫 번째 난관
첫 번째 작업은 팀원이 작업해준 방명록 코드를 조금 손보는 일이었다.
팀원이 기존에 작업해준 방식은 버튼을 누르면 "방명록 작성하기" form이 display: none; / display: block; 을 toggle하는 형식으로 구성되어 있었다.
아주 훌륭한 on/off 방식이지만, 약간의 아쉬움이 있다고 하면 움직임이 부드럽게 구현되기 어렵다는 점이다. 사용자에게는 아무것도 없다가 갑자기 버튼을 누르면 뿅 하고 생겨버리는 느낌이기 때문에 조금 더 부드러운 모션을 구현하고 싶었다.
btn.addEventListener(('click') => {
if(모달창이 숨겨져 있다면) {
modal.classList.add('visible');
// visible 클래스를 주면 창의 position 값이 변하도록 설정.
modal.classList.add('usable');
// z-index를 높여 클릭이 가능하도록 설정
}
}그런데 여기서 문제가 생긴다.
방명록 뒤에 작성하는 창을 숨기기 위해서 z-index: -1을 줬는데, 이렇게 하면 방명록 창이 body 뒤로 넘어가서 클릭이나 입력이 안된다. 즉 사용자에게 보일 때는 z-index가 0 이상이어야 하는 것. 그런데 버튼을 누를 때 바로 z-index를 올리면, 애니메이션이 진행되는 도중에 입력창이 방명록 창을 뚫고 나와버리는 문제가 생겼다. 방명록의 움직임은 1초에 걸쳐서 애니메이팅되는데, 입력창의 z-index는 버튼을 누르자마자 바로 값이 바뀌니 생기는 문제였다.
btn.addEventListener(('click') => {
if(모달창이 숨겨져 있다면) {
modal.classList.add('visible');
// visible 클래스를 주면 창의 position 값이 변하도록 설정.
setTimeout(() => {
modal.classList.add('usable');
// z-index를 높여 클릭이 가능하도록 설정
}, 1000)
}
}setTimeout을 통해 z-index를 1초 뒤에 올림으로써 애니메이팅이 모두 끝난 뒤에 올라오게 설정함으로써 애니메이션의 충돌이나 방명록 창과의 충돌을 피할 수 있었다.
이건 내가 직접 제작한 2등 기념 배너.
디자인은 머리아프지만 언제나 재미있다.
사실 세 번째 난관까지 적을 계획이었는데 오늘은 진짜진짜진짜 피곤하다. 왜냐면 벌써 두 시거든... TIL을 그날이 가기 전에 적고싶었는데 오늘은 오류 다 잡고 나니까 이미 12시가 지나있었다... 빠빠이
