코딩/트러블슈팅 (9) 썸네일형 리스트형 Notice와 WOD 메뉴의 공통 컴포넌트화 과정에서의 TanStack Query 📝 배경wodLog 프로젝트에서 Notice와 WOD(WorkOut of the Day) 메뉴는 동일한 CRUD 기능을 가지고 있어 코드 중복이 존재했습니다. React를 사용하고 있으므로 코드의 재사용성 및 유지보수 편의성 향상을 위해 공통 컴포넌트로 구현을 생각하게 되었고 그때 겪었던 TanStack Query의 `useQuery`, `useSuspenseQuery`에 대해 작성해 보려 합니다. 각 메뉴들의 동일한 CRUD 기능을 props로 `ContentType`을 통한 동적 쿼리 처리로 새로운 게시판 기능 추가 시 쉽게 확장 가능하게 개발해야겠다는 생각을 하게 되었습니다. 단순히 공통 컴포넌트 개발 후 각각의 메뉴에 진입하여 사용하기만 하면 이상이 없겠지만 제가 개발한 홈페이지는 웹 사이트의 .. "어제보다 더 춥다고?": 6개의 API를 사용한 날씨 비교 서비스 개발기 🎯 프로젝트 소개대부분의 날씨 정보 서비스들은 현재와 미래의 날씨 정보만을 직관적으로 제공하며, 과거의 날씨는 '지나간 정보'라는 이유로 제공하지 않거나 추가 클릭을 통해서만 확인할 수 있습니다. 하지만 우리는 어제 경험한 날씨를 통해 오늘의 체감 온도를 더 정확하게 예측할 수 있습니다. "어제보다 더 춥다" 또는 "어제보다 덜 덥다"와 같은 비교는 일상생활에서 매우 유용하게 활용됩니다. 이러한 사용자 경험을 바탕으로, 어제-오늘-내일의 날씨를 최고/최저 온도로 한눈에 비교할 수 있는 서비스를 기획하게 되었습니다. 🔄 프로젝트 발전 과정초기 개발 (2023년)2023년도의 저에게 이 프로젝트는 매우 도전적이었습니다. TypeScript와 WebPack을 처음 배우면서 시작한 프로젝트였기 때문입니다... 크로스핏의 다양한 기록 정렬: 17:17과 3R+12, 누가 더 잘한 걸까? 크로스핏 박스 전용 웹 사이트 'wodLog'를 개발하면서 가장 흥미로웠던 것은 '다양한 기록 측정 방식에 따른 순위 정렬 구현'이었습니다. 이 글에서는 복잡한 정렬 요구사항을 어떻게 해결했는지, 그 과정에서 발생한 문제들과 최적화 과정을 공유하고자 합니다. 우선 크로스핏에 대해서 아주 간략히 말씀드리자면, 크로스핏에서 경쟁은 빼놓을 수 없는 요소이며, 이는 기록을 통해 순위가 결정됩니다. 프로젝트 기획 전, 10개의 크로스핏 웹 사이트를 조사해 보니 8개가 네이버 카페로 운영되고 있는 것을 확인하였습니다. 이는 크로스핏 전용 사이트가 아니다 보니 여러 불편함이 있었습니다.기록이 단순 사진으로만 등록되어 순위 파악이 어려움사진이 잘려서 올라가는 경우가 존재필체가 알아보기 힘든 경우가 존재이런 문제들을 해.. Tanstack Query - prefetchQuery로 공휴일 데이터 패칭 최적화하기 크로스핏 박스 전용 웹사이트 'wodLog'의 Hold(회원권 일시정지) 메뉴를 개발하면서 겪은 문제와 해결 과정을 공유하고자 합니다. Hold(회원권 일시정지 메뉴)는 현재 이용 중인 체육관에서 일시정지 요청 글을 올리면 관리자 확인 후 잔여일을 알려주는 수동적인 시스템과 신청 즉시 잔여일을 확인할 수 없다는 점, 그리고 작성하는 페이지에 달력이 없어서 신청 시 한번 더 확인해야 하는 번거로움을 줄이기 위해 개발하게 되었습니다. 이러한 수동적이고 불편한 프로세스를 개선하기 위해 다음 기능들을 포함한 Hold 메뉴를 기획했습니다.공휴일이 표시된 달력 UI선택한 기간에 따른 실시간 잔여일 계산일요일과 공휴일을 자동으로 제외한 정확한 일수 계산 🔍 문제 상황처음에는 단순히 공휴일 API를 호출하여.. React-Quill 게시물 저장 방식 개선하기: HTML에서 Delta로 크로스핏 박스 전용 웹사이트 'wodLog'를 개발하면서 공지사항과 오늘의 운동(WOD) 페이지에 게시판 기능이 필요했습니다.게시물 작성을 위한 에디터 라이브러리로 React-Quill을 선택했는데, 그 이유는 다음과 같습니다.npm에서 인기 있는 에디터 라이브러리 중 하나간편한 설정비교적 가벼운 번들 크기풍부한 커스터마이징 옵션 DB에 HTML로 저장?React-Quill로 게시판 CRUD 기능 구현 중 게시글이 HTML 태그와 함께 DB에 저장되는 것을 발견했습니다.예를 들어 아래 내용을 저장한다면,드랍인은 크로스핏 경험이 있으신 분들을 위한 1회 수업/박스 이용권입니다.무료체험은 크로스핏이 1달 미만이신 분들만 신청 부탁드립니다!드랍인 비용은 타 박스 30,000원 / wodLog 타 지점 15,0.. 이전 1 2 다음 목록 더보기
