1차 프로젝트 기록
시연영상 및 기억하고 싶은 코드
What?
kangol 사이트를 클론해서 gonggol이라는 사이트를 만들었다.
메인, 상품목록, 상품상세, 로그인, 회원가입 페이지 구현
👉 내가 구현한 페이지 = 메인페이지
How long?
2021.06.07 ~ 2021.06.19
With whom?
프론트엔드 : 오선주(나), 김지민님, 이도윤님 (3명)
백엔드: 한성봉님, 배찬영님, 최승리님 (3명)
With what?
기술 스택
협업 도구
Why?
kangol 사이트를 고른 이유
1. 이미지 슬라이더
평소에 프로젝트를한다면 꼭 구현해보고 싶었던 이미지 슬라이더가 가장 눈에 먼저 띄었고 흥미를 느끼기 시작했다.
2. 프론트엔드와 백엔드 모두에게 적절한 사이트
프론트엔드이지만 백엔드와 함께하는 프로젝트이기에 백엔드가 구현해볼 기능이 많은지도 고려했고 둘 모두에게 적절한 사이트라 판단했다.
3. 1차 프로젝트로 적당한 사이트
사실 해보고싶은 사이트가 더 있었지만 너무 어려워보였고 2주라는 짧은 시간에는 적당하지 않다고 판단한 사이트도 많았다.
How?
👉 무한 슬라이더
라이브러리를 사용할 수 없고 검색을해도 다들 function component(hooks)를 사용해서 class component로 구현해야하는 이번 프로젝트에서 메인페이지의 무한 슬라이더는 가장 많은 시간을 쏟게했다.
무한 슬라이더에서 가장 중요한 포인트는 기존에 내가 사용할 이미지들 앞뒤로 마지막장과 첫번째장을 한번 더 놓는 것이다. 나는 총 5장의 이미지를 사용했고 맨앞에 5번과 맨뒤에 1번 이미지를 넣었다. 그 후에 이미지의 크기를 100vw로 잡고 state 값을 준다. transLocation은 첫번째 이미지를 나타내며 transEffect는 전환 효과의 시간당 속도를 나타낸다.
사진 한장이 넘어갈 때마다 transLocation이 -100(한장 크기)이 되도록했고 이때 전환(transition) 효과가 천천히 시작되어, 천천히 끝나도록 만들어주었다.
setInterval은 일정시간마다 함수를 실행하는 메서드이다. 3초마다 무한슬라이더 함수를 실행하도록하였고 이는 페이지에 들어가자마자 실행되어야하므로 componentDidMount에 써주었다.
clearInterval은 setInterval로 반복하고 있는걸 멈춰준다. 다른페이지에 넘어갔을 때도 실행 될 무한 슬라이더를 멈춰주게하기 위해 컴포넌트가 DOM 상에서 제거될 때에 호출되는 componentWillUnmount에 써주었다.
👉 radio 버튼
이미지 슬라이더에서 또 하나의 고민은 radio버튼이였다.
버튼의 id와 이미지의 id가 같을 때 버튼에 checked가 되도록한다는 개념은 알겠는데 버튼이 따로 배열이 있지않는데 id를 어떻게 부여하지? 하다가 처음에 생각한게 Arrayfrom({length:5})를 통해 undefined 5개의 배열을 map을 통해 돌려서 index를 통해 id값을 돌렸다. 하지만 너무 복잡해지는 느낌이 들었다.
지민님에게 조언을 구한 결과!
onClick을 통해 이미지 배열의 index를 넘겨줘서 currentButton(현재버튼위치) 를 설정해줬다. 이때 이미지 위치도 이 index를 통해 설정해주었다.
그런데❓ 한가지 문제가 있다면 무한슬라이더는 계속해서 움직이기 때문에 내가 버튼을 무한슬라이더가 움직인지 2초뒤에 누르면 내가 누른 버튼의 이미지가 1초만 유지되고 다음 이미지로 넘어가버리는 사태가 발생했다.
그래서❗️ setState가 일어나기 전에 무한슬라이더가 발생하지않도록 clearInterval을 통해 잠시 멈춰주고 setState 이후 다시 무한 슬라이더가 발생하도록 다시 setInterval를 써주었다.
👉 Grid
도현 멘토님의 사랑 Grid를 써보았다.
메인페이지의 신상품, 베스트 상품 파트를 보시자마자 도현 멘토님께서 'grid를 사용해보세요'라고 하셨다. 기존에 알던 flex로 해보겠다고 했다가 도현멘토님과 성훈멘토님께서 오셔서 '왜 grid 안써요!' 하셨...
결국 Grid를 공부해봤고 사용해봤는데 오...좋다! 그동안 썼던 정렬 방법중에 가장 좋았다. 멘토님들이 좋아하실만하다.
How was it?
팀 프로젝트인만큼 좋은 팀을 만날 수 있을까 걱정을 많이했었다. 그런데 내가 왜 그런 걱정을 했지 싶을정도로 너무 좋은 팀을 만나서 하루하루 너무 즐거웠다. 프로젝트하는데 이렇게 행복해도 되는걸까?🤔
우리팀은 1차 프로젝트에서는 소통을 중시하였다. 프론트엔드끼리 그리고 프론트엔드와 백엔드가 서로 어떻게하면 소통을 잘할 수 있을까 고민하고 또 고민했다. 중간발표를 준비하면서 부족했던 부분을 채우기위해 회의록도 쓰기 시작했고 gitbook도 사용했었다. 이를 통해 아무런 문제없이 프로젝트를 마무리지을 수 있었다.
문제의 슬라이더를 구현하면서 동기인 명준님에게 1:1 과외를 받았다.
과외의 흔적(주의: 나만 알아볼 수 있음)
함께해서 위코드를 절실히 깨닫게 해주었다. 팀원들과 명준님 그리고 나를 도와주신 많은 동기분들께 감사함을 전하며 나도 더 많이 성장해서 다른 사람에게 도움이 될 수 있기를 바라며 프로젝트 기록 마무리!
