[프론트엔드 개발 스쿨 22주차] 파이널 프로젝트 Thrid Week Start!

1. 3번째 스프린트 미팅

7월 31일 수요일 드디어 3번째 스프린트 미팅을 진행했다.

2번째 스프린트 미팅때 뷰구현을 90퍼센트정도 완료하는것으로 목표를 잡았으나 그게 쉽지는 않았다. 

개발을 하면서 짜잘짜잘한것들 그리고 오류를 발견하고 해결하는 과정들이 순탄치 않았기 때문에...

그래서 사실 뷰구현은 80퍼센트정도 밖에 못하고, 스프린트 이후로 수정을 했다. (자세한 내용은 아래에서)

 

3번째 스프린트 미팅 역시 ios, front, back 순서대로 진행했다.

각자 개발하면서 어려웠던 점, 아쉬웠던 점, 좋았던 점들을 공유했다.

스프린트미팅을 하면서 느낀것은 ios랑 비교(?) 였다. 우리보다 많은 것을 구현한것 같은 느낌인지 아니면 진짜 많이 구현한건지 모르겠지만 확실이 앱이 이쁘다라는 느낌이 들었다. 프론트엔드는 왜이렇게 어려운건지....ㅠㅠ(특히 CSS)

 

우리 순서에서는 그간 개발했던 것을 보여주었지만, 저번주와 비교해서 큰 차이가 없었다.. 조금 더 디테일한 부분을 신경써서 개발한정도와 페이지 라우팅 정도?가 다였다. 

세개의 스쿨이 모여서 의견교류를 하면서 소셜로그인, 메세지 , 트립 부분을 공유하고 API사용방법등을 백엔드분들께서 설명해주시면서 스프린트는 잘 마무리되었다. P.M강사님께서도 잘 관리를 해주시는 것 같고, 좀 더 속도를 내야하는 부분을 알려주신 부분도 있었다. 

 

스프린트 미팅뒤로 백엔드분들에게 새로개발해야하는 것들에 대해서 서로 토의를 잘 진행하고 물어보고 하면서 프론트 작업을 많이 한것 같다. 그리고 미흡한 부분들을 캐치하고 그것을 개선해나가는 작업을 우선으로 하고 기능개발을 나중에 하는것으로 하기로 했다. 그렇게 스프린트 미팅은 마무리 되었다. 

 

 

2. 개발 내용

일단 내가 만든페이지의 전체화면이다. 지난번과 다르게 세부적으로 설명을 하자면,

위쪽에 Navigation이라고 하는 input입력창이 있는 컴포넌트 , 화면에서는 보이지 않지만 Spinner를 넣어서 통신이 완료되면 화면에 띄울 수 있도록 하였다.

또한, 네비게이션 bar아래쪽에 필터가 4개가 있는데, 이것도 데이터를 필터링을 할 수 있게 만들었다.

 

가령 예를들면 아래처럼

 

Jeju이면서 가격이 47724원 이상인 방들을 보여주는 목록은 이러하다. 

이런 필터까지 구현을 하였다. 

데이터들을 가져올때 필터 부분들을 서버에서 구현해주었기떄문에 우리가 쿼리문만 잘 날리면 되는 부분이기도하지만, 그것을 가져와서 정제하거나 잘 보여지게 하는것도 참 힘들었던 것 같다.

 

특히나 지도에 marker까지 연동되어야하는 부분은 이벤트발생되는 상태변화감지를 잘 해야하기때문에 그부분에 있어서도 정말 많이 헤맸던것 같다. 

 

왼쪽엔 RoomList들이 나오는 부분, 오른쪽엔 AGM을 이용해서 google지도를 사용해서 마커와 인포윈도우를 사용했다.

 

아직 데이터가 많지가 않다. 왜냐하면 우리 백엔드는 데이터를 크롤링해오는것이아니라 직접 처음부터 DB설계를 시작해서 다했기때문에 db역시 우리가 직접 다 넣어서 해야했다. 그래서 지금은 데이터 13개정도밖에 없지만 추가로 더 넣을 예정이다. 

 

 

아래는 확인 및 결제 페이지이다.

우상단에 보면 KOR이라고 있는데 한글,영문을 바꿀 수 있도록 해놓았다.

신용카드정보를 입력하고 다음화면으로 넘어가게끔 만들어 놓았따.

하지만, 실제로 결제까지는 구현하지 못했다. 

 

 

이제 마지막주차다. 오늘이 토요일이면 이제 6일이 남았다 발표일까지. 

정말 벌써 4주라는시간이 다갔나싶을정도로 너무 빨리 지나가는것같다... 

미흡한 부분들을 빨리 완성하고 발표때 제대로 된 페이지를 보여줄 수 있도록 해야겠다.

 

 

 

<패스트캠퍼스 프론트엔드 스쿨 후기>

 

[프론트엔드 개발 스쿨] 살펴보기>>

프론트엔드 개발 스쿨 | 패스트캠퍼스