멋쟁이사자처럼 명지대학교 10기 동아리 부원 모집을 목적으로 하는 홍보용 사이트
Github
기간
인원
사용기술
https://github.com/mju-likelion/nana
2022.01 - 2022.02 (1개월)
디자인 1명, FE 4명
useState, useEffect, useRef를 사용하여 몇 번째 carousel인지, 해당 carousel의 dom을 인식하는 방법을 통해 움직일 수 있도록 했습니다.
각 프로젝트 슬라이드에 고유한 id를 포함시켜, carousel의 넘겨진 순서와 id 값이 같다는 조건을 통해 현재 위치를 나타내는 carousel dot도 제작했습니다.
반응형을 이용하여 데스크탑에서부터 태블릿, 모바일까지 모든 환경에서 화면이 원활하게 보일 수 있도록 퍼블리싱 했습니다.
멋쟁이 사자처럼 9기 회원으로 들어와 제대로 웹 공부를 입문하고, 10기 운영진이 되어 처음으로 제대로 만든 프로젝트였습니다.
해당 사이트는 API 연결이 되어 있지 않은 퍼블리싱 사이트이지만, 깃허브 Pull Request와 코드 리뷰 문화를 접하고 carousel 같은 처음 만들어보는 기능까지 만들어 볼 수 있었습니다. 또, 제대로 완성해냈다는 점에 의의를 두기도 합니다.
지금 코드를 다시 보면, 리액트의 장점인 컴포넌트 분리를 제대로 살리지 못한 지저분한 코드라고 생각이 듭니다. 모달 또한 최상단 부모 컴포넌트 DOM 외부에 존재하는 DOM 노드에 렌더링 할 수 있는 Portal이라는 것이 있는데 프로젝트 종료 후 해당 개념을 알게 된 것에 대해 아쉽기도 합니다.
데스크탑
모바일