Style ‘We’ 프로젝트 Front-end/Back-end 소개

스타일쉐어 모티브 프로젝트

짧은 프로젝트 기간동안 개발에 집중해야 하므로 디자인/기획 부분만 클론했습니다. 개발은 초기 세팅부터 전부 직접 구현했으며, 아래 데모 영상에서 보이는 부분은 모두 프론트엔드와 백앤드 연결을 통하여 실제 사용할 수 있는 서비스 수준으로 개발한 것입니다.

1. 프로젝트 선정이유

스타일쉐어는 약 700만이 넘는 MZ세대들의 패션/뷰티 스타일을 공유하는 SNS와 온라인 쇼핑몰이 결합된 형태로, 사용자가 작성한 게시물인 피드가 SNS 게시물임과 동시에 사이트에서 구매한 상품의 후기도 될 수 있다는 특징을 갖고 있습니다. 사용자의 피드와 상품 상세 페이지간 유기적 연결에 중점을 두고 이 프로젝트를 진행했습니다.

2. 개발 인원 및 기간

1. 개발 기간 : 2021/02/15 ~ 2021/02/26 (약 12일간)
2. 개발 인원 : 프론트엔드 3명, 백엔드 3명

3. 팀 소개

1. 팀명 : Style 'We'
2. 팀원
   • Front-End : 박경토

4. 데모 영상(링크) : https://drive.google.com/file/d/1-yQxb6fVL7KY29i3dajLNLSoZQaLSqI9/view?usp=sharing

적용 기술 및 구현 기능

1. 적용 기술

• Front-End : React.js, Sass(Scss), React Slick, React-router-dom
• 협업에 사용 된 툴 : Git Hub, Slack, Trello, Google Calender
• Common : RESTful API

2. 구현 기능

Front-End

1. 로그인/회원가입 페이지

   로그인/회원가입 페이지 구현

   • 구현 기능

   1. Link 기능을 활용한 로그인/회원가입 페이지 전환
   2. fetch 함수를 활용하여 백엔드와 통신 -> LocalStorage에 토큰 생성 테스트 완료 , 백엔드와 patch통신으로 가입완료.

2. 프로젝트 느낀점

   처음으로 팀원들과 같이 모티브프로젝트를 진행하였는데 처음이라서 시행착오가 많이 있었지만 매일 아침에 회의 , 트렐로 , 슬랙으로 진행상황을 공유해 소통의 부재를 최소화할려고 노력을 하였던점. 프로젝트를 협업하면서 왜 소통이 중요한지도 깨달았습니다. 로그인 , 회원가입할때 validation에 대한 개발지식과 시간이 부족해서 프론트에서 validation을 하지 못한 아쉬움이 있었습니다. validation과 fetch통신에 대해서 좀 더 공부를 하고 개발할때에는 부족하지않는 개발자가 되도록 노력해야겠습니다.

Reference

이 프로젝트는 스타일쉐어 사이트를 참조하여 학습목적으로 만들었습니다. 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다. 이 프로젝트에서 사용하고 있는 사진은 https://unsplash.com/ 의 사진입니다.