[2020-12-16] 프로젝트 후기, SUPERFLUID(해외 뷰티 쇼핑몰)

전민승·2020년 12월 16일
1

🙋‍♂️ 프로젝트 소개

Superfluid는 화장품 커머스 사이트에요. 선택한 이유는 홈페이지의 UI가 화려하고 매력적으로 느껴졌어요. CSS를 숙달하지 못해서 어려워 했는데 이번 기회를 통해 발전하고 싶어서 선택한 프로젝트에요. 저를 포함한 6명의 팀원들과 SuperCool 사이트를 제작했어요.

🗓 프로젝트 기간

2020.10.19 ~ 10.30 (11일)

👨‍👧‍👧 애정하는 팀원

FrontEnd (4명)

  • 김보현
  • 전민승(나)
  • 정양효
  • 최하늘

BackEnd (2명)

  • 박재용
  • 허소정

🎬 데모 영상

🎨 기술 스택

개발도구

  • HTML, Sass/Scss
  • JavaScript(ES6+)
  • React, Class
  • CRA

협업 도구

  • Git & Github 는 개발자의 필수 도구!!
  • Git 협업 경험!!
  • Trello 로 전체적인 일정 관리와 팀원들의 작업 현황을 파악했어요.

🎨 내가 담당한 Page

메인 페이지

컴포넌트 재사용과 fetch 함수

  componentDidMount() {
    fetch("http://10.58.7.186:8000/shop")
      .then(res => res.json())
      .then(res => {
        this.setState({
          product_list: res.product_list
        });
      });
  }
  1. Lifecycle 함수인 componentDidMount를 사용해서 컴포넌트를 재사용 했어요. 또한, fetch 함수를 사용하여 API를 받아 데이터를 사용하는 경험을 했어요. api로 받은 데이터를 json 형식으로 변경하고 setState 함수를 사용해서 데이터를 변경했어요. 필요한 데이터를 사용하여 Backend 데이터에 대한 친숙함을 키웠어요.

Slick 라이브러리

  1. Slick 라이브러리를 사용하여 화면의 UI 효과를 효율적으로 적용했어요. 기간 내에 하기 위하여 라이브러리를 사용하여 개발 속도가 향상됨을 경험했어요. 반면, 자바스크립트 학습을 위해서는 추후에 바닐라 자바스크립트로 만들어 보려고 해요.

🎨 좋았던 점

분위기가 정말 좋았어요. 서로 서로 같이 일 하고 싶은 개발자라며 칭찬하며 으쌰으쌰했던 분위기 였어요.

가장 좋았던 부분은 서로가 기술 수준은 비슷했고 성향은 잘 맞았기에 각자 임무에서 블로킹 된 부분을 함께 머리를 맞대고 고민하여 해결했어요.

이 과정에서 개발자는 커뮤니케이션이 중요하다고 배웠어요. 또한, 일 보다 먼저 사람 대 사람으로 소통을 잘 하면 일도 재미있게 느껴졌어요.

🎨 아쉬운 점

기능적으로 구현을 충분하게 하지 못한점이 아쉬웠어요. 부족한 CSS를 키우고자 도전한 이번 프로젝트에서의 CSS 수준은 체감상 굉장히 어려웠어요. 그래서 담당했던 메인 페이지의 애니메이션 효과에 많은 시간을 투자했어요.

장바구니 부분을 구현하는 와중에서 Redux의 필요성을 느꼈어요. 빠른 시일 내에 Redux를 사용하여 장바구니를 완성할 것을 스스로에게 약속할게요.

🎨 프로젝트 소감

제대로 된 프로젝트와 팀 협업을 처음 경험했어요. 행복하게도 성향이 잘 맞는 팀원들을 만나서 정말 재미있게 했어요. 개발자는 코딩 기술과 사람 그 자체를 계속 발전시켜야 하는 직업임을 생각하게 되었어요. 욕심을 내어 누구나 함께 하고 싶은 개발자를 꿈 꿉니다.

profile
Frontend Developer

0개의 댓글