WeCode Project- 2. 다내방

프로젝트 소개

• 통합 주거 플랫폼(부동산 정보 서비스)인 다방 클론 프로젝트입니다.

FULL DEMO CLIP

개발 인원 및 기간

• 개발기간 : 2020/3/9 ~ 2020/3/20(2주)
• 개발인원 : 프론트엔드 3명, 백엔드 3명

목표

• 부동산 정보서비스인 다방을 클론함으로써 복잡한 데이터 구조를 이해하기.
• 위치를 기반으로 한 다양한 필터링 기능 구현, 소셜 로그인을 활용한 유저 정보 관리를 구현하기.
• 새롭게 알게 된 기술인 Redux, styled components, Highcharts 적용해보기.

사용된 기술

• Front-End :
  • JavaScript
  • React
  • Redux
  • styled components
  • HighCharts
• Back-End :
  • Python
  • Django web framework
  • Bcrypt
  • JWT
  • KAKAO / FACEBOOK social login
  • MYSQL
• Deployment :
  • AWS EC2, RDS
  • Docker
  • CORS headers

내가 담당하여 구현한 기능들:

Main Page/ Login

• React Modal을 사용하여 로그인,약관동의,회원가입페이지 모달적용.
• React Hooks(useContext)로 전역에 hooks의 state를 저장하여 단계별 modal 로 로그인 => 약관동의=> 회원가입 기능을 구현하였음.
• React Hooks(useState,useEffect)로 전체동의 상태 true/false 조건 구현.
• Styled Components로 GlobalStyle을 적용하여 Layout 페이지에 NavBar 컴포넌트 children 적용.
• Kakao / Facebook 소셜로그인(SOCIAL LOGIN) 기능들 구현

프로젝트 하면서 느낀점들:

너무 많은 기술을 한꺼번에 사용하려고 하는 욕심

• class 에서 hooks 사용하고자 하는 욕심
  리액트를 처음 배우면서 프로젝트를 한것이 1차 프로젝트 오늘회 클론 이였다. 이때 리액트는 Class 로 상태(State) 관리를 하는것이다 라고 배웠었다.
  근대....
  리액트 기술이 발전하면서 hooks 라는것이 있다는것을 알게되었
  고.. 부트캠프에서 많은것을 경험하면 좋으니까 hooks 를 사용하자
  라는 생각이 들어 hooks 와 class들을 썩으면서 진행하였다.

  너무 헷갈렸다...

• Redux는 어떻게 쓰는건가?? 써야하는건가??
  리액트 를 배우면서 state에 대한 이해도가 별로 없는 상태에서 우리는 언제 리덕스를 사용해야 하는가? 나의 기능 구현 중에 리덕스를 사용해야하는가? 이것에 대한 고민이 많았다... 이러한 고민들을 하면서 hooks 를 사용하고 hooks 로 state 관리를 하고있는데 막히는것들이 너무 많았다.

  고민을 하다가 deadline은 촉박하게 다가오고.. 나의 기능에 리덕스를 쓰는게 좋다는 글을 읽음..그러나..리덕스 사용을 하지 못함
  그래서... hooks 배우면서 context api 를 습득하여 대체하였음.

2주 지나고 프로젝트의 결과를 보면...

• 역량이 안따라 주는데 익숙하지 않은 기술에 더해 새로운 기술을 적용시키려고 하니까 많은 시간이 지나가버렸다..
  분명히 나는 뭔가를 배웠지만..나 혼자의 프로젝트가 아니고 팀의 프로젝트니까 더욱더 미안한것 같다.

• 누구는 REDUX 쓰고 나는 CONTEXT 쓰고있고..누구는 class에 익숙하니 hooks 안쓰고 class로 프로젝트를 진행하다 보니까..

  너무 지져분하고 통일성이 없다 라는 생각을 많이 하게됨.

그래서..

너무 아쉽고 미안하다 , 1차 때 와 다른 분위기의 협업이면서 새로운 기술들을 적용하려니 2주는 순식간이다..

그래도 .. 정말 잼있었다.. 나는 뭔가를 많이 배웠고 새로운 경험을 하였으니까..