나의 개발 첫 프로젝트,

개발자 Booooom 시대에 나도 뛰어들어 수많은 비전공자들 중 한명이 되었다.
내가 가질 수 있는 특별성은 무엇인지, 이 직군의 전망은 어떨지, 나에게 정녕 맞는 길인지, 확신은 당연히 부족하다.
진심으로 열심히 하고있고, 내 나름대로 최선을 다하고 있는 것 같은데, 스스로 동기부여해가며 정진해나가고 있지만 중간중간 현타가 온다.

아무튼 큰 기회비용을 들여 내가 선택한 이 곳에서, 어엿한 개발자(준비생)으로써
첫! 프로젝트를 하게 되었다.
당연히 실무는 아니지만, 실무프로세스인 척 개발할 수 있었다.

아주 좋은 경험이었고, 아주 많이 배웠으며, 아주 힘들었다 ^^
2주, 처음, 능력 현저히 부족(나도 팀원도), 회원 상품 주문 결제를 구현해내야 함(당연히 경험 없음)
의 상태에서 덧셈 뺄셈을 이제 배운 우리들이, 미적분으로 교수가 푸는 문제를 푸는 듯한 느낌으로 시작하게 되었다 ㅎ


FE 4명 / BE 2명
우리 팀은 총 6명으로 구성되었다.
팀원들이 다 너무 좋았다.
둥글둥글하고 착하고 존중할 줄 알고, 배려할 줄 알고 ... 내가 제일 나빴던 것 같음 😔

팀 내에서 브랜딩과 프로덕팅을 관리해줄 Product manager와
플젝기간동안 전체적인 일정관리를 해줄 Project manager 를 뽑아야했고,
나는 브랜딩과 마케팅에 흥미가 있어서 Product manager를 자진해서 하게되었다.

우리가 참고할 사이트는, 이솝이였다.
개인적으로 이솝 아주 좋아해서 시작부터 만족과 열정 뿜뿜

📝 기획

우리는 브랜딩부터 시작했다.
어떤 브랜드를 만들 것인지, 어떤 상품을 판매할 것인지, 어떤 서비스를 제공할 것인지
이 브랜딩에 대한 고민과 회의들은,
우리가 어떤 것을 개발할 것인지, 어떻게 개발해나갈 수 있을 것인지에 대해 큰 줄기를 잡아줄 것이다.

PRODUCT	CONCEPT	CORE VALUE	MEANING	TARGET
식물	플랜테리어	식물을 통해 고객들에게 심신의 유익을 선물하자	감각적이고 미학적인 즐거움을 일상에서 누리자	플랜트와 플랜테리어에 관심이 있는 20대 ~ 50대 여성

긴 회의를 거쳐 정리하고 정리한 우리의 브랜딩 🥹
기획하면서 흥미와 열정이 넘쳐서 김칫국 각자 10리터씩 마시고,
추가 구현 기능 엄청 많이 만들어놨지만, 현실에서는 필수 구현 기능도 완벽하게 못 마쳤다고 한다 ^_^ 푸하핫~!

우리 로고 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 넘 예뽀

🖥️ 페이지 구성

회원가입 / 로그인
메인페이지 (헤더, 푸터)
카테고리 모달창
상품 전체 리스트 페이지
상품 상세페이지
장바구니 페이지
주문결제 페이지
결제완료 페이지

👩🏻‍💻🧑🏻‍💻 팀 구현 기능

회원가입 / 로그인

공통 폼 컴포넌트 구현
인풋 애니메이션 기능 구현
실시간 유효성 검사 구현
토큰 로컬스토리지 저장

메인페이지

캐러셀 슬라이드 구현
신상품 리스트 불러오기 기능 구현
메인 이미지 애니메이션 기능 구현
nav 바 로컬스토리지 통해 토큰 유무 확인하여 login / logout 토글 기능 구현

카테고리 모달창

언더라인 애니메이션 구현
페이지 이동 필터 기능 구현

상품 전체리스트 페이지

더보기 기능 구현
탭 메뉴 이동
필터 모달창 통해 검색 기능 구현

상품 상세페이지

상품상세 정보 불러오기
장바구니 버튼 클릭을 통한 상품유무여부 분기 처리
주문하기 버튼 클릭을 통한 일회성 데이터 넘겨주기 (navigate 내 state 사용)

주문 페이지

인풋 애니메이션 기능 구현
상품 정보 불러오기
커스텀 select box 기능 구현

장바구니 페이지

회원 토큰 검증
장바구니 정보 불러오기
선택된 상품 가격 표기
수량 변경 시 가격 변경 기능 구현
장바구니 아이템 삭제 기능 구현

주문완료 페이지

데이터 정보 불러오기

---

우리 팀이 구현한 메인페이지 (솔직히 UI는 너무 예쁨💛)👇🏻
gif 왜 안올라가 ????????????????/ 아오

👩🏻‍💻 내가 한 구현 기능 그리고 어려움

나는 상품상세페이지, 주문결제 페이지, 주문완료 페이지를 맡았다.
React, sass, figma 를 사용했다.

🐥 상품 상세페이지

상품상세 정보 불러오기

• 백엔드와 통신이 필요한 부분. fetch 코드도 잘 이해하지 못했는데 당장 데이터통신을 하려니 막막하고 어려웠던 부분이었으나, 하나하나 확인해보면서 똑딱똑딱 쳐보니 해내긴 했다. 근데 여전히 통신에 관해서는 정리가 안된 상태 ,,, 🤯

