TIL_61_2차 프로젝트 후기

어느새 2차 프로젝트가 끝이 났다고..?

1차 프로젝트 마무리도 얼떨떨한데.. 2차프로젝트 후기를 써야할 때가 오다니. 위코드에서의 시간은 정말 순식간이구나.. 싶다.

이번에 맡은 사이트는 한정판 스니커즈 또는 옷을 거래할 수 있는 사이트 'KREAM'이다.

• 프론트엔드: 재욱님, 담호님, 그리고 나.
• 백엔드: 정원님, 규동님 이렇게 총 5명이 진행하게 되었다.

1차 프로젝트 때와는 다르게 2차 프로젝트에서는 styled component 와 Hooks 그리고 git rebase를 배워서 적용해야하다보니 시간이 더 걸렸고, 기업협업 진행을 위해 이력서를 작성하고 기업협업 팀이 정해지다보니 좀 더 어수선한 마음과 부족한 시간으로 진행이 되었다. 그래서 처음부터 욕심내지말고 한 페이지씩 맡아서 적용해 보고 싶었던 기술이나 기능을 구현해보자! 를 모토로 이어나갔다.

내가 맡았던 회원가입/ 로그인 페이지

• 아이디와 비밀번호 형식이 부합할 때까지 빨간 문자 경고가 뜨도록 구현.
• 호버 효과를 통해 인풋창에 마우스가 닿으면 밑줄이 뜨도록 구현.
• 스니커즈 사이즈 선택 모달창 구현.
• 모달창에서 사이즈를 선택할 시 데이터가 전달되도록 구현.
• 체크박스 구현.
• 백엔드와 api 통신을 통해, 이메일과 비밀번호 형식이 부합하지 않으면 회원가입이 불가능하도록 구현.
• 백엔드와 api 통신을 통해, 회원가입 성공 시 회원가입 성공 alert 창이 뜨며 메인페이지로 이동하도록 구현.
• 조건이 부합할 경우 회원가입 버튼 활성화.

• 카카오톡 소셜 로그인 기능 구현. (네이버 버튼으로 되어있지만 카카오톡 로그인임 ㅎ)
• 회원가입과 마찬가지로 조건이 부합할 경우 빨간 문자 경고가 사라지도록 구현.
• 조건이 부합할 경우 로그인 버튼 활성화
• 이메일 가입을 누를 시 회원가입 페이지로 이동.
• 인풋창에 마우스가 닿을 시 밑줄이 뜨도록 호버효과를 삽입.
• 백엔드 api 통신을 통해, 아이디 또는 비밀번호 형식이 부합하지 않으면 경고창이 뜨도록 구현.
• 백엔드 api 통신을 통해, 로그인 성공 시 alert 창이 뜨면서 메인페이지로 이동.

여기서 아쉬운 점?
-- 재사용 컴퍼넌트를 제대로 활용하지 못한 점.
-- 크림 사이트 처럼 인풋창을 클릭했을 시, 밑줄이 뜨도록 하고 인풋창에 어떤 값이 입력된 시점부터 빨간문자 경고가 뜨다가 조건이 부합하면 빨간글자가 사라지도록 구현하고 싶었는데 결국 쉬운길을 선택하여 마무리 한 점.
-- 체크박스 두 개 중에 필수 체크박스에 체크를 해야만 버튼이 활성화되도록 하고싶었는데 이 기능도 구현해내지 못해서 아쉬운 점으로 남는다.

검색 모달창과 재욱님이 구현하신 제품 상세페이지.

<내가 구현한 부분>

• 네브 바의 인풋창을 클릭하면 검색 모달창이 뜨도록 구현.
• 네브 바에 픽스 스타일을 지정해, 고정이 되도록 구현.
• SHOP을 누르면 메인 페이지 (SHOP 페이지)로 이동, 로그인을 누르면 로그인 페이지로 이동되도록 구현.
• 검색 모달창의 우리 팀원들의 이미지는 목데이타를 활용하였다.
• 이미지에 호버효과를 삽입해 애니메이션과 같은 효과를 줌.
• 백엔드와 api 통신을 통해 10개의 데이터를 fetch.
  (query 파라미터를 사용)
