3주 차 다섯 번째 과제(22.02.14 ~ 22.02.16) TIL

프리온 보딩에서는 과제마다 각 기업이 요구하는 기술을 바탕으로 과제를 진행하는 방식입니다.

 

다섯 번째 과제 땅콩 스쿨 페이지 만들기

땅콩 스쿨의 어플 홍보 및 회사 홍보 페이지를 만들었습니다.

 

배포 깃 허브 링크 

https://github.com/Gilpop8663/05_01_peanutSchool

GitHub - Gilpop8663/05_01_peanutSchool: 원티드 프론트앤드 프리온보딩 2기 14팀 땅콩스쿨 페이지 프로젝트

 

기능 구현 (맡았던 부분)

 

슬라이드 쇼

• 슬라이드가 5초 간격으로 한 장씩 자동으로 넘어가고 슬라이드를 사용자가 이용하였을 때 시간이 초기화되고 다시 5초 뒤에 자동으로 넘어가게 하였다.
• 슬라이드 페이지가 넘어갈 때 가운데 로고가 로테이트 되게 하였다.
• 슬라이드 페이지가 넘어갈 때 텍스트와 작성자 이미지가 바뀌게 나타난다.
• 슬라이드가 작동 중일 때 중복하여서 클릭이 되지 않게 하였다.
• 슬라이드 밑에 노란색 Bar을 만들어서 순서를 알 수 있게 애니메이션으로 표시되게 하였다.

 

 

정리 및 회고

새로 알게 된 점

• cypress를 이용한 e2e 테스트에 대해서 알게 되었습니다. (E2E(End to End) 테스트는 개발물을 사용자 관점에서 테스트하는 방법입니다.

 

• CRA로 프로젝트를 하다가 NEXT로 처음 프로젝트 진행해보았는 데 생각보다 어렵지 않았고 리액트와 비슷한 면이 많고 API를 사용하는 프로젝트가 아니다 보니 쉽게 도입할 수 있었던 것 같습니다.

 

• 피그마를 두 번째 사용해보는 데 실제 디자이너분들이 이렇게 주시면 사이트를 만드는 것이구나 하는 것을 이미 만들어진 사이트를 보고 또 한 번 느끼고 작업하면서도 어떻게 협업하면 되는지에 대해 알 수 있었습니다.

 

힘들었던 점 / 해결과 극복 방법

• 이번에 슬라이드 애니메이션 쪽을 맡게 되었는데 한번 해보았던 것이라서 쉬울 줄 알았으나 동작하는 애니메이션들이 한 번에 꽤나 있어서 어떻게 해야 할지 고민이 되었었고 특히 사용자가 클릭하였을 때 자동으로 넘어가는 슬라이드의 시간을 초기화시키고 사용자가 클릭을 멈추면 다시 시간이 작동되는  부분에 대해 고민이 많았었습니다. 결국 스스로 해결하진 못하였지만 구글 검색을 통해서 어떻게 해결하면 좋은지에 대해 알게 되었습니다.

 

• 이번 프로젝트에  스크롤이 위로 움직일 때와 아래로 움직일 때의 이벤트가 각각 달랐었는데 이것을 어떻게 해야 할지 고민을 하다가 react-intersection-observer이라는 기존의 javasript에 있는 기능인데 좀 더 사용하기 편하게 나온 라이브러리를 사용하여서 해결을 해보려고 했지만 애니메이션이 제 뜻대로 되지 않는 것을 보고 애니메이션이 만만하지 않구나 라는 것을 느꼈고 나중에 회사에서 디자이너분들이 요구하는 것을 할 수 있냐 없냐를 미리 소통하여 팀원들과 이야기하여 해결방법을 찾아야겠다고 느꼈습니다.

 

• 슬라이드에서 작업을 하면서 css에서 양쪽 화살표를 width 값을 줘서 space-between을 하였었는데 팀원분들이 position :relative, left: % 와 같은 형태로 하는 것이 화살표가 고정되어 있지 않고 반응형으로 만드는데 좋다고 하였었어서 해결하였었습니다.