오렌지 마켓

기술 스택

• JavaScript(ES6), CSS(SCSS), HTML

시작하기

프론트 엔드 공부 시작 이후 처음으로 여러 페이지를 협업으로 만드는 경험을 했습니다.

처음인 만큼 많은 시행착오들을 겪었지만 결과물이 나왔다는 것에 큰 동기부여와 성취감을 얻었다. 또한, 이번 프로젝트를 계기로, 시멘틱한 마크업, scss의 파일 분리 및 sass 명령어와 js Dom control에 대한 이해가 높아졌다.

초반에는 팀 프로젝트로 진행했지만, 프로젝트 이해도를 높이고 전체적인 흐름을 알기 위해 개인으로도 병행하여 진행하며, 팀원들이 막히는 부분들을 같이 고민하며 진행했다.

어려웠던 부분

많은 어려움이 있었지만 그 중 가장 생각을 많이 했던 부분은 각 feed의 이미지 슬라이스 기능을 넣는 것이었다.
이미지 하단에 캐러셀 버튼을 누르면 슬라이드되는 기능

초반에 작성된 코드는 하드 코딩된 HTML에 있는 feed에 이미지들을 슬라이드되게 만들어져있어 기능적으로는 문제 없어 보였다.

하지만 사용자들의 feed를 동적으로 생성해 화면에 그려주는 과정에서 위에서 작성한 이미지슬라이드 코드는 최상단 한개의 feed에 대해서만 슬라이드 기능이 적용되고 나머지는 적용이 되지 않는 문제가 발생하였다. -> (querySelector로 잡아줬기 떄무네)
(feed 생성에서 부터 비슷한 문제 발생 -> 각 feed에 id를 넣어주어 feed를 생성해 문제 해결)

문제정의

1. 기존 코드에서는 querySelector의 className으로 접근
   1-1. 그렇기 때문에 이벤트가 상단에 있는 feed에만 적용
2. querySelector 대신 다른 방법으로 각 feed를 잡아줘야한다.
3. 각 feed를 잡고 모든 feed에 이벤트를 달아주어야한다.

해결방법

방안 1. querySelectorAll

• querySelectorAll로 해당 class를 모두 잡은 다음 반복문을 이용해 모든 feed에 이벤트를 달아준다. 😅

방안 2. 이벤트 위임 사용

• feed들을 감싸고 있는 feed container에 이벤트를 달아주고 이벤트가 발생하는 친구를 식별하여 슬라이드 기능을 넣어주기

선택 (이벤트 위임에 빠지다...🥰)

• 초반에 가장 먼저 든 생각은 방안 1번의 querySelectorAll로 이벤트를 달아줄 생각을 했지만 너무 비효율적일 것이라는 생각을 했다.

  Why. 알고리즘을 공부하기 시작할 때부터 반복문을 최대한 적게 사용하자는 개인적인 신념? + 코드가 못생겼다...

  사용자가 모든 feed를 click하지 않을 수도 있는데, 일일히 모든 곳에 이벤트를 달고 있는 시간이 아깝다는 생각을 하게 되었다..

• 해서 천천히 다시 생각을 해보니 이벤트 위임을 통해 feed를 감싸고 있는 container 친구에게 이벤트를 달아주고 이벤트 캡쳐링과 이벤트 버블링으로 해당 feed의 캐러셀 버튼을 잡아주면 어떨까라는 생각을 하게되었다.

결론부터 말하자면 내가 생각했던 것 이상으로 더 다양한 이벤트에 대해 처리를 할 수 있게 되었다.

초반 생각 : 이벤트 위임으로 각 feed에 이미지 슬라이드 기능 넣어야지

구현 이후 생각 : 각각의 feed에 일어나는 모든 이벤트를 조건문을 통해 한번에 처리할 수 있네?! 다른 파일들도 리펙토링하러 가자

• event.target을 통해 사용자의 액션이 일어난 Element을 받고, 해당 Element(이하 CurrentNode)에 부모(CurrentNode.parentElement)와 부모의 이전 형제(CurrentNode.parentElement.previousElementSibling) 요소들을 찾아 해당 이미지 슬라이드 함수에 넣어주는 방식으로 문제를 해결하였다.

<li id=post-${post.id} class="home-post">
  <div class=${slideWrapperClassName}>
    <!-- 이미지 슬라이드할 영역 -->
    <ul class="slide-list">
      <li class="slide">
        <img src=${postImageList[0]} alt="포스트 사진" class="post-img"> 
      </li>
      <li class="slide">
        <img src=${postImageList[1]} alt="포스트 사진" class="post-img"> 
      </li>
      <li class="slide">
        <img src=${postImageList[2]} alt="포스트 사진" class="post-img"> 
      </li>
    </ul>
    <!-- 이미지 슬라이드할 영역 끝 -->
    <!-- 캐러셀 버튼 영역 -->
    <div class="button-wrapper">
      <button type="button" class="on" name="0"></button>
      <button type="button" name="1"></button>
      <button type="button" name="2"></button>
    </div>
    <!-- 캐러셀 버튼 영역 끝 -->
  </div>
