1. 팀 소개
•
팀명 : Skyprinter
•
팀원 : 김진현, 김재헌, 김준혁
2. 팀 주제
•
Sky Scanner 메인페이지 및 검색 결과 페이지 클론
3. 담당역할
•
메인 페이지 전체적인 레이아웃 및 퍼블리싱
•
•
•
•
•
4. 주제 선정 이유
•
Front :
Sky Scanner 페이지 자체가 React로 구성되어 있고 적은 페이지에 선택한 조건에 따른 상호작용성이 높고, 반응형 페이지이기 때문에 HTML, CSS 적인 관점도 중요하지만 JavaScript, React등의 개발적인 요소를 활용하기에 매우 적합하다고 생각되었습니다.
•
Back :
현재 프로젝트를 진행함에 있어 팀원들이 Front-End 개발을 지향하고 있기 때문에 Back-End를 동시에 공부하기에는 어려울것 같다는 생각이 들었습니다. 따라서 공개 API를 이용하여 Back-End를 구축할 시간을 최대한 적게 줄이고자 하였습니다. Sky Scanner Api의 항공권에 대한 내용은 개발 학습에 있어 복잡성이 뛰어나고 요청 또한 무제한이기 때문에 결정하게 되었습니다.
5. 프로젝트 요구 사항
•
W3C에서 제공한 MarkUp Validation Service 에서 이상이 없을 것.
•
최대한 시멘틱 하게 작성.
•
여러 라이브러리 경험.
•
Git flow를 사용하여 협업을 할 것.
•
Git Convention을 최대한 지킬 것.
•
SkyPrinter API 사용.
•
리액트 컴포넌트 간의 최적화.
6. MVP
1.
실시간 항공권 검색 기능
2.
항공권 필터 기능
3.
URL 공유 기능
4.
실제 티켓 구매 리다이렉트
7. API 및 문서 정리
4.
8. Flow Chart
9. 구현 일정
2020년 2월 1일 ~ 2020년 2월 28일
+ 2020년 2월 29일 ~ 2020년 3월 6일 : 추가작업 - URL Select, Bug fix 등등
10. 프로젝트 구현 영상
11. 구현 사이트 바로가기
2020년 4월부로 SkyScanner에서 API 제공을 마감했습니다.
따라서, AWS 배포를 중지합니다.
해당 사이트는 AWS의 S3 버킷을 통해 배포되고 있습니다.
( 이미지 클릭 시 구현 사이트로 이동됩니다. )
12. 회고록
느낀점
•
실제로 사용되는 API 답게 복잡성이 높은 것을 느꼈습니다.
•
사전조사(API, 실제 운영사이트의 퍼블리싱 및 기능)의 중요성을 크게 깨닫게 되었습니다.
•
사전조사 때는 구현방법이 전혀 생각이 안났지만 구현 해보면서 "어떻게 구현하지? "라는 의문점이 풀리기도 하였습니다.
•
검색 영역을 개발하면서 사용자의 경험(키보드접근성)이나 속도 측면을 크게 고려하면서, 개발도 중요하지만 최적화도 얼마나 중요한지 깨닫게 되었습니다.
•
변수, 함수 등등 모든 네이밍을 지을 때 생각하는 어려움이 있었습니다. 이유는 팀원은 3명이고 각자 이름짓는 컨벤션이 달랐기 때문이다.
•
위와 같은 이유로 개발 직전에 초기셋팅을 확실히 해두어야함을 느꼈습니다.(깃 컨벤션, 폴더구조 셋팅, 네이밍 컨벤션)
•
일정 조율을 확실히 하여 시간을 나누는 것에 대한 필요성을 느꼈습니다.
•
재사용성을 고려한 함수를 많이 만들어둘 경우 차후 개발이 훨씬 편리해짐을 크게 깨닫게 되었습니다.
•
Redux Saga를 통한 비동기 처리에 대한 편리함을 크게 깨달았습니다.
•
HOC를 통해 컴포넌트에 조건을 주어 내려줄 prop등을 결정하는 방법을 알게 되었습니다.
•
React에 대해 자신감이 생겼습니다. React를 이용하여 반응형 페이지를 구축하는 방법을 알게되었습니다.
•
React.memo 또는 useCallback을 이용한 최적화 방법을 알게되었습니다.