프로젝트 개요
대상 사이트:
https://www.megabox.co.kr/
담당 파트:
상영 시간표 페이지 - https://www.megabox.co.kr/booking/timetable
진행도 및 느낀점
1일차:
전체 회의에서 사이트 선정 후,
구현 범위를 정하고 사이트를 분석하여 점심 쯤 파트 분배가 끝났다
이후 담당 파트에서 어떤 데이터를 사용하는지 살펴보았다
필터링 된 데이터를 화면에 보여줘야 하고
반복적으로 컴포넌트를 넣어야 하는 부분이 많아서
어떤 형태로 데이터를 사용하는지 고민하다가 하루가 끝났다
구상만 끝나면 2주가 아니라 며칠안에 끝날 것 같다
<오늘 한 작업>
담당 페이지 컴포넌트 분석
데이터 형태 고민
2일차:
데이터 구조를 어떻게 만들지로 백엔드 팀원과 이야기를 했는데, 알고보니
구조를 고민 중인 데이터가 프론트2명과 백엔드 2명의 파트에 걸쳐있는 데이터였다
이 사실을 처음부터 알아서,
관련된 백/프론트 네 명이 한 번에 회의해서 같이 시간을 투자하고 고민했다면,
더 빠르게 결론이 나왔을 것 같아서 다음 작업 때는 반영하려 한다
어제까지만 해도 데이터만 나오면 금방 끝날 작업이니까
2~3일이면 끝날 작업이라고 생각했는데
그 데이터의 형태가 완성되는 것 까지가 제작 과정이고
그 형태는 프론트/백이 계속된 협의를 통해 내려야하는 결론이라는 생각이 들었다
필터 기능을 처음 고민해봤기 때문에 이틀간 계속 헷갈린 문제인데,
화면에 필터링 된 데이터를 보여줘야 할 때, 프론트는 필터의 키워드만 넘겨서
필터링이 끝난 데이터를 받아서 보여주는게 맞는 것 같다
전체 데이터를 응답받고, 필터링하는 과정을 프론트에서 하게 되면
데이터 전송량에서 차이가 발생하므로 성능이 저하되고
심한 경우, 사용자 입장에서 사용하기 어려운 제품이 돼버린다
사전에 가능한 작업은 백에서 수행하고,
프론트에서는 결과물을 빠르게 보여주는 것에 집중해야 한다는 것이 이틀간 고민의 결론이다
백에서 처리하는 것과 프론트에서 처리하는 것은 각각의 장/단점이 있는 것 같다
팀원과 작업을 할 때, 내가 어정쩡한 태도를 비치는 것은
팀에게 도움이 되는 태도가 아니라는걸 느꼈다
내가 수행해야 할 부분은 확실히 수행하고, 요청할 부분은 확실히 요청해야 한다
<오늘 한 작업>
데이터 형태 고민
3일차:
1차 프로젝트 때 만들었던 기능을 다시 만드는데
내 코드를 봐도 이해가 안가서 1시간을 다시 봤다..
거의 2주 이상 for문을 쓰지 않다가 다시 쓰려고 하니
조건식의 부등호 방향을 반대로 써놓고
30분 넘게 왜 for문이 돌지 않는지 이유를 찾고있었다
익숙하던 것도 잠깐 쓰지 않으면 금방 어색해진다
<오늘 한 작업>
영화 종류표 레이아웃/기능
상영 시간표 레이아웃/기능
4일차:
개인 일정 후, 통신 상태를 확인해보려 했는데
담당 팀원이 없어서 다음날 확인하기로 함
5일차:
응답 받은 데이터를 가공하는데
내가 어떤 모양을 만들어야 하는지 정확하게 알지 못하니까
확신은 없는데 가공 과정과 가공 결과만 점점 더 복잡해지는 것 같다..
배열 형태가 4차원까지 가게 되는데 가공하고 꺼내 쓸 생각을 하니
헷깔리기도 하고 이게 맞는건지 모르겠다
하루 종일 고민 중인데 답이 안나오는걸 보면,
처음부터 다시 정리할 필요가 있을 것 같다
<오늘 한 작업>
서버 통신 확인
응답 받은 데이터 가공
6일차:
금요일 하루 종일 고민했던게
응답받은 데이터를 어떤 모양으로 만들어야 하는가 였는데
곰곰히 생각해보니 3중 map을 돌려야 한다면 3개의 배열만 있으면 됐다
굳이 하나의 3차원 배열을 만들거나,
객체 모양으로 만들어서 key값을 넣어줘야 하냐를 고민할 필요가 없었던 것 같다
그런데 막상 블로그에 정리하고 보니까
둘 다 그렇게 어렵지 않아보이는데 왜 이렇게 고민했던건지 모르겠다
나름 정리하면서 생각했었는데..
처음에 가공하려 했던 모양
결국 이 모양으로 가공하여 레이아웃을 구현할 수 있었다
[
[
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ]
],
[
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ]
],
[
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ]
],
[
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ]
],
]아래는 최종적으로 필요한 3개의 배열.. 인줄 알았으나
index로 매칭이 되지 않아 보류된 배열
[상영관1, 상영관2, 상영관3, 상영관4]
[
[1관, 2관, 3관],
[1관, 2관, 3관],
[1관, 2관, 3관],
[1관, 2관, 3관]
]
[
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
[ {상영정보1}, {상영정보2}, {상영정보3} ],
]
2일 이상 걸렸지만 원하는 모양대로 구현에 성공..
느낀점을 간단하게 요약하면
데이터를 가공할 때,
내가 원하는 데이터 형태를 정확하게 정의해야 한다
그 후, map을 몇 번 중첩해야 하는지,
map을 실행시킬 때 필요한 배열이 정확히 어떤 배열인지를 알아야 한다
map이 중첩돼서 복잡해지는 것도 어렵지만
어떤 모양의 데이터를 만들어야 하는지
어떤 정보를 담은 배열이 필요한지를 정리하는 것 또한 복잡하기 때문에
잘 정리해가며 작업을 해야한다
원하는 모양으로 데이터를 가공하기 위해서
무엇이 필요한지를 명확히 정의한 후에
필요한 배열을 미리 만들어 두고
(이번의 경우, 상영 지점 배열, 상영 지점의 상영 정보 배열,
지점별 상영 스크린 배열을 미리 만들어주었다)
map을 중첩시켜 데이터를 가공한 뒤,
map으로 return할 요소들을 컴포넌트로 분리하여
컴포넌트 안에서 다시 map을 돌려주었다
이 때, map의 idx를 활용하여
(map이 중첩될 시 elem1, elem2, elem3 / idx1, idx2, idx3 등..
각각의 elem과 idx가 무엇을 의미하는지 명확히 이해하고 사용해야 한다)
가공한 하나의 배열 데이터의 원하는 위치에서 map을 사용할 수 있었다
7일차:
<오늘 한 작업>
선택 날짜 표시
선택 영화 표시
통신 확인 후 에러 처리
날짜 리스트에서 년월 안내 추가