• 10개씩 나열된 데이터 중 이미지를 누르면 해당 제품 상세페이지로 넘어가도록 구현.

<재욱님의 제품 상세페이지>

• 모든 모달창을 재사용 컴퍼넌트로 활용.
• 차트.js 라이브러리 활용.
• 화면 스크롤 시, 모든 내용이 보이고 나서 스크롤이 됨.
• 사이즈마다 다르게 할당된 가격을 적용.

여기서 아쉬운 점?
-- 로그인 시, 네브바의 로그인이 로그아웃으로 바뀌고 마이페이지 버튼이 생성되는데 구현해내지 못했다.
-- 화면 크기에 따라 바뀌는 반응형 미디어 쿼리를 도전하고 싶었으나 해내지 못했다.
-- 검색한 내용이 저장되고 삭제되는 기능을 구현해내지 못했다.
-- 검색 모달창 인풋창에서 엔터를 치면 SHOP 페이지로 이동하고 싶었으나 이 부분도 구현해내지 못했다.

담호님이 구현하신 메인이자, SHOP 페이지

• 제품이 인기순, 가격순 등으로 나열되도록 구현.
• 페이지네이션을 통해 더보기를 눌렀을 때 데이터 20개씩 fetch.
• 사이즈 선택 모달창에 사이즈 선택 시 데이터를 전달 받아 북마크가 활성화되도록 구현.

얻은 것?

백엔드와 통신을 해본 이전의 경험으로 인해 소통의 어려움을 크게 느끼지 못했다! 로그인/ 회원가입 그리고 검색 모달창 페이지를 맡게 된 순간부터 어떤 식으로 통신을 하면 되는지 그 구조가 바로 파악이 됐다. 그리고 배려심과 이해심으로 똘똘 뭉친 멋진 팀원들 덕분에 프로젝트 기간 내내 넘 행복했다! 기능 구현에 어려움을 느낄 때마다 조언을 해주던 프론트엔드 팀원들과 api 통신을 주고 받을 때 오류가 생기면 천천히 기다려주시고 문제점을 같이 찾아주던 백엔드 팀원들! 잊지못할 소중한 추억을 얻었다. 함께 하고싶은 개발자로 거듭나신 분들!!🤗

깃 리베이스를 통해 커밋이 하나만 남겨져있따! 넘나 깔끔.
깃 명령어 사용하는거 넘 재밌어오..

우리팀의 트렐로~~ 요청하기도 전에 먼저 모델링 첨부해주시고 키값도 미리 올려놔주시고 먼저 착 착 알아서 떠먹여주던 백엔드 분들🤗 최고!!

나는 레벨 업이 하고싶다, 이번 프로젝트는 내 스스로의 역량을 제대로 넓히지 못한 것이 가장 큰 아쉬움으로 남는다. 할 수 있는데 이 핑계 저 핑계 대면서 여유를 부렸고 스스로와 합의를 했다. 개발자는 새로운 것에 두려움을 느끼면 안된다고 했다. (암튼 누가 그랬다.) 준식님은 개발자로서의 마인드 셋이 중요하다고 했다. 나는 내게 익숙한 클래스 컴퍼넌트를 고수했고, 재사용 컴퍼넌트를 사용할 수 있음에도, 반응형을 구현할 수 있음에도 미뤘고 하지 않았다. 결국 개발자로서의 마인드 셋도 실패한 셈이다. 도전할 수 있음에도 머리를 싸매는 과정이 싫어서 쉬운 길을 택했다. 결과는 어떻게든 있어보이게 포장할 수 있지만, 코드로는 다 드러난다. 이번 회고를 통하여 같은 실수를 반복하는 사람이 되지 않겠다고 다시 한번 다짐해본다.