[WIL 2023.05.21] 내배캠 1주차

Situation(상황): 이번주 목표

 

팀프로젝트 (팀소개 페이지 만들기)

우리팀 인원은 총 5명으로, 페이지에 각자의 카드를 생성해서

모달창 팝업형식으로 소개내용을 띄우기로 했다.

 

내 역할은 팀원 개별 소개 페이지 HTML / CSS / JS 작성

 

개인적으로 그저 팝업되는 카드가 아닌 스무스한 동작을 추가하여 열리게 하고 싶었다.

어떻게 구성을 해볼까 고민하다가 transition과 자바스크립트를 이용하면 할 수 있을 것 같았다.

 

Task(임무): situation 중 문제들

 

협업의 꽃, GIT활용

저번주에도 협업의 경험은 있었지만 그때는 git에 대해 전혀 모르던 상태여서 slack을 통해 각자 파일을 전달하면서 합텨가며 작업을 했었는데 너무 번거롭고 구분이 어려운 문제가 있었다. 프로젝트 전에 특강으로 배웠던 깃을 사용해보려 했는데 실제로 협업에 이용하려니 연동이 어려웠다.

 

JS함수로 모달창 팝업이 되도록 작성을 했더니 동작에 문제가 발생하였다.

1] 카드 클릭 시 각각 본인의 모달창 내용이 뜨는 것이 아니라 제일 마지막 요소의 내용만 출력

2] 모달창 팝업 시 나머지 카드가 사라지지 않는 이슈

3] 서버와 연결 후 나머지 카드가 사라지지 않는 이슈 재 발생

 

Action(접근방법): 해결시도

 

git 연동문제는 구글링을 열심히 했는데, 아래 2개의 링크의 글을 보고 많은 도움을 얻었다.

repository 클론부터 브랜치 생성, pull, push, commit 까지 상세하다.

https://fomaios.tistory.com/entry/Git-Github-같은-저장소-함께-쓰기feat협업하기https://bibi6666667.tistory.com/212

또한 저번주 우리팀이었던 분께서도 도와주셔서 어느정도 git 활용 협업에 대한 개념이 잡힌 것 같다.

 

<Git 사용 코드>

git init

git remote add origin 주소창에_나오는_깃_주소.git

git branch -m *브랜치 생성

git checkout -b 이름 ( 브랜치 만들고 체크아웃까지 동시에 이루어짐) (main)에서 (설정한 이름)으로 바뀜

git add . (. 이 all 을 의미함)

git commit -m "메세지"

git push origin (이름)

 

모달창을 구현하기 위해서 modal에 대한 기본적인 구조에 대한 이해와 필요한 함수,

애니메이션 동작 관련한 css에 대한 지식이 필요했다.

이를 위해 나는 jQuery를 이용한 모달 팝업에 쓰이는 함수, css transition관련 지식에 집중했다.

모달 팝업에는 .click() 클릭이벤트를 이용하여 동적처리 했다.

클릭을 하면서 각각의 카드에 ‘modal-open’이라는 속성을 부여하고 제거함으로서 모달창이 생겼다 사라졌다 하게 했고,

CSS쪽에서는 cubic-bezier로 트랜지션을 주어 모달창의 동작을 좀 더 부드럽고 보기 좋게 처리했다.

 

Result(결과): action 후 성과

 

$('.js-click-modal').click(function() {
  $(this).closest('.container').addClass('modal-open');
});

$('.js-close-modal').click(function() {
  $(this).closest('.container').removeClass('modal-open');
});

1번 문제해결. **$(this).closest('.container')**를 사용하여 클릭한 요소의 부모 .container 요소를 선택함. 이렇게 하면 클릭한 버튼 또는 닫기 버튼이 속한 .container 요소만 선택되어 모달을 열거나 닫을 수 있다.

 

그러나 나머지 클릭 안 한 카드가 사라지지 않는 이슈가 발생 ㅠ

 

$(document).ready(function() {
  $('.js-click-modal').click(function() {
    var container = $(this).closest('.container');
    container.addClass('modal-open');
    container.siblings('.container').hide();
  });

  $('.js-close-modal').click(function() {
    var container = $(this).closest('.container');
    container.removeClass('modal-open');
    container.siblings('.container').show();
  });
});

