TAING 반응형 웹페이지_JavaScript 프로젝트 기술서
01 Feb 2024TAING 반응형 웹페이지_JavaScript 프로젝트 기술서
기간
2023년 7월 28일 ~ 8월 2일
링크
프로젝트 소개
[멋쟁이사자처럼 프론트엔드 스쿨 6기]에서 진행한 바닐라 JavaScript 프로젝트입니다. 티빙 사이트를 본뜬 TAING 반응형 프로젝트입니다.
조장 업무
프로젝트 기간이 짧은 것을 고려하여, html/css 프로젝트 때 구현한 것을 css를 tailwind로 전환하고 JavaScript 기능을 추가하는데 주력했습니다.
프로젝트에 필요한 환경 설정과, 기존 css를 Sass에서 tailwind로 전환하는데 필요한 환경 설정과 JavaScript 유틸 함수 등을 추가하여 팀원들이 프로젝트에 바로 집중할 수 있도록 했습니다.
매일 오후에 모여 작업량 확인하고, 커밋 머지를 하여 총 진행 상황 확인할 수 있도록 했습니다.
구현에 어려움을 겪는 팀원들의 질문을 받아 문제 해결에 도움을 주어 팀원들이 다음 미션으로 넘어갈 수 있도록 힘을 보탰습니다.
담당 작업
TAING 홈페이지 중 저는 가장 까다롭게 여겨진 메인 페이지를 맡아 구현했으며, 요구사항에 있었던 대로 메인 페이지의 메인 배너 슬라이드는 swiper를 사용해 구현했습니다.
홈페이지 특성상 구획 별 슬라이드가 여러 개 있었습니다. 저는 다른 구획 별 슬라이드는 swiper를 여러 개 사용해 구현하고 싶지 않아서, 바닐라 JavaScript로 구현했습니다. 레퍼런스를 찾아 필요한 기능 만을 가지고서 구현했습니다. 총 가로 길이를 구해 그에 맞게 슬라이드로, 좌우 버튼 클릭 시 작품 개수에 맞게 움직일 수 있도록 했습니다. 다만 프로젝트 기간이 길지 않은 터라 기능 구현만을 목표로 하드 코딩으로 구현했습니다.
기능에는 문제가 없었지만, 보기만 해도 답답했던 이 부분을, 프로젝트와 발표가 끝나고 바로 리팩토링에 들어갔습니다. 하드 코딩으로 구현한 것 없이, 좌우 버튼 클릭하면, 버튼이 어느 슬라이드의 버튼인지 감지하여 그 슬라이드에 맞게 작동하도록 했습니다. 리팩토링한 것은 기능적으로 똑같지만, 코드를 보면 전혀 다른 비주얼을 가진 것이 놀라웠고, 속이 시원해지는 경험이었습니다.