'빡코' 팀프로젝트 - 개발일지 (1)

coding

'빡코' 팀프로젝트 - 개발일지 (1)

Jeo 2021. 10. 5. 19:12

스파르타 코딩클럽에서 왕초보 웹개발 종합반을 수강했고, 이어서 15일 메이킹 챌린지에 참여했다.

수업을 들으면서도 많이 배웠지만, 팀프로젝트에 참여하면서 정말 밀도 높게 공부할 수 있었다.

# 개발 업무내용

우리 팀 빡코는 'Ques?tion'이라는 웹사이트를 만들고 있다. 사용자에게 랜덤으로 다양한 주제의 질문을 주고 그 답변을 받아오는 사이트이다.
현재까지 내가 맡았던 부분은 이용자가 처음 접속했을 때 마주하는 메인페이지의 프론트엔드 구성이었다. 원하는 디자인과 기능을 구현하기 위해 css와 javascript를 많이 공부하게 되었다.

# 업무 중 이슈/고민 .. 그리고 해결한 내용

슬라이드 구현
- 가장 시간을 많이 들여서 구현한 기능이었다.
- 초반에는 카드 개수를 줄여서 한번 버튼 클릭만으로 끝에 있는 카드까지 볼 수 있도록 만들어봤었다.

qnaBox.style.width = (cardWidth + cardMargin) * cardCount - cardMargin + 'px';

function moveSlide1(num) {
    qnaBox.style.left = (-num * 740 + 'px');
    currentIndex = num;
};


slideNext.addEventListener('click', function() {
    if (currentIndex < 2){
        moveSlide1(currentIndex + 1);
        console.log(currentIndex);
    } else {
        moveSlide1(0);
    }
})

slidePrev.addEventListener('click', function() {
    if (currentIndex > 0){
        moveSlide1(currentIndex - 1);
        console.log(currentIndex);
    } else {
        moveSlide1(2);
    }
})

하지만 (1) 보여주고 싶은 카드 개수가 더 많았고, (2) 여러 디스플레이 상황에서도 적절한 슬라이딩 폭은 한 카드의 폭만큼이어야 했고, (3) 맨 끝의 카드까지 슬라이딩을 하더라도 이어서 처음 카드를 가져올 수 있도록 무한히 이어지는 기능을 구현하길 바랐다.
이런 필요들을 딱 해결해주는 가이드 영상을 만났다 (https://youtu.be/7rTW0mndIy

위의 영상을 참고해서 새로 고친 슬라이딩 코드는 아래와 같다.

// 화면 너비//
var windowWidth = $( window ).width();


let slideNext = document.querySelector(".slide-next");
let slidePrev = document.querySelector(".slide-prev");

let qnaBox = document.querySelector(".qna-showlist");
let card = document.querySelectorAll(".qna-showlist li");
let currentIndex = 0;
let cardCount = card.length;
let cardWidth = 340;
let cardMargin = 40;

makeClone();

function makeClone() {
    for (var i = 0; i < cardCount; i++) {
        var cloneCard = card[i].cloneNode(true);
        cloneCard.classList.add('clone');
        qnaBox.appendChild(cloneCard);
    }
    for (var i =cardCount -1; i>=0; i--) {
        var cloneCard = card[i].cloneNode(true);
        cloneCard.classList.add('clone');
        qnaBox.prepend(cloneCard);
    }
    updateWidth();
    setInitialPos();
    setTimeout(function(){
        qnaBox.classList.add('animated');
    },100)
    
}

function updateWidth() {
    var currentCards = document.querySelectorAll(".qna-showlist li");
    var newCardCount = currentCards.length;

    var newWidth = (cardWidth + cardMargin) * newCardCount - cardMargin + 'px';
    qnaBox.style.width = newWidth;
}

function setInitialPos() {
    var initialTranslateValue = -(cardWidth + cardMargin)*cardCount;
    qnaBox.style.transform = 'translateX(' + initialTranslateValue+'px)';

}

slideNext.addEventListener('click', function(){
    moveSlide(currentIndex + 1)
})

slidePrev.addEventListener('click', function(){
    moveSlide(currentIndex - 1)
})

function moveSlide(num) {
    qnaBox.style.left = -num * (cardWidth + cardMargin) + 'px';
    currentIndex = num;
    console.log(currentIndex, cardCount);
    if (currentIndex == cardCount || currentIndex == -cardCount) {
        setTimeout(function(){
            qnaBox.classList.remove('animated');
            qnaBox.style.left = '0px';
            currentIndex = 0;
        },500);
        setTimeout(function(){
            qnaBox.classList.add('animated');

        },600)

        
    }
}

fixed 된 요소를 화면 정중앙에 배치시키기
- 로그인 팝업창을 position:fixed 로 만들었는데, 반응형으로 매번 사이즈를 달리하려고 했더니 너무 복잡했다.
- 그래서 그냥 작더라도 가운데 딱 레이아웃 고정되어서 있도록 만들기로 마음을 바꿨다...ㅎㅎ
- 그 과정에서 참조한 "fixed 요소를 화면 정중앙에 배치시키기"는 아래처럼 구현했다.
- ```
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
```

# To-do List

이제 막 ajax로 카드에 쓰일 내용 부분에 데이터를 받아와서 temp_html로 띄우는 것까지 성공했다. 다만, 카드슬라이드 기능을 적어놓은 slide.js파일이 temp_html에 적용이 되지 않았다. 우선은 ajax로 불러오는 영역에 바로 이어서 slide.js파일에 적어놓었던 코드들을 복사-붙여넣기 해보았고, 일단 작동은 된다. 그렇지만 이 상태로는 html 파일이 깔끔하지 않다. 따로 js파일로 뺀 다음 적용시킬 수 있는 방법이 있는지 알아보아야겠다.