하루를 마무리 하기 전, 오늘 있었던 일들을 잔잔히 되짚어봅니다.
성공과 실패의 모든 요소에서 '배울 점'을 찾아내어 기록하고,
더 성장하는 내일의 나를 위해 'action plan'을 세웁니다.
오늘은 새로운 기능 구현은 하지 않고 2가지의 디테일을 추가로 잡게 되었다.
한 개는 구현을 했고, 나머지 하나는 질문채널을 통해 답변을 받아 일단 해보고 있는 중.
내일 스프린트 회의 때 방향성과 리팩터링의 형태가 맞는지 확인해보고 쭉 밀고 나가고자 한다.
사용자가 서비스를 사용하는 시점의 요일에 따라 장소 운영시간 보여주기
처음에 해당 기능을 몰랐을 떈 복잡도가 높을 수 있겠다고 생각했는데, 서치해보니 어렵지 않게 해결할 수 있는 사항이었다.
만약 사용자가 서비스를 사용하는 날이 '화요일'이면, 장소를 클릭했을 때 보이는 요약정보에 '화요일'에 대한 장소 운영시간을 노출시키는 것이 목표였다.
물론 전체 운영시간은 상세 페이지에서 노출 가능한 부분이므로 그 때 가서 생각하기로. ㅎㅎ
문제는 이 부분을 서버측에서 로직을 만들어 애초에 DTO로 정보 전달 시 그 요일에 대한 정보만을 넘겨줄 것인지, 아니면 프론트 쪽에서 로직을 만들어서 모든 요일의 정보를 다 가지고 있는 상태에서 서비스를 사용하는 시점의 요일에 따라 정보를 보여줄 것인지. 이 두 가지 중에서 방법을 선택하는 것이었다.
결론적으로 나는 후자를 선택했다.
어차피 상세페이지에서 장소 정보를 보여주기 위해서는 서버측의 데이터를 모두 끌어와야 하는 상황이었기 때문에 가져온 데이터를 가지고 프론트에서 필터링을 해주기로 결정.
자바스크립트의 Date 객체를 활용했다.(MDN 문서 참고)
Date 객체의 getDay() 메서드를 통해 현지 시간 기준 요일정보를 얻을 수 있는데, 월요일 화요일 뭐 이런식으로 반환해주는 게 아니라 일요일은 0, 월요일은 1 ... 이렇게 정수로 반환해준다.
나는 이 정수를 인덱스로 활용하여 아래와 같이 활용했다.
const date = new Date();
const dayOfWeekArray = [
'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday',
];
const dayOfWeek = dayOfWeekArray[date.getDay()];
그렇게 dayOfWeek에 할당된 요일 문자열을 내 데이터의 key로 활용하여 운영시간 정보를 가져오는데 성공.
아래와 같이 작은 한 줄이지만, 너무 디테일한 부분이긴 하지만 ;; 사용자 입장에서는 서비스를 사용하는 날의 요일정보를 확인하는 것이 먼저이고, 전체 운영시간은 상세정보에서 보여주면 되지 않을까? 하는 마음으로 구현한 부분 ㅎㅎ
시군구 지역 정보를 어디에 두고 활용할 것인가?
기능 중에 지역을 검색하는 기능이 있는데, 타이핑으로 검색하는 게 아니라 주어진 필터링 옵션을 선택하여 검색하는 기능이다.
전국 시/도야 8개 안짝이니 데이터가 그리 많지 않은데,
1개의 시/도에 포함되어 있는 시/군/구에 대한 이야기라면 좀 달라진다.
우선 빠르게 기능 구현을 하기 위해 임의로 시/군/구 몇 개를 넣어두고 개발을 하는 중인데 몇 개 넣은 코드가 벌써 길어지다보니 이 정보를 과연 프론트에서 관리하고 있는게 맞는건가? 하는 의문이 들었다.
시/도가 5개밖에 들어가지 않았는데 벌써 길다!! 벌써 고통스럽다!!! 으윽!!
주말이라 트레이너님들 얼굴을 보고 질문을 하기 어려워 거의 처음?(;;;)이다 시피 메가스택오버플로우에 질문을 올렸는데 감사하게도 아샬님이 빠르게 답변을 주셨다.
결론적으로 아샬님은 들어갈 때+웹일 때 백엔드에 해당 정보를 요청하셨다고 한다.
사실 나도 그 방향이 적절하지 않을까? 하여 오늘 아침에 task 목록에 넣어두긴 했는데..
막상 이 정보를 또 서버에서 가져오는게 맞는건가? 하는 그런 혼란스러웠던 상황 ;;
우선 내가 할 수 있는 가장 작은 스텝은 저 무지막지한 정보들을 컴포넌트 함수 안의 지역변수로 놓는 것이 아니라 전역변수로 분리하는 것이다.
그렇다. 컴포넌트가 수십, 수백줄에 가까운 저 정보를 굳이 가지고 있을 필요가 없다.
지금은 카카오맵을 utils로 분리했던 것처럼 해당 내용도 utils로 분리해두었다.
오늘 밤에는 레퍼런스를 참고하여 시/군/구 목록을 추가해보는 것까지 해보자.
관심사의 분리를 고려하며 코드를 짜는 것은 정말 쉽지 않다.
하지만 그 분리가 제대로 이루어지지 않으면 결국 고통받는 것도 나이기 때문에 ;;
관심사의 분리를 하지 않아 손쓸 수 없는 상황으로 고통받지 말고, 차라리 배움의 고통을 통해 운영 측면에서의 신뢰도 높은 서비스를 개발하도록!! 더 배우고 배우자.
오늘 질문을 통해 많은 것을 얻은 것 같다. 짧은 답변이었지만 정말 중요하고 핵심이 되는 내용들이 모두 있어서 아마 구현하는데에는 시간이 오-오래 걸릴지도? ㅎㅎ
질문도 자주 남겨야지... :)