장바구니 버튼 클릭을 통한 상품유무여부 분기 처리

• 사이트를 꼼꼼하게 구성하고 싶어서, 상세페이지에 있는 버튼에 여러가지 로직을 걸었다가, 나중에 시간에 좇겨서 단순한 로직으로 바꿨었다. ㅜㅜ
  뭐 예를 들면, 장바구니에 같은 상품이 있을 시, 다른 내용의 모달창을 띄워준다던지,,, 조건에 맞게 다른 페이지로 이동시켜준다던지,,, 실제 쇼핑 페이지에서는 당연한 로직들이지만, 병아리개발자들에게는 그 로직들 조차도 구현하기가 복잡하고 어렵게 느껴졌다. 당연하고 쉬운 로직인데 서로 말로 설명하면서 막 꼬임;;
  대체 다들 개발자 어떻게 되는거야 ... ?

주문하기 버튼 클릭을 통한 일회성 데이터 넘겨주기 (navigate 내 state 사용)

• 주문하기 버튼을 클릭 시, 해당 상품에 대한 데이터를 주문결제 페이지에 곧바로 띄워주는 로직이다. 이 부분은 백엔드와 통신하지 않고, 로컬스토리지 저장으로 넘겨주려고 프론트들끼리 말을 맞췄다. 로컬스토리지 저장해서 뿌려주는 것을 한번도 안해봐서 혼자 구글링해서 똑딱똑딱 구현해냈으나, 좀 더 쉬운 좀 더 효율적인 방법을 울 팀 멘토님께서 알려주셔서 그걸로 완성했다. navigate 내 state 사용으로 일회성 데이터로 넘겨주고 날리는 것이다. (추후 벨로그 정리 예정)

🐥 주문 페이지

인풋 애니메이션 기능 구현

• 회원정보를 적은 인풋창에 들어가는 트랜지션이 있다. 이건 이솝 사이트를 참고하여 만들었는데, 다른 팀원이 로그인 회원가입 페이지 만들면서 이미 구현시켜서 그 부분을 컴포넌트화 시켜서 나도 재활용했다! onFocus, onBlur, transition 사용함!

상품 정보 불러오기

• 장바구니에서 주문페이지로, 상세페이지에서 주문페이지로 갈 때! 데이터를 가져와 뿌려줘야한다. 상세페이지에서 주문페이지로 갈때는 위에서 적었듯, state 를 사용했고, 장바구니에서 주문페이지로 가는 건 끝내 통신하지 못했다. 장바구니 페이지가 미완성 된 것두 있구,, 백엔드가 완성이 덜 돼서 미완성으로 끝났다. 이건 플젝 끝나고 다 통신해보기로 함!

커스텀 select box 기능 구현

• 이거 내가 혼자 구글링해서 구현해냄 ㅜㅜ 완존 듯뿌했다!

<button className="dateSelectBox">{date}</button>
<div className="selectArrow">
<img src="images/order/productDetail_bottom_arrow.png" alt="선택리스트 창 열기 버튼"/>
</div>
  <ul className={`selectDate${dateBox ? ' show' : ''}`}>
    {SELECT_DATE.map(data => {
      return (
       <li key={data.id}>
       <button onClick={() => {setDate(data.date);}}>{data.date}</button>
      </li>
           );
    	})}
  </ul>

보통 select box 는 option 태그를 사용한다.
그러나 셀렉트 박스를 커스텀을 하려면 ul li 태그를 사용해서 직접 스타일을 줘야 한다고 한다.
그래서 li 내 버튼태그를 만들고 mock data 를 넣어서 map 돌렸당
state를 불리언 값으로 관리하고, className 으로 ul을 display none, block 구분을 주었다. ul 내에 스크롤을 추가하고 클릭하면 클릭한 값으로 바뀌고 그 박스는 닫히도록 state 로 관리해주었다 !

🐥 주문완료 페이지

주문결제페이지에서 결제한 상품 데이터 정보를, 주문하기 버튼을 누르면 주문완료페이지에 데이터가 보여지는 것을 통신해야했다.
주문페이지에서 입력한 회원정보가 주문하기 버튼 누를 시, 데이터베이스에 저장돼야 하고, 주문하기버튼 누른 상품과 회원정보가 주문완료 페이지에 보여져야 함.
이것도 최종 통신을 못하였당 ...

🥹 간략한 소감

플젝끝나고 팀원들과 밥먹으면서도 나눈 이야기이지만,
우리의 '하고싶은' 기획이 현실적으로 구현되려면, 그에 맞는 전문성과 기술력이 응당 받쳐줘야 한다. 내가 하고싶은 것은 7이지만, 나의 기술력이 2밖에 안된다면 너무 아쉽고 속상하다. 그리고 당연히 그것은 개발자라고 불릴 수 없다.
나는 개발을 재밌게 하고싶다. 그러려면 내가 하고싶은 것을 구현할 수 있어야 하고, 그러려면 내 전문성과 기술력을 키워서, 최소한 내 아이디어와 생각을 실물로 보여줄 수는 있어야 한다.
우리 팀의 기획력과 팀워크는 아주 좋았으나, 전문성과 기술력이 많이 부족하여 우리가 하고싶었던 기획들을 반도 못해낸게 너무 아쉬웠다.
다행히 이곳은 우리가 배우러 왔으니, + 만 남은 경험이 되었다.
전문성과 기술력 ,,, 그저 키보드와 마우스를 두드릴 수 밖에 - !!! 👩🏻‍💻