TIL (95) 썸네일형 리스트형 TIL - 수평 스크롤 문제 해결 문제수평 스크롤을 휠로 처리하려는 시도에서 스크롤이 끊기는 문제가 발생함.터치 스크롤에 대한 지원이 부족함.시도한 해결 방안커스텀 훅 사용구현: useHorizontalScroll 커스텀 훅을 사용하여 휠 스크롤 이벤트를 수평 스크롤로 변환.문제점: 이벤트 요청이 많아서 스크롤이 끊기는 문제가 발생. 디바운싱을 적용했으나 여전히 불완전함.Swiper 라이브러리 사용구현: Swiper 라이브러리를 사용하여 슬라이드와 수평 스크롤을 구현.해결:Swiper의 mousewheel 모듈을 사용하여 휠 스크롤을 자연스럽게 처리.freeMode 옵션을 통해 자유로운 스크롤과 슬라이드 이동을 구현.터치와 마우스 휠 모두 안정적으로 처리됨.import { Swiper, SwiperSlide } from 'swiper/r.. TIL - 리팩토링 Zustand를 이용한 상태 관리 통합 문제 상황운동 기록 페이지에서 상태 관리의 복잡성이 문제가 되었음. 페이지 컴포넌트는 전역 상태를 관리하고, 폼 아이템 레벨에서는 지역 상태를 관리하는 방식으로 구현되어 있었음. 이로 인해 상태 동기화와 데이터 흐름에 어려움이 발생했음. 상황 요약:전역 상태: 세트당 거리, 시간 또는 무게 횟수와 같은 폼 데이터를 포함하여 여러 컴포넌트에서 참조됨.지역 상태: 페이지 컴포넌트에서 관리되는 운동 기록 상태는 하위 컴포넌트로 props로 내려줌.문제점: 상태의 동기화 및 관리가 복잡해짐. 전역 상태와 지역 상태 간의 불일치가 발생함. 리팩토링 내용상태 관리 구분:전역 상태: Zustand 스토어에 통합하여 여러 컴포넌트에서 공유하는 상태 관리 (record, isBookMark, cardioInputs, w.. TIL - 회원가입 이메일 중복 확인 로직 개선 - 실시간 검사 디바운싱 적용 (트러블 슈팅) 배경기존: 중복 확인 버튼을 통한 이메일 중복 확인변경 필요성: UI/UX 개선을 위해 버튼이 제거되고 실시간 중복 확인 필요 문제 해결 과정1. 초기 접근: 실시간 중복 확인 구현구현: 입력 값 변경 시마다 서버에 중복 확인 요청문제점: 매 입력마다 서버 요청 발생, 성능 저하 우려2. 디바운싱 적용 시도목적: 불필요한 서버 요청 감소구현: lodash의 debounce 함수 사용const debouncedCheckEmail = debounce((value) => { // 이메일 중복 확인 로직}, 1000);결과: 매 입력마다 서버 요청 발생 3. 메모이제이션 시도 (useCallback, useMemo)목적: 불필요한 함수 재생성 방지, (리렌더링마다 디바운싱 함수가 생성되는 것을 원인으로 생각.. TIL - 공통 컴포넌트 input에 커스텀 date 넣기 학습 내용1. 커스텀 캘린더 구현dayjs 라이브러리를 활용한 날짜 조작 및 비교Swiper 라이브러리로 월 간 슬라이딩 기능 구현현재 월 중심으로 전후 6개월씩, 총 13개월 데이터 생성2. Input 컴포넌트 확장기존 Input 컴포넌트에 'date' 타입 추가선택된 날짜 표시 및 캘린더 팝업 기능 구현3. 스타일링Tailwind CSS를 사용한 반응형 디자인오늘 날짜, 선택된 날짜 등 특정 조건에 따른 스타일 적용주요 코드 구현MonthCalendar 컴포넌트const MonthCalender = ({ selectedDate, onSelectDate, onChangeMonth }: MonthCalendarProps) => { const [months, setMonths] = useState([]).. TIL - input 공용 컴포넌트 이벤트 처리 기능 추가 오늘 Input 컴포넌트에 드롭다운 기능과 텍스트 정렬 기능을 추가했습니다. 이를 통해 컴포넌트의 유연성과 재사용성을 크게 향상시켰습니다.Input 컴포넌트 드롭다운 이벤트 처리 기능 추가드롭다운 옵션에 개별적인 아이콘과 클릭 이벤트를 추가할 수 있도록 구현했습니다.} isDropdown dropdownOptions={[ { value: '테스트 1', icon: , onClick: () => console.log('테스트 1 clicked'), }, { value: '테스트 2', icon: , onClick: () => console.log('테스트 2 clicked'), }, ]}/>;주요 개선사항:각 드롭다운 옵션에 .. TIL - 운동 기록 루틴 Supabase 연동 운동 루틴 등록 API 구현import { createClient } from '@/supabase/server';import { NextRequest, NextResponse } from 'next/server';export const POST = async (request: NextRequest) => { try { const supabase = createClient(); // 사용자 인증 확인 const { data: { user }, error: authError, } = await supabase.auth.getUser(); if (authError || !user) return NextResponse.json({ error: 'Unauthoriz.. TIL - 드롭다운 구현 select에서 커스텀 button+ul로의 전환 초기 설계 의도:목표: 텍스트 입력과 드롭다운 선택을 모두 지원하는 범용 Input 컴포넌트 생성접근 방식: InputText와 InputSelect를 하나의 Input 컴포넌트로 통합type InputProps = (InputTextProps | InputSelectProps) & { isDropdown?: boolean };초기 구현의 문제점:InputSelect에서 HTML 요소 사용 시도타입 정의type InputSelectProps = BaseInputProps & ComponentProps & { dropdownOptions: string[];};발생한 문제:스타일링 제한: 의 드롭다운 모양 커스터마이징의 어려움타입 불일치: select 속성과 필요한 커스텀 기능 간 충돌이벤트 처리의 복잡.. TIL - border bottom 그라데이션 구현하기 오늘 input 요소의 border-bottom에 그라데이션을 적용하는 과정에서 여러 방법을 시도하고 학습했습니다. 1. border-image 속성 사용 (첫 번째 시도): - 시도한 코드:'border-image': 'linear-gradient(to right, #12F287 0%, rgba(18, 242, 135, 1) 50%, #12F287 100%)1 - 문제점: 시작과 끝 부분이 rgba가 아니어서 그라데이션 효과가 제대로 나타나지 않았음2. Tailwind plugin을 사용한 방법 (두 번째 시도): - tailwind.config.js에 다음과 같은 plugin 추가: plugin(function ({ addUtilities }) { const newUtilit.. 이전 1 2 3 4 5 ··· 12 다음
