2차 프로젝트 회고:: Get Super Fluid 클론 프로젝트

재미있는 UIUX를 보여주었던 웹사이트 get super fluid💘

2차 프로젝트:: GetSuperFluid 웹사이트 클로닝 후기

 

1. 프로젝트 소개

---

 

 

 

1) 주제👆🏻

• 감각적인 UIUX로 웹사이트 어워즈 수상을 받았으며 뚜렷한 가치와 철학을 가진 이탈리아 화장품 웹사이트를 클로닝한 프로젝트💄
• React.js와 Django, Git, Trello로 협업하여 이루어진 팀 프로젝트

 

2) 개발인원 (프론트 3명, 백엔드 2명)

• 프론트 3명 (김신영, 박예진, 최운정)
• 백엔드 2명 (안   솔, 황수미)

 

3) 개발기간 

• 2020.08.03(월) ~ 2020.08.14(금)  약 2주 / 총 12일

 

2. 사용된 기술

---

1) 프론트엔드 👩🏻‍💻(처음 이용한 기술들)

• JavaScript (ES6)
• React.JS (Hooks)
• React-Router
• React-Slick
• React-scroll-rotate
• React-rellax (Parallax 라이브러리)
• Styled-Component

 

2) 백엔드 👩🏻‍💻

• Python, Django web framework
• Bcrypt
• jwt
• MySQL
• AWS EC2, RDS
• CORS headers

 

3) 협업 툴 🛠(클릭 시 사이트로 이동합니다 )

• Git, Github
• Trello
• Postman

 

4) 개발 방법론

• Agile 방법론 ➿

 

 

3. 사이트 주요 기능

---

직접 구현한 기능은 ✅, 팀원이 구현한 기능은 ✔️로 표시했다.

 

1) 회원가입, 로그인 페이지

✔️로그인 기능 (id, pw 조건 구현) (Session Storage)

✔️소셜로그인 기능 (카카오톡)

✔️회원가입 기능 

 

2) 메인페이지

✅Carousel 기능(Slick.js, CSS)

✅fetch함수 이용한 카테고리별 제품 필터기능 구현

✅react-scroll-rotate 라이브러리 이용한 스크롤에 따른 rotate 움직임 구현

✅Parallax(움직임이나 동작 시간을 스크롤에 따라 다르게 주어 입체적으로 표현하는 기법) 구현.

✅무한루프 텍스트 애니메이션

✅로딩 화면 구현

 

3) 상품 리스트 페이지

✔️transform, animation등을 이용한 다양한 호버 애니메이션기능이 추가된 상품 컴포넌트 구현

✔️category 필터 리스트 구현

✔️category 이중 필터 기능 구현

✔️sticky 기법으로 재미있는 ui 구현

✅로딩 화면 구현

 

4) 상세 페이지

✔️sticky 기법으로 재미있는 ui 구현

✔️Parallax(움직임이나 동작 시간을 스크롤에 따라 다르게 주어 입체적으로 표현하는 기법) 구현.

✔️제품 색상에 따라 각 제품 페이지로 이동 및 ui 변화 기능 구현

✔️Carousel 기능(Slick.js, CSS)

✔️제품 수량 장바구니 담기 기능 구현

✔️백엔드와 통신하여 현재 페이지의 제품과 어울리는 추천 제품 기능구현

 

5) 장바구니 및 오더페이지

✅fetch 함수 이용하여 삭제, 수량조절 기능 백엔드와 통신

✅수량에 따른 총 금액 및 개수 렌더 구현

✅총 금액에 따른 금액 게이지 변화

✅fetch 함수로 백엔드와 통신하여 장바구니 외의 추천 상품 기능 구현

✅주문한 상품 오더페이지로 이동 기능 구현

 

 

4. 기억하고 싶은 코드

---

1) parallax 기법 [이후 추가]

 

2) 장바구니 기능 [이후 추가]

 

 

5. 기록하고 싶은 에피소드

---

1) hooks, styled-component와의 만남

 

1차 프로젝트에서는 리엑트 생명주기의 흐름을 알기 위해 class형 컴포넌트를 사용했었다.

