팀 프로젝트 LionTime

김민찬·2022년 6월 15일
1

JS Project

목록 보기
1/3
post-thumbnail

멋쟁이 사자처럼 프론트엔드스쿨 1기에서 진행한 팀 프로젝트인 SNS 마켓 프로젝트에서 담당한 영역을 어떻게 작업했는지 기록을 남겨보려고 한다.

이 프로젝트의 목표는 바닐라 자바스크립트를 이용해 SNS 서비스의 프론트엔드 구현과 API를 이용한 서버 연결이다.

나는 채팅화면 구성, 하단 탭 메뉴, 모달 버튼 영역을 맡게 되었는데, 작업하다보니 API를 사용하는 영역이 없었다.(어라?)

대신 작업을 빨리 끝내고 API영역을 도와주면 되겠다 싶어서 서둘러서 작업을 진행했다. 채팅화면은 기능이 지원되지 않아서 말그대로 html/css작업만 했고, 하단 탭 메뉴도 금방 끝났다.

모달기능

페이지에는 다양한 버튼이 있는데, 그 버튼 마다 나오는 모달 안에 메뉴가 다르다.

각각 태그를 만들어서 보여주는 것보단 하나의 모달에 메뉴를 동적으로 생성하는게 재사용성도 좋고, html가 훨씬 줄어들 것 같아 js 작업을 시작했다.

메뉴 동적 생성하기

createElement

createElement는 요소를 생성하는 함수이다.

document.createElement('div')

이런식으로 div 태그를 생성할 수 있다.

setAttribute

setAttribute는 요소에 어트리뷰트를 추가하는 함수이다.

Element.setAttribute("class","seletBtn")

appendChild, createTextNode

appendChild는 지정 요소의 자식요소를 추가하는 함수이다.
createTextNode는 요소에 텍스트를 추가하는 함수이다.

Element.appendChild(document.createTextNode('채팅방 나가기'))

이 네 가지 함수들로 메뉴를 동적으로 생성해 줄 수 있었다.

먼저 addEventListener로 내가 누른 target의 class명으로 어떤 버튼인지 파악해준 뒤, 그 버튼에 맞는 요소를 생성하도록 함수를 작성했다.

if (e.target.classList.value === 'btn-menu') {
        const menulist = createEle('li', 'class', 'list-modal-menu');
        const menuBtn = createEle('button', 'type', 'button');
        addAttr(menuBtn, 'class', 'btn-list close-chat-room');
        menuBtn.appendChild(document.createTextNode('채팅방 나가기'));
        menulist.appendChild(menuBtn);
        modalContainer.appendChild(menulist);
    }

function createEle(eleName, attr, attrName) {
    const createEle = document.createElement(eleName);
    createEle.setAttribute(attr, attrName);
    return createEle;
}

function addAttr(ele, attr, attName) {
    ele = ele.setAttribute(attr, attName);
    return ele;
}

모달은 display: none에서 버튼을 누르면 classList.add로 class를 추가해서, css에서 display:block으로 바꿔줘서 나타나게 해줬는데, 나는 모바일에서 나오는 모달처럼 스르륵 올라오길 바랬다.

그래서 기본 모달크기와 그 안의 메뉴의 크기를 계산해서 위로 올라오도록 추가 작업을 시작했다.

childElementCount

childElementCount는 요소의 자식의 갯수를 반환한다.

요소의 갯수만큼 아이템의 height값을 곱해서 밑으로 내려줬다.

bottomValue = modalContainer.childElementCount * 46 + 46;
modal.style.bottom = `-${bottomValue}px`;

요소의 높이가 46으로 고정되있어서 급한김에 46 그대로 썼는데, 요소의 height 값을 구해서 계산해주면 나중에 변경점이 있을때를 대비할 수 있을 것같다.

이제 버튼을 누르면 메뉴가 생성되고 아이템 갯수에 따라 화면 밑으로 모달이 위치하게 된다. 그 뒤 모달의 bottom값이 0으로 위치값을 바꾼다. 모달 css에 transition을 줘서 내가 원하는 스르륵 올라오는 모달이 완성된다.

그 외 메뉴를 눌렀을 때 각각 기능을 추가해서 내가 맡은 영역을 마무리했다. 생각보다는 시간이 더 걸렸지만 다른 사람들의 API작업도 도와주면서 프로젝트를 잘 마무리 할 수 있었다.

나중에 팀 리더이신분이 프로젝트 이름에 맞게 이미지를 교체해주시고 다양한 기능을 추가해서 보기 좋은 프로젝트가 된 것 같다.

아쉬운 점

API를 나중에 도와주면서 만지기는 했지만 담당영역에 API작업이 없어서 아쉬웠다. 대신 여러 사람들이 가져온 API로 작업을 해서 거의 모든 컨텐츠의 API를 확인할 수는 있었다.

또 처음으로 js에서 동적으로 요소를 생성했는데, 더 깔끔하게 할 수 있는 방법이 있을 것 같다. 코드 재사용성이 좋지 못했다. js 공부한지 얼마되지 않은 시점이어서 더 아쉬웠다.

지금이라면 배열과 반복문을 통해서 더 적은 코드로 재사용하기 편하게 만들 수 있을 것 같아 나중에 기회가 되면 리펙토링을 진행해보고 싶다.

마무리하며

팀 프로젝트에서 중요한 것은 진행 중인 영역에 대한 공유와 커뮤니케이션인 것 같다. 이번에 만들어진 팀은 갑자기 만들어진 팀이라 서로 좀 서먹했고 소통이 살짝 부족했던 것 같다. 다들 착해서 분위기는 좋았지만 좀 더 친해질 시간이 있었으면 더 좋았겠다.

profile
프론트엔드 개발자로 나아가고 있는 김민찬입니다.

0개의 댓글