DEV101

Team Introduce

GitHub address

https://github.com/sunnysideup0w0v/13-DEV101-frontend

Member

• PM : 구현정
• FE : 구현정, 김보라, 전민승, 함준호
• BE : 김지훈, 박현희

Used Skills (FE)

• ES6 JavaScript
• React with CRA
• Redux (With SupportCreators page)
• Styled Components, SwiperJs, Slick-Slider

Process

• SCRUM, Agile 방식을 통한 클론 코딩 진행
• Trello를 사용해 Backlog 등을 작성, 서로의 진행상황 체크
• 매일 아침 Standup Meeting을 통해 서로 필요한 얘기를 나누고 집중

Team Trello

구현 기능

With. SwiperJs

SwiperJs?

Slick-Slider와 비슷한 슬라이더 오픈라이브러리로 개인적으로 마음의 고향과도 같은 라이브러리이다.

지난 1차 프로젝트 때 라이브러리를 사용하지 않고 코드 구현을 진행했다면, 이번에는 라이브러리를 뜯어서 내가 원하는 결과를 얻어보면 어떨까 하는 생각을 했다.
그렇게 선택한게 바로 SwiperJs로 메인 페이지의 제일 상단 슬라이더 만들기!!!
overflow-hidden 속성이 자동으로 생성되었기 때문에, 해당 부분을 다른 div로 감싸고, 그 div에 overflow-hidden, 원래 있던 div에는 overflow-unset을 사용했다.
이미지가 일정 범위 튀어나와있는 슬라이더를 만들어 볼 수 있었는데, 원하는 progress-bar의 모양이 없어서, css 의 key-frame을 이용했다.

With. IntersectionObserver API

이번 프로젝트에서 가장 뿌듯했던 작업이 무엇이냐! 라고 묻는다면..
바로 이 IntersectionObserver를 더 이상 두려워하지 않게 만들어준 무한 스크롤 작업이었다!
보통 무한스크롤이라고 하면, 자연스레 Scroll 이벤트를 이용해 높이값을 받아온 후, 그 높이값과 스크롤바의 높이의 합이 전체 페이지보다 같거나 커질 경우 API 호출을 불러일으키는 아주 자연스러운 흐름이 생겼을 것이다.
근데..!! 그랬으면 나는 이번 프로젝트에서 가장 뿌듯한 것을 잃어버렸겠지.
API 호출을 한 번만 해야하는데, 호출을 하는 중에도 스크롤바는 최하단에 있기 때문에 계속해서 API 호출을 진행했다. 말 그대로 스택오버플로우..
API호출이 진행되면 스테이트를 변경하는 것도 해보았지만 왜인지 무용지물이었다.

그러다가 알게된게 IntersectionObserver였는데, 브라우저 창에서 observer가 관찰되면 callback으로 지정해둔 함수를 실행시키는 API였다.
callback을 딱 그 순간 한 번 실행시키기 때문에 무한으로 실행시키지도 않았고, 덕분에 매우 편리하게ㅠㅠㅠ 무한스크롤을 완성할 수 있었다.

Card Component

가장 공통으로 쓰였던 카드 컴포넌트를 제작했다.
백엔드 API로 받는 결과 배열 엘리먼트의 is_open의 boolean을 비교해 오픈 예정 클래스의 경우 가격 정보 대신에 응원하기라는 버튼을 보여줄 수 있도록 코드를 작성했다.
컴포넌트를 재활용 할 때 늘 비슷한 기능을 가지거나, 같은 모양을 가진 요소만 이용했었다. 이번에는 좀 더 벗어나 기능도 다르게 작동하게 추가하고, 비슷한듯 다른 모습을 가진 카드가 될 수 있게 정리했다.
생각보다 간단하게? 그렇지만 복잡하게 정리가 됐고, 생각보다 더 뿌듯했던 작업이었다.

Cheer Modal

생각보다 재미있던 작업, 응원하기 카드 컴포넌트를 클릭했을 때 클래스 소개 모달!
카드 컴포넌트의 응원하기 버튼이 눌릴 경우 응원하기 api가 호출되지만,
그 외 영역이 클릭되었을 경우에는 모달창이 열리도록 제작했다.
인덱스의 위치에 따라 pagination에도 색상이 변경되고, < > 모양의 버튼 뿐만 아니라 pagination으로도 index의 위치가 변경되게 작성했다.
깜빡하고 index의 범위를 정해두지 못했다는게...... 너무 제일.. 어이없었다.
modal에 존재하는 버튼을 클릭하면 카드 컴포넌트에 등록했던 버튼과 동일한 기능을 하도록 작성했다.

Category Page

동적 라우팅을 배운 이후로! 처음! 만들어봤던!!! 페이지!!
그 전엔 그저 막연하게 생각했는데, 한 번 작성해보고나니 그냥 별거없네!! 하게 되었다.
동적 라우팅 변수 부분을 id로 설정했었는데, id값에 따라
상단 배너의 이미지와 문구가 변경되도록 작성하고, 내부에 존재하는 카테고리 배너를 클릭할 경우 해당 카테고리를 검색했을 경우와 같은 결과페이지로 연결되게 했다. (Feat. 보라보라 보라님 고마워요❤❤❤)
아마 이 페이지는 내 기억에 굉장히 오래 남을 것 같다.
왜냐면.... 페이지가 메인에 머지되는 걸 보고 아무생각없이 끄덕끄덕 하고 발표 전 날 확인했는데, 페이지가 보이질 않았다.
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 페이지가 증발했습니다 짜라란!
지금 생각해보면 브랜치라도 한 번 확인할걸 하고 생각했지만,
그 때에는 당연하게 없을거라고 생각하고 다시 만들어야한다!!! 라는 생각이 강했다.
30분인가.. 좀 더였나.. 반복되는 컴포넌트도 많았고, 미리 만들어둔 컴포넌트를 재활용하는 페이지였기 때문에 후다닥 작업했었다.
페이지 자체는 메인과 비슷했다 :) 배너 + 무한스크롤.