이번 2차 프로젝트에서는 class를 작성할 필요없이 state값과 여러 react 기능들을 이용할 수 있는 hooks를 사용하였다. 

hooks를 이용하니 생명주기 메서드를 각각 state에 따라, 분리해서 사용할 수 있는 점이 편리하였고 매력적이었다. 

또한 styled-component에서는 특히나 css 요소가 많았던 이번 프로젝트 웹사이트에서 매우 편리함을 느꼈다. 

 

총 금액이 30유로이기에 무료배송금액 39유로 퍼센트 비율에 따라 길이가 조절되는 게이지바 UI

가장 기억에 남는 편리함은 state에 저장된 총 수량 가격에 따라 무료배송가능 게이지 변화 기능을 구현할 때였다.

state에 저장된 총 수량 가격 숫자를 게이지 div width값에 가져와서 percent 로 width값의 변화를 주어 위와 같은 UI를 구현 할 수 있었다.

 

 

2) 잘한 점 💁🏻‍♀️

 

2-1. 다양한 css 기법 활용

이번 프로젝트를 통해 다양한 css 기법을 활용해 볼 수 있었다. 스크롤에 따라 유저가 느끼기에 재미있고 다양한 효과들을 주기 위해 다양한 기법들이 있다는 것을 배우게 되었다. parallax, scroll-rotate, 애니메이션 등 재미있는 효과들을 배우고 활용해 볼 수 있어 좋았다.

사실 1차 프로젝트 때 사이드바 드롭다운 구현을 2개나 했음에도 정확한 애니메이션의 원리를 이해하지 못하고 있었는데, 

이번에 장바구니 사이드바 드롭다운을 하면서 'animation 효과에 대해 제대로 이해하고 넘어가보자' 라는 생각으로 공부하면서 

1차 때 부족했던 부분을 채울 수 있었던 것 같아 좋았다.

 

2-2. 1차 때보다 밀접했던 백엔드와의 소통

2차 프로젝트에서 project manager 역할을 맡으며 백엔드와 프론트 간의 협업을 위해 백엔드와 소통할 일이 비교적 많았던 것 같다.

항상 느끼는 것이지만 "넘치는 소통이 덜한 소통보다 낫다" 

백엔드와 더 많이 소통하게 되면서 그동안 프로젝트를 프론트 입장에서 주로 보았다면, 백엔드 입장에서도 볼 수 있는 경험이었다. 

프론트에서는 그냥 렌더링하면 되었던 제품의 이름이 백엔드에서 보기에는 각 제품 군 별로 그룹화 되어 있는 이름이었다. 

'이래서 소통이 중요하구나' 라는 것을 이번 프로젝트에서도 다시 한 번 깨달았다.

완성도 높은  프로젝트를 위해서 백엔드와 원활히 소통할 수 있는 프론트개발자가 되었으면 좋겠다. 

 

 

3) 아쉬운 점 🙇🏻‍♀️

 

3-1. 반응형

이번에 메인페이지를 담당해서 구현하다보니 화면의 크기에 따라 조금씩 위치가 달라지는 모양이 눈에 거슬려 미디어쿼리를 이용해서 최대한 반응형으로 만들어 보려고 노력했다. 하지만 2주라는 제한된 시간으로 기능구현에 더 집중하기 위해 만족스럽게 반응형을 만들어보지 못했던 점이 아쉬웠다. 차후에 리팩토링을 하면서 반응형으로 홈페이지를 제대로 구현해 완성도를 높여보고 싶다.

 

 

3-2. 데이터시각화

개인적으로 데이터 시각화에 대해 관심이 있다. 이전에도 ppt를 이용해 데이터를 보기 좋게 보여주는 것에 흥미가 높았기에 이번에 '데이터 시각화'와 관련된 프로젝트에 배정받아도 재미있을 것 같다는 생각을 했었다. 그러나 이번 프로젝트는 성격상 다양한 css를 경험해 볼 수 있는 시간이었다. 그래서 이후에 시간을 들여 데이터 시각화를 공부하고 관련된 사이드 프로젝트를 해보고 싶다.