[사이드 프로젝트] 바로방탈출 1주차 회고
💻 사이드 프로젝트
🍓 시작하기
TIL에 쓰려다가 내용이 너무 길어져서 글을 따로 작성해봤어요!
오늘은 사이드 프로젝트를 작업한지 일주일이 되는 날이에요
일주일마다 유의미한 결과를 내는 것을 목표로 작업하고 있어요
지난 회사에서 화요일마다 정기배포를 해서 저도 똑같이 진행하려고요
일주일이라고는 하지만 지난주 수요일, 이번주 월요일 이틀 작업했네요
일주일마다 작업을 하나씩 완성하고 간단하게 회고를 하려고 해요
🍓 작업 내용
이번주엔 방탈출카페 한 곳을 크롤링해서 화면에 뿌려봤어요
처음부터 구조를 잘 잡으면 좋겠지만 빠르게 실패하고 문제라고 느낀 점을 수정하는 것도 괜찮을 것 같았어요
최근 과제를 하나 진행했는데 그 때도 기능을 구현하고 리팩터링하는 시간을 가졌었거든요
이번에는 vercel로 배포해봤어요! 정말 간단하더라고요
근데 api 호출할 때 500 에러가 뜨네요 ㄷ ㄷ 뭐냐구~~
https://baro-escape-room-o0jlllz0m-najeong-kim.vercel.app/
🍓 회고
가장 문제인 점은 카페마다 크롤링하는 방법이 다르다는 거였어요
이건 통일할 수 없을 것 같고, 어떤 사이트냐에 따라서 다르게 크롤링을 해준 뒤에
결과는 동일한 타입으로 주면 그 값을 받아서 쓰는 데에서는 내부에서 어떻게 작업하는지 몰라도 되니까
방탈출카페마다 따로 크롤링을 진행하면 될 것 같아요
일단은 방탈출카페 하나만 크롤링해서 함수로 따로 빼지 않았는데 앞으로 이 작업을 진행해보면 될 것 같아요
크롤링 할 때도 고민이 많이 생기더라고요
어떤 클래스로 체크할지랑 일주일 단위로 열리는 것도 현재 날짜를 기준으로 7일을 필터링할지,
예약 시간이 있는 날짜들을 필터링할지 정해야했어요
이런건 기획적으로 결정을 할 수가 없는 부분이라 작업할 때 잘 판단해야겠더라고요
실제로 지난주 수요일에는 closed 클래스로 크롤링을 했었는데
어제 작업해보니 closed가 없는데 예약이 완료된 경우도 있더라고요
그래서 필터링할 클래스를 disabled로 변경했어요
그리고 컴포넌트도 수정을 해야될 것 같아요
CardList를 만들고 그 안에서 api를 불러오게 해놨는데요
사실 CardList는 Card처럼 껍데기만 가지고 있는게 맞을 것 같거든요
CardList 외부에 다른 컨테이너를 만들어서 값을 주입해줘야할 것 같아요
처음엔 아래처럼 만들었는데.. 컨테이너에 넣을 내용을 넣다보니 뚱뚱해졌어요
import { ReactNode } from 'react';
interface Props {
children: ReactNode;
}
export default function CardList({ children }: Props) {
return (
<div className="flex space-x-4">
{children}
</div>
)
}
오늘, 내일, 이번주를 date 값을 보고 필터링하려고 하는데요
이 값을 저장하기 위해서 상태관리 라이브러리를 하나 추가해야겠고요
지금 형식이 string으로 되어있는데 이걸 date로 통일해서 필터링이 잘 되도록 해야겠어요
api에서 date 타입으로 주면 쓰는 입장에서는 바꾸지 않아도 되니까요
제가 백엔드까지 다 만드니까 따로 요청을 하지 않아도 돼서 좋네요
그리고 지금은 테마-날짜-[시간, 예약여부] 이런 식으로 들어가서 값을 꺼내와야하는데요
이러니까 데이터를 쓰는 쪽에서 너무 깊게 들어가야되더라고요 아래처럼요!
{Object.entries(themeList).map(([theme, list]) => (
list.map(({date, timeList}) => (
timeList.map(item => (
<Card
key={`${theme}-${date}-${item.time}`}
themeName={theme}
date={date}
time={item.time}
isBooked={item.isBooked}
cafeName="단편선"
/>)
))
)
))}
날짜가 중복되는 것은 크게 문제가 되지 않을 것 같기도 하고, 필터링할 때 더 편할 것 같기도 해서
테마-[날짜, 시간, 예약여부]로 데이터 구조를 바꿔봐야겠어요
지금은 데이터를 코드에 다 넣어놨는데 많아지면 데이터베이스 하나 연결해야될 것 같아요
지금은 사용자가 추가로 입력할 내용은 없어서 따로 데이터베이스를 사용하지는 않았어요
기획이랑 디자인도 확정해놓고 들어간게 아니라서 계속 고민이 되기도 해요
지금은 카페가 하나니까 한줄에 다 출력하는데
카페별로 따로 나오게 할 지, 테마별로 따로 나오게 할 지도 고민이에요
🍓 한마디
일단 망치더라도 빨리 만들어보자! (진짜 망쳐버렸다)