잘한것, 아쉬운 것

잘한 점

최대한 내 일에만 집중하지 않고, 주위를 살피려 노력했었다.
다른 팀원들은 잘 하고 있는지, 힘들어 하지는 않은지, 그렇다면 그 순간 내가 해야할 것은 무엇인지.
무리해서 많은 것을 해내는 것 보다, 하나를 하더라도 서로 그 하나를 다 이해하고 넘어갈 수 있도록 최대한 재촉하지 않고 싶었고 느리다는 이유로 해야 할 일을 뺏어오고 싶지도 않았다.
오히려 이렇게 했던게 다른 분들이 더 열심히 하게 되는 계기가 되지 않았을까 하는 생각이 들기도 하는데.. 이건 나만의 의견이라 또 다를 수도 있겠다 :)

라이브러리를 뜯어보기도 하고, 처음 써보는 메소드를 써보기도 하고!
더 이상 새로 하는 것들이 두렵지 않게 되었다 라는 점에서 이번 2차 프로젝트는 엄청난 의미를 가지게 되었다는 생각이 들었다. 어떻게든 공식 문서를 뒤지고, 스택오버플로우를 찾고, 유튜브 강좌를 찾으니 없는게 없는 인터넷이었다.
내가 하는 고민은 남도 하고, 내가 내는 에러는 남도 낸다.ㅋㅋㅋㅋㅋ

아쉬운 점

어떻게 해야 컴포넌트를 더 효율적으로 관리할 수 있는지에 대한 부분이 많이 아쉬웠다.
기능과 핸들러를 분리시켜두다보니 다른 사람이 해당 컴포넌트를 사용할 때 수정을 거듭해야하는 부분이 발생했는데, 그런 부분들에 대한 생각이 부족했던게 아닐까..
사이드 프로젝트나 다른 프로젝트를 진행하게 될 때에는 그런 부분들에 대한 고려도 꼭 같이 해봐야겠다.

To. Dev101

지훈님! ㅋㅋㅋㅋㅋ저희 일거리 던져주는 듀오.. 잊지 못할 것입니다.
늘 프론트의 편의에 맞춰주려 하셨었어서 감사했어요. 이제 와서 돌아보니.. 너무 백엔드에만 일이 몰린걸까? 하는 걱정도 드네요ㅠㅠ
서로 은근히 웃음 코드가 맞아서 개발 이야기에서도, 그냥 일상 이야기에서도 늘 즐거웠어요. 또 같이 프로젝트 하게 되면 그 때에도 열심히 일거리를 드리겠습니다!ㅋㅋㅋㅋ

그리고 보라님! 보라님께서 마이페이지와 검색결과 페이지를 맡아주셨는데, 본인의 일이 다 끝나셨었는데도 자꾸 혹시 제가 더 할 수 있는 일이 없을까요? 현정님이 하시는 일들 중 작은거라도 제게 넘겨주세요! 하면서 적극적으로 도와주시려는 모습이 아직도 눈에 선하다ㅠㅠ 착한 보라보라님 잊지 못 할 거에요. 잘 하고 계시니까 너무 주눅들지 않고, 자신감 갖고 우리 앞으로도 더 성장해요!!!

지난 1차 프로젝트에서도 같은 팀이었는데, 이번에도 같은 팀이 되었던 현희님!
제 정신적 힐링을 담당해준 우리 현희님 :) 발표 직전 열심히 수정하면서 서로 맞춰나가고 있으니 진짜 PM 같아요! 라고 해주신 말씀이 잊히질 않아요.
회의 때에도 늘 적극적으로 이야기해주시고, 말씀주셔서 회의 시간이 너무 알찼어요.
현희님과 1차, 2차 모두 같은 팀이었어서 백엔드가 참 든든했던 기간들이었답니다!!

뜬금없는 말들과 가끔 나오는 유머 본능으로 힘든 와중에도 즐겁게 해주셨던 민승님!
소셜 로그인 페이지가 정말 어려웠을텐데, 묵묵히 꾸준히 해주시고 결국 성공까지!! 늘 대단하다고 생각하고 있어요 :) 지칠 때를 어떻게 그렇게 찰떡같이 캐치해서 와주시는지ㅋㅋㅋㅋㅋ 늘 수고했다, 고생했다 하고 말씀해주셔서 감사해요. 협업도 같이 즐겁게 해요!!!

아마 저희 프론트 중에 가장 많은 페이지를 담당해주시지 않았을까 싶은 준호님! 넘 고생 많이 하셨어요. 2차 프로젝트 너무 고생하셨구, 협업도 재미있게 다녀오세요!! 제가 가고싶었던 회사였던 만큼 배로 열심히 해주시기ㅋㅋㅋ

To. MySelf

2차 프로젝트, 그 2주간 너무너무 고생했어.
처음 하는 PM이고 리더라서 부담감도 있었고, 백엔드와의 소통도 걱정했지만 결국 잘 끝났고 이만큼 결과물을 만들어냈으니 이제 부담감은 덜고 협업에 집중하자.
부족한 점은 채우면 되고, 잘 하는건 더 잘하게 하자.
나를 믿고, 나와 내 팀원들을 믿고 끝까지 열심히 하고 포기하지 않는 개발자가 되자.