지난 이야기...
몇시간을 공들여 겨우 만들어낸 팝업창이 팀원들과의 코드와 합쳐진 순간 실행이 되지않다.... 왜 안되지?
이것저것 시도해보니 팝업 Url로 일반 링크는 연결되는데 c://로 시작하는 파일 경로는 연결이 안 되는 것이었다. 하지만 '/popup.html'로 연결하자 해결이 되는 것을 발견했다.
문제발생 : 멤버카드 append 오류
프로젝트는 순조롭게 진행되고 있었다. 팝업창을 닫는 기능도 구글에 검색해서
window.close()로 넣어 실행이 되는 것을 확인했고 자잘한 실수들도 깔끔하게 정리했다.
팀원들의 진척도도 순조롭게 올라갔고 우리는 목표했던 기능들을 거의 구현해내며 생각보다 일찍 프로젝트를 완성하나 했다.
그런데 문제가 생겼다. 팀원은 네 명이라 팀원 네 명의 카드를 만들어 전시하는 데까지는 성공했으나, 팀원이 추가될 때 카드가 추가되는 상황이 문제였다.
부트스트랩으로 카드를 만든 것이 문제일까? css를 짤 때, 카드들이 아랫쪽 구성요소들의 자리를 침범하게 되는 것을 발견했었는데 (저장된 class 속성들때문에 아래의 컴포넌트들과 충돌이 나는 듯 했다) 우리는 이것을 아래 컴포넌트에 margin-top을 주는 것으로 해결했었다. 그런데 카드를 더 추가하게 되니 이 margin을 또 늘려야하고... 계속 변동이 생기니 고민이 생겼다.
- 함수를 넣어 4줄이 넘어갈 때마다 마진을 늘려주는 식으로 할 지
- 스크롤을 넣을지
- 부트스트랩을 포기하고 css를 직접 짠다
이렇게 세 가지 방도를 두고 우리는 머리를 싸매기 시작했다.
다행히 다른 부분은 일찍 마쳤으니 고민할 시간은 많았다.
다른 분들은 가로 스크롤을 넣는 방법을 알아보기로 하셨고 나는 따로 캐러샐에 흥미가 생겨 그 쪽을 파보기로 했다.
나는 아직 자바스크립트의 기능이나 문법에 대해 아는 것이 많지 않아서 사실 설명을 봐도 잘 이해가 되지 않았다. 하지만 다른 분이 만들어 놓은 틀에다가 우리의 구성을 잘 맞춰 넣어보면 양옆 버튼을 누를 때마다 카드가 하나씩 넘어가는 캐러샐을 만들 수 있을 것도 같았다.
참고한 것은 이 분의 블로그였다.
https://velog.io/@grinding_hannah/JavaScript-자바스크립트로-캐러셀Carousel-구현하기
이 분은 작은 상자에 숫자 1부터 5까지를 넣고 하나씩 보이게 넘기는 형식으로 구현을 하셨는데 생각해보니 숫자박스가 보이는 상자를 더 가로로 길게 늘리고 거기에 숫자박스 대신 멤버카드를 넣으면 되지 않을까? 하는 생각이 들었다.
그렇게 아무것도 모르는 상태에서 시작된 캐러셀 구현하기 대장정...
이부분은 다음 포스팅에 집중적으로 다뤄보도록 하겠다.
