React_USA Data

기관 : Wecode

인원 : 5명 (2차 팀 프로젝트)

• 프론트 앤드 : 3명
• 백 앤드 : 2명
• 담당 업무 : 프론트 앤드

기간 : 2020. 08. 03 ~ 2020. 08. 14

프로젝트 목적 :

• React 기술로 활용한 두번째 팀 웹페이지 프로젝트
• 현재 가장 많이 사용하는 React의 Function Component 방식 활용.
• Function Component의 Hook을 학습하면서 실제 프로젝트에 적용
• 백앤드 (서버) 비동기 통신을 하기 위해 fetch함수가 아닌 axios 라이브러리 활용
• 보다 유용하게 스타일 관리하고, 동적으로 css를 활용하기 위해 styledComponent 적용
• UI 애니메이션을 극대화 한 USA Data 사이트 클론 프로젝트

개발 환경 : 프론트 앤드 기준

• React (Class Component)
• javascript (fecth 함수)
• HTML
• styledComponent
• Git : 코드 협업 관리
• slack / Trello : 프로젝트 진행 관리

결과 물 :

https://www.youtube.com/watch?v=cImutpX-JHA

담당업무 :

1) 메인 페이지 구현

2) 미국 주의 지도와 데이터 구현

• HighChart 라이브러리를 활용하여 미국 주 지도와 데이터 구현
  

3) 해당 주의 지도와 데이터 구현

• 미국 주를 클릭 했을 경우, 해당 주에 대한 지도를 시각화
• HighChart 라이브러리를 활용하여 주 지도와 데이터 구현
  

4) 인종에 따른 막대 그래프 구현

5) 결제 관련 모달창 구현

느낀점

• 최근에 가장 많이 사용하는 React 함수형 컴포넌트와 Hook을 통해 구현한 프로젝트입니다.
  처음 React를 독학으로 공부했을 땐, 함수형 컴포넌트를 사용했었으나, 왜 사용하는지, 무엇이 편한지 이해가 되지 않았습니다. 첫 프로젝트때 클래스형 컴포넌트를 공부하고 나서 함수형 컴포넌트를 활용하니 함수형 컴포넌트의 장점, Hook을 사용한 이유를 알 수 있었습니다.
  또한 이번 프로젝트는 Front-End의 꽃인 애니메이션 구현을 경험할 수 있었습니다. 비록 라이브러리를 사용했으나, 라이브러리를 사용하기 위해 기존 소스와 예시를 분석하여 React에 맞게 구현하는것이 힘든 작업이었습니다. 그러나 끝내 저를 포함한 모든 팀원이 애니메이션 시각화 작업을 달성하였으며, 실제 사이트와 매우 유사한 결과물을 나타날 수 있었습니다.
  스스로 처음부터 끝까지 완벽한 애니메이션 구현을 할 수 있었던 좋은 기회였습니다.