클릭한 요소의 가장 가까운 .container 요소에 modal-open 클래스를 추가하고, 해당 요소의 형제 요소인 .container를 숨긴다. 또한, 닫기 버튼을 클릭하면 modal-open 클래스를 제거하고, 숨겨졌던 형제 .container 요소를 다시 보이게 수정.

 

원하던 기능에 얼추 가까워 졌으나 동작시간이 다 달라서 움직임이 굉장히 지저분해 보임.

 

$('.js-click-modal').click(function () {
  var container = $(this).closest('.container');
  container.addClass('modal-open');
  container.siblings().fadeOut(300);// 애니메이션 속도 조정 
});

$('.js-close-modal').click(function () {
  var container = $(this).closest('.container');
  container.removeClass('modal-open');
  setTimeout(function () {
    container.siblings().fadeIn(300);// 애니메이션 속도 조정
  }, 500);// 딜레이 시간 조정
});

fadeOut() 메서드의 속도 매개변수를 조정하여 카드가 더 부드럽게 사라지도록 추가.

setTimeout() 함수를 사용하여 'close'를 클릭한 후 일정 시간이 지난 후에 카드가 나타나게 함.

 

결과

See the Pen Untitled by 양현서 (Ellie) (@-Ellie) on CodePen.

기능이 잘 작동되었고, 이제 팀페이지의 css에 맞게 살짝 수정만 거치면 되는줄 알았으나,

 

서버를 합치면서 카드가 사라지지 않는 이슈가 재발생!

동적으로 추가되는 카드라서 형제요소를 찾지 못한 것이 원인이었다.

 

card.innerHTML = temp_html;

// 컨테이너 생성 및 카드 추가const container = document.createElement('li');
container.classList.add('card-container');
container.appendChild(card);
list.appendChild(container);

$('.js-click-modal').click(function () {
  const container = $(this).closest('.card-container');
  container.addClass('modal-open');
  container.siblings().fadeOut(300);
});

$('.js-close-modal').click(function () {
  const container = $(this).closest('.card-container');
  container.removeClass('modal-open');
  setTimeout(function () {
    container.siblings().fadeIn(300);
  }, 100);
});

이를 해결하기 위해 클릭시 새로운 변수를 만들어서 카드들을 감싸는 부모요소(container)를 만들고 각각의 카드에 새로운 클래스를 부여하여 자식요소(.card-container)로 만든 뒤,

.appendChild()메소드를 이용해서 카드들이 생성되는 상태로 두고 이후 똑같은 함수를 적용했더니 해결되었다.

 

Point(정리): 이번주 요약

 

한줄로 요약하면 이번주 내가 주로 집중했던 영역은 jQuery활용과 CSS trasition에 대한 이해라고 할 수 있다.

하지만 내가 맡은 역할은 아니었을 지라도 팀 프로젝트를 진행하면서

웹 인터렉션에 대한 약간의 맛보기와 다른 팀원들의 작업물과 충돌 시 대처법,

git flow에 대한 이해, RESTful API와 클린코드, CRUD의 구성과 실현의 경험과 같이 이루어진 것이다.

 

팀으로서 작업을 할 때 내가 어떤 부분이 부족했었는지, 어떤 부분을 잘했는지도 마지막에 KPT 회의를 하며 글로 남겨놓으니 명확하게 보였다.

 

이번주 경험을 발판 삼아 내가 앞으로 다음 프로젝트를 위해 어떤 부분을 준비해야할지 방향성을 알려준 것 같았다.

일단 지금 당장은 fetch에 대한 개념이 불안정 해서 제대로 잘 이해하지 못하는 것 같고,

css 기본문법에 대해서도 확실히 개념을 잡고서 다음 스텝으로 넘어가는 것이 좋을 것 같다.

 

또한 다시 또 프로젝트를 하게 된다면 조금 더 적극적으로 내 의견을 어필해 보는 것도 좋을 것 같다.

내가 너무 초보고 모르는 것이 많다고 생각해서인지 이번에 남에게 맞춰가려고 하는 성향이 강했던 것 같고

그러다 보니 마음에 들지 않고 아쉬운 부분이 많이 보여서 아쉽다. 내 의견은 확실히 어필하도록 하자.