</li>

// 이미지 슬라이드 이동 계산 함수
function moveSlide(num, slideList) {
  slideList.style.left = -num * (SLIDE_WIDTH + SLIDE_MARGIN) + "px";
}

function slideAnimation(Node) {
  const ControlList = Node.parentElement; // .button-wrapper
  const ControlBtnAll = ControlList.querySelectorAll("button"); // button들
  const slideList = ControlList.previousElementSibling; // .slide-list

  // 이전에 선택되어 있던 위치와 이동할 위치 찾기
  let prevIdx;
  let moveIdx;
  ControlBtnAll.forEach((el, idx) => {
    if (el.className === "on") {
      prevIdx = idx;
    } else if (+Node.name === idx) {
      moveIdx = idx;
    }
  });
  ControlBtnAll[prevIdx].classList.remove("on");
  Node.classList.add("on");
  moveSlide(moveIdx, slideList);
}

배운점

이번 프로젝트를 하면서 Dom Control에 대해 많은 것을 배울 수 있었다. 상황에 따라 querySelector와 querySelectorAll을 적절하게 사용할 수 있게 되었다.

또한, element가 가지고 있는 속성들이 얼마나 다양한지 상기할 수 있게 되었으며, console.dir을 통해 element들이 가지고 있는 속성들을 찾아보는 연습을 해야겠다는 생각을 했다. console.dir을 사용해 형제요소를 탐색할 수 있다는 것을 몰랐다면 아마도 위에서 제시한 문제 해결방안 1로 문제를 해결했을 것 같다. 다행이 못생긴 코드를 사용하지 않아 기분이가 좋다.

querySelectorAll로 요소들을 잡으면 해당하는 객체는 Array가 아니라 NodeList여서 Array 메소드들을 사용할 수 없었다.

하지만, JavaScript의 call함수를 이용해 NodeList객체에서 Array 메소드들을 사용하는 경험을 할 수 있어. 나의 JS 이해도가 1 증가했다.

자바스크립트 딥다이브 스터디에서 공부할 때 .call 메소드와 .apply메소드는 왜 있는지 의문이 들었지만 이렇게 활용을 하니 기분이 짜릿했다. 이 맛에 코딩하는 것이 아닌가 싶다 🤗

call 사용예시!

async function productAPI(method, productId=false) {
  const imageUrl = $previewImage.src;

  // 서버에 보낼 product 데이터 생성
  // $inputList = [input#imageInput, input#productName, input#productPrice, input#productLink]
  const product = { "itemImage": imageUrl, };
  [].slice.call($inputList, 1).forEach((el) => { 
    // price인 경우 정수로 변환
    product[el.name] = (el.name === "price") ? parseInt(el.value) : el.value;
  });
}

전체코드

1. 서버로 보낼 데이터를 생성하는 과정에서 일일히 요소를 불러와 값을 넣으면 코드가 안이쁘기 때문에 querySelectorAll로 잡고 forEach를 사용할 생각을 했다.
2. 이미지의 경우 요소의 value값을 넣는 것이 아닌 미리 서버 통신으로 받은 Url을 넣어줘야하기 때문에 반복문에서 제외하고 싶었다.
3. 조건문을 사용해 처리할 수 있었지만 코드가 못생겨져서 Array의 .slice메소드를 사용하기로 했다.
4. 하지만 querySelectorAll로 잡은 요소의 객체는 NodeList 이기 때문에 slice메소드가 없다고 한다.
5. 그때 불현듯 call메소드가 떠올라 적용을 해보니 작동이 잘되는 것을 볼 수 있었다. (아주 기분이 너무 좋았다.)
   

회고 및 느낀점

이번 프로젝트를 진행하면서 JS랑 금방 친해질 수 있었다. 역시 코딩은 너무 재미있는 친구인 것 같다.

그리고 팀원들이 모르는 부분들을 같이 고민하면서 풀어 나가니 더 많은 것들을 배울 수 있는 시간이었다.

한 가지 아쉬운 점은 내가 조금 더 잘하고, 알고 있는게 많았다면 프로젝트를 진행하며 시행착오를 조금 덜 겪고 수월하게 팀 프로젝트를 이어나갈 수 있었는데 많이 고생해준 팀원들에게 고마운 마음 뿐이다.

앞으로 더 많은 것들을 만들어가면서 성장해야겠다는 생각이 든다.

다음 프로젝트도 항상 생각하면서 코딩하자~~ 화이팅!!