Finally, 2차 프로젝트가 끝났다!!! 정말 지난 한달간 매일 새벽까지 코딩, 충돌 해결, 프로젝트 기획하며 힘든 한달이었지만 정말 평생 기억에 남을꺼 같다✌🏻

👨🏻‍💻 About Project

• User가 원하는 수업/강의를 업로드하고 customize할 수 있는 사이트를 기획 및 개발 (Class 101을 모티브로 함)

Team Members

• Front End: 김도은, 하연주, 조원영
• Back End: 신승호, 김현수, 최우석

Tech Stack

• For Development: React Hooks, JavaScript, Styled Components
• For Communication: Github, Trello, Slack, Google Drive

My Responsibilities

• Card Components, Class List, Pagination, Kakao Social Login

Project Architecture

팀이랑 처음에 사이트 기획을 할 때 일반적인 커머스 사이트보다 더 새로운 사이트를 기획하자고 얘기 했었다. 그래서 유저 중심적인 사이트를 기획하게 됐고 Class 101에 있는 create my class 기능을 꼭 기획에 추가하기로 했다.

그리고 1차때 해보지 못한 모바일 반응형도 구현하기로 했다! 물론 우리팀 에이스 갓도은님이 혼자서 다했다 😂

My Assigned Parts

팀원들 모두 1차 프로젝트때 안해 본 기능 구현을 해보는게 가장 큰 목정이여서 나는 개인적으로 해보지 않았던 소셜 로그인 기능, 페이지네이션, 카드 컴포넌트, 그리고 슬라이더 기능을 맡기로 했다.

소셜 로그인 기능 구현을 하면서 처음 접해봤던 kakao login api 😝 한번도 해보지 않았던 기능 구현이라 하루종일 구글링을 했었다... 처음에 코드를 작성하고도 저 카카오 로그인 창이 안떠서 왜 안뜨지를 엄청 고민했었다 😂

하지만 내 코드에 문제가 있어서 로그인 창이 안떴었던거고 Kakao.Auth.login이라는 메서드를 쓰면 창이 잘 뜨는걸 코드 수정 후 알 수있었다!

프로젝트를 하면서 제일 어려웠던 페이지네이션 기능 😱 진짜 첫 주말을 통째로 날려 먹었었다. 어려웠던 이유가 일단 한 페이지에 나오는 데이터를 12개로 끊고 또 그걸 5페이지만 일단 보여준 후 오랜지 버튼이 중간에 오게 하게 하는것이 넘 어려웠다 😥

페이지를 계속 넘기더라도 오랜지 버튼은 중간에 fix된다.

한 페이지에 12씩 담을 수 없게 되면 밑에 보이는 페이지 수가 데이터에 맞게 줄어든다.

이제 코드를 살펴보자!

한 페이지에 12씩 렌더되게 잡아 준 후 페이지 인덱스 로직을 생각해 배열을 슬라이스 해준다. 어차피 Back end에서 받는 데이터는 객체안에 배열이기 때문에!

1. 첫번째로 빈배열을 만들고 데이터가 들어오면 페이지가 계속 생성되게 함수를 작성 해준다.
2. 데이터가 들어온 배열에 레인지를 잡아준다.
3. 왼쪽 버튼이 클릭 됐을때 현재 페이지가 1보다 크면 오랜지 버튼에 -1을 해준다.
4. 그리고 버튼에 오랜지 버튼을 setCurrentPage 로 잡아준다.
5. 오른쪽 버튼이 클릭 됐을때 현재 페이지가 토탈 페이지 length+1 보다 작으면 오랜지 버튼에 +1을 해준다.

📍 Reflection

1차 프로젝트때도 그랬지만 2차 프로젝트도 결국엔 너무나도 좋은 팀원들 때문에 무사히 마무리 할 수 있었던거 같다. 솔직히 1차 프로젝트때 너무 체력을 불태워 버려서 2차 프로젝트 첫주차때 의욕이 많이 떨어진 상태였다. 게다가 새로운 기술 스택 (React Hooks, Styled Components, 기타 다양한 library들)을 배워야 했기 때문에 1주차때는 제대로된 코딩을 아마 수~목요일은 되서야 칠 수 있었기 때문에 과연 우리가 프로젝트를 잘 끝낼수 있을까라는 생각이 많이 들었었다.

(1주차때보다 캐쥬얼 했던 daily status 미팅 👍🏻)

하지만 첫주차 주말때부터 제대로 정신을 차리고 첫주말에 상당한 부분들을 끝낼 수 있었다 😂 정말 요번 프로젝트는 팀원들이 아니였다면 절대로 끝내지 못했을꺼 같다는 생각이 많이 들었고 이래서 스타트업에서 채용할때 제일 중요시 하는것이 이 사람의 성격과 적응력 그리고 팀원들과 잘 녹아들 수 있는지를 왜 보는지 제대로 알 수 있게 됐다!

(항상 프로젝트 전날에는 로그인이 말썽이네 🤦🏻)

🎉정말 너무너무 즐거운 2주였고 1차때와 다르게 또 많이 성장한거 같아서 기분이 너무 뿌듯함과 동시에 이제 위코드에서 더 이상 팀 프로젝트가 없다는것이 기분을 뒤숭숭하게 했다! 다들 기업협업 나가서 잘 했으면 좋겠고 위코드가 끝난 후에 기회가 되면 실제 개발자로 프로젝트를 해보고 싶다! 💥