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

1. 프로젝트 첫 주의 시작.

드디어 프로젝트 개발이 시작되었다. 사실상 5개의 팀이 있는데, 거의 대부분의 팀이 백엔드와 협업을 해서 자료를 주고받을 것을 미리 정했고, 그거에 맞게 백엔드 분들이 API 문서를 만드는 작업을 해주었다. 이미 프로젝트 개발 기간 시작전에! ( 다른 프론트엔드분들이나 ios분들도 미리 개발을 시작하신분들이 꽤 되었다.)

 

하지만, 우리조는 딱 첫 날부터 개발을 시작하였다. 이전에 만들어놓은 와이어프레임을 기반으로해서 만들어 나가기 시작했다. 일정을 잡아놓긴 했지만 여유롭게 잡아놓지는 않았던것 같다. (항상 강사님들마다 프로젝트 수주가 들어오면 기간은 무조건 여유롭게 잡으라고했던......) 그래서 사실 상 이론상으론 6일이면 끝날것같았지만 2주이상은 걸릴것같다..ㅎ

 

백엔드분들이 API문서를 만드시는데 쪼금 걸리는 탓에 우리 프론트엔드는 기본적인 페이지의 UI구현에 초점을 맞추고 개발을 시작하였다. 팀에서 조금 잘하는 친구가 route설정을 해주었고, 그거에 맞게 component이름들을 서로 생각해서 맞추고나서 git에서 fork를 각자 뜨고 개발을 시작하였다.

( 아 우리는 Angular 프레임워크를 기반으로해서 모듈화까지 다해서 개발을 시작했다! 공통적인 컴포넌트들을 미리 만들고 시작한 셈이다. 주로 git과 slack을 이용해서 협업을 하였지만 의사소통에서는 역시 카xx톡 만한게 없는듯 ㅋㅋㅋㅋㅋ연락하기 너무편함 ㅠㅠ slack에 익숙치 않아서 그럴지도...)

 

2. 내가 맡은 부분.

자 그럼 내가 맡은 부분은 어디인가? 먼저 크게 페이지는 2개이다.

숙소 검색했을때 결과가 나오는 페이지

 

위에 navigation은 공통이기때문에, 제외한다치고 

아래 검색결과 리스트들을 봤을때 필터가 되야하고, 오른쪽에 해당 위치 지도가 떠야한다.

리스트들에 대한 데이터가 아직 없기 때문에 일단은 내가임의의 데이터를 넣어놓은 상태로 작업을 했다.

특히 나를 괴롭혔던 것은 AGM이었다. 

지도 API를 써보긴 했지만( 다음지도api) google은 영어이기도하고, Angular google map이라고하는 것이 따로 있어서

그것을 사용했다. 처음써봐서 그런지 진짜 customizing하기가 어려웠던것 같다. 

그래도 지금 까지 구현한것을 보면,

 

살짝 달라보이긴하지만, 거의비슷하게 구현하였다.

 

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="12"
  [zoomControl]="true" [zoomControlOptions]="zoomControlOptions" [scrollwheel]="false"
    (mapClick)="mapClick($event)">
    <agm-marker *ngFor="let marker of markers" [latitude]="marker.lat" [longitude]="marker.lng" 
    [opacity]="marker.alpha" [iconUrl]="icon" (markerClick)="markerClick(iw)">
    <agm-info-window [isOpen]="marker.disabled" #iw>
    내용
    </agm-info-window>
  </agm-marker>
</agm-map>

이것이 지도의 간단한 내용이다. 아마 더 업데이트가 되어야하겠지만, 간단해보이는데도 불구하고 여러가지 구글링과 시행착오 끝에 만들어냈다.

 

 

이것이 2번째 내가 구현해야할 페이지이다. 

확인 및 결제 페이지로 결제수단을 추가하고, 이전페이지에서 받은 데이터로 예약을 확정 짓는 페이지이다.

결제부분 같은 경우는 아직 백엔드와의 협업에 있어서 확정이 나지 않아서 추후에 결정하기로 했다.

아직 구현을 해보지 않아서 크게 설명할 것이 없으니 다음 구현후에 설명하도록 하겠다.

 

 

 

 

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

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