2021-01-29(Fri)

항목

내용

학습 날짜

2021-01-29(금)

학습 시간

10:00~24:00

학습 범위 및 주제

Backbone

학습 목표

동료 학습 방법

eunhkim, yohlee님과 adobe xd로 페이지를 디자인하였다.

상세 학습 내용

전체 화면에 대한 HTML 파일을 미리 다 작성해버리고 모듈을 나눠서 프로젝트를 진행할지, 아니면 어느 한 모듈에 필요한 HTML 파일을 설계하고 해당 모듈에 영향을 미치는 프론트엔드 구현과 백엔드 구현을 마쳐버릴지 결정이 필요했다.

후자를 통해 '구현 스타일'을 잡고 각 모듈에서 참고하면서 진행할 수 있도록 하는 것이 바람직하다고 판단했다. 프론트엔드 구현하는데 쓰이는 백본이 '라이브러리'이다보니 참 다양한 방식으로 구현할 수 있기 때문이다. 가령 부모 뷰 안에 자식 뷰를 어떻게 구현할지에 대해서 찾은 것만 5가지 스타일이 있었다..;

그리고 백엔드와 프론트를 통신시키는데도 시행착오가 있었다. 백본 Model 객체가 JSON 파일을 수신하여 스스로를 업데이트하도록 하는 것은 별 이슈가 없었으나 Collection 객체를 통해 fetch 함수를 동작시킬 때는 정상작동하지 않았던 것이다. 결과적으로 Collection 객체에 parse 메서드를 설정해둔 상태에서 Collection 객체에 연결된 Model 객체도 parse 메서드를 가지고 있으면, 이 parse 메서드가 두 번 작동하며 JSON 데이터가 어그러진다는 것을 알게 되었다.

https://github.com/jashkenas/backbone/issues/4035

학습 내용에 대한 개인적인 총평

오전 10시부터 새벽 2시까지 근성..있게 프로젝트를 진행하였다. 결과적으로 ladder 모듈 페이지 구현은 성공했으니 hash fragment url routing을 통해 다른 뷰를 호출하여 화면을 렌더링하는 방식만 잘 구현하면 모듈별로 분리할 수 있을 것 같다. SPA로 구현해야하다보니 상당히 설계에 공수가 드는 느낌..

다음 학습 계획

  • 프론트엔드 routing 전략 결정

Last updated