[오름캠프] 첫 미니프로젝트 회고

✍️ 오름캠프 프론트엔드 3기 미니프로젝트 회고

첫 프로젝트로 진행한 일주일간의 미니 프로젝트 회고를 작성해보려고 한다.

---

프로젝트 소개

프로젝트 요약

• 프로젝트명: 버니즈 페이지
• 프로젝트 기간: 11/1 ~ 11/11
  • 11/1(금) ~ 11/4(월) 기획 및 디자인
  • 11/4(월) ~ 11/10(일) 코드 작업
  • 11/10(일) ~ 11/11(월) 작업 마무리, 발표준비
• 서비스 내용: 아이돌 뉴진스에 입덕하는 사람들을 위한 뉴진스 소개 페이지
• 주요 기능: 유투브 연동 및 캐러셀 구성, 모달창 활용 앨범 리스트 확인, 이미지 드래그 앤 드롭, 응원메세지 작성 및 저장, 음악 재생, 앨범 패키지 3D 구현 등
• 기술 스택: HTML, CSS, JavaScript, TailwindCss, Three.js
• 협업 도구: GitHub, Figma, Discord, GetherTown
• 🔗GitHub[BunniesPage]
  

나의 구현 기능

• 파라미터로 페이지 이동: 메인 페이지에서 특정 멤버를 클릭하면 해당 멤버의 갤러리로 이동, 이동시 세션 스토리지와 파라미터 방식을 모두 사용해보고 파라미터 방식으로 수정
• 응원메세지: 엔터키로 메세지 저장 함수 실행, 랜덤 위치와 랜덤 색상으로 메세지 표시, 최대 개수를 지정하여 최대 개수를 초과할 경우 오래된 메세지부터 삭제, 메세지 저장을 위해 로컬스토리지 사용
• CD 애니메이션 효과: 재생버튼 클릭시 Z축 회전, 이전/다음 앨범 클릭시 Y축 회전

프로젝트 결과

1등 🎉

---

KPT 회고

💪 KEEP

• 프로그램 기획 단계에서 구현 목표를 명확히 했다. 프로젝트 기간을 1주일 밖에 안되었고, 대부분은 처음 프로젝트를 진행하는 거라 목표를 현실적으로 잡고, 추가하고 싶은 기능들은 별도로 정리해두었다. 덕분에 개발에만 집중할 수 있는 환경이 되었다고 생각한다.

• 어려움을 겪을 때에는 솔직하게 물어봤다. 혼자 끙끙 앓으면서 시간을 허비하는 것보다는 훨씬 좋은 것 같다. 작업 중 pull을 하다가 오류가 났었는데 도저히 해결이 안되어서 화면 공유로 팀원들의 도움을 받아 해결했다. 다른 사람의 질문을 통해서도 배울수 있었다.

• 팀원들이 모두 의견을 적극적으로 냈기 때문에 프로젝트의 방향이 흔들리지 않았다고 생각한다. 다른 팀원이 작업한 것을 바꿔야할때 미안한 마음이 들수도 있지만, 이유가 합당하다면 적극적으로 의견을 말해야한다. 실제 업무에서도 필요한 부분이라고 생각한다. 합당한 이유를 말하려면 그만큼 공부도 많이 해야겠지..

• 호버 기능을 구현하면서 다양한 방식을 써볼수 있었다. 처음에는 hidden/visible로 했었는데 마우스를 움직일 때마다, 호버 이미지가 깜빡거리는 이슈가 있었다. z-index를 사용해도 마찬가지, opacity로 조절하니 해결되었다. 이미지를 사용하는 호버 효과는 처음이다보니 이러한 버그가 있을 줄 몰랐었다.

• 로컬 스토리지, 세션 스토리지, 파라미터를 모두 활용해봤다. 응원 메세지는 계속 저장하기 위해서 로컬 스토리지를 사용하고, 내부 페이지 연결시에는 세션 스토리지와 파라미터를 모두 사용해봤는데 파라미터의 경우 코드가 간결하지만 URL에 파라미터 정보가 노출되었고, 세션 스토리지는 코드가 더 길지만 URL은 깔끔하게 유지할 수 있었다. 필요에 따라 활용하면 될 것 같다.

• 객체 사용의 효과를 느꼈다. 하드코딩 했던 코드들을 객체를 사용하여 중복 코드 사용을 줄이고, 가독성도 높일 수 있었다. 팀원분들의 코드를 보며 많이 배웠다.👍
  
  

⛔️ PROBLEM

• 새로운 개념이 너무 많았다. 아직 교육을 받는 중이긴 하지만 다른 팀원들보다 부족하다고 느꼈다. 특히 개념을 모르니 이 기능이 어려운건지 쉬운건지도 모르겠고, 그래서 역할 분담을 할 때도 조금 소심하게 행동했다.

• 개발 경험이 있으신 팀원이 기초 셋팅을 모두 해주셔서, 추가 Extention만 설치하고 작업에 들어갈 수 있었다. 알아두어야겠다.

• 반응형을 잊어버린다. 개발에 집중하다보면 현재의 모습에만 집중하는 경향이 있는데, 항상 반응형을 염두해두고 작업해야겠다. 추후에 갈아엎으려면 시간이 배로 걸릴수도 있다..

• 웹 접근성을 고려하지 못했다. <img> 태그에서 alt 만 열심히 적었지, 그외에는 생각하지 못했다. 미니프로젝트여서 시간이 없었다는 핑계를 댈 수도 있지만, 앞으로도 시간이 넉넉한 프로젝트는 그렇게 많지 않을거라 생각한다. 프로젝트 최종 피드백에서도 tab-index와 관련하여 지적받았다.
  
  

🔧 TRY

• package.json 설치하여, 기존 작업에서 사용중이던 tailwind css나 prettier 등의 의존관계를 직접 설정해보기

• tailwind css 는 mobile-first breakpoint system이므로 처음부터 반응형을 염두해두고 작업하기

• 웹 접근성 고려하면서 tab-index 작성해보기, aria-* 속성들 공부하기

• 3D 앨범커버 돌려보는 기능에서 rotate를 활용했는데 새로 배운 OrbitControls를 활용하여 개선해보기

✚ 혼자 코드리뷰 다시 해보고, 개선할 수 있는 부분은 추가해보기 😇

---

💬 일주일이 정말 짧게 느껴졌었는데 지나고보니 꽉꽉 채워 길게 보낸 것 같다. 보람찼던 미니프로젝트 끝!
🐰 배민 쿠폰 감사히 쓰겠습니다 💕