전체 글
-
shadcn/ul - Select 컴포넌트의 placeholder 색상 변경오픈소스/ui 라이브러리 2024. 9. 7. 14:40
https://github.com/shadcn-ui/ui/issues/574 Placeholder color in Select component not as expected. · Issue #574 · shadcn-ui/uiWhile I was using the form components, I noticed that the default for the placeholder in the Select component is not the same as the Input. Looking at the code I realized that the intention was for...github.com setValue("publicTag", v)}> {PUBLIC_TAG..
-
[React] 카카오 api를 통해 주소를 좌표로 변환해보기 (undefinded Geocorder)FrontEnd/React.js 2024. 9. 6. 18:08
일단 페이지에 카카오 지도가 열려있다면 단순하게 kakao.maps.services.Geocoder()를 열어서 키워드를 콜백함수에 넣어주면 쉽게 나옴. 아래는 카카오 문서에 있는 예시 // 주소-좌표 변환 객체를 생성합니다var geocoder = new kakao.maps.services.Geocoder();// 주소로 좌표를 검색합니다geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) { // 정상적으로 검색이 완료됐으면 if (status === kakao.maps.services.Status.OK) { var coords = new kakao.maps.LatLng(result[0].y, resu..
-
cloudinary API를 통해 이미지 업로드 해보기 (feat. Next.js)FrontEnd/Next.js 2024. 9. 6. 11:26
이미지를 업로드 하기 위해 cloudinary 라는 CDN 을 사용해당 api에서는 위젯과 같은 컴포넌트를 제공하지만 ui가 딱히 예쁘다는 생각이 들진 않아서 따로 사용하지 않고 upload api를 통해서 이미지 파일을 올리기로 함. ( 문서 링크 )end point는 아래와 같음https://api.cloudinary.com/v1_1/:cloud_name/:action이것을 통해 직접 입력한 값은 const endPoint = `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload`;https://www.postman.com/cloudinaryteam/programmable-media/..
-
zod에 Data 형식 맞춰보기(feat. time)FrontEnd/TypeScript 2024. 9. 5. 16:57
zod 의 날짜를 지정하는 타입은 두가지 방식이 있다. zod.date()zod.string().date()1번의 zod.date() 형식은 바로 Date 형식을 넣어주면 호환이 잘 됨. 2번의 string이라는 단어에 맞춰 zod.string().date() 는 문자열로 지정 됨. 해당 문자열은 yyyy-MM-dd 따라서 Date 형식을 바로 넣는다면 parse시 invalid 라는 에러 메시지가 뜸. 떄문에 Date 형식을 yyyy-MM-dd 으로 포맷할 필요가 있음.해당 포맷은 date-fns/format 으로 진행했음// start,end Date가 zod.string().date() 일 경우const { from, to } = selectedDate;if (from) setValue("start..
-
react-day-picker 에서 한글화 시키기 (feat. date-fns)FrontEnd/React.js 2024. 9. 4. 17:00
react-day-picker/DayPicker는 위 사진처럼 디폴트가 영어이것에 대해 각 나라별 언어를 호환할려면 date-fns/locale을 사용하면 됨 (https://daypicker.dev/docs/translation#aria-labels)import { DayPicker } from "react-day-picker";import { ko } from "date-fns/locale";간단한 옵션 추가로 아래와 같이 한글화로 매핑됨
-
[Tailwind css] gap , space (feat. Flex)FrontEnd/Tailwind css 2024. 9. 4. 09:55
둘 다 동작은 부모에서 선언하여 자식들의 간격을 유지시켜줌gap: Flexbox나 Grid 레이아웃에서 사용space: 일반적인 형제 요소들 사이의 간격을 조절할 때 사용적용 방식:gap: 부모 컨테이너에 직접 적용space: 부모 컨테이너에 적용하며, 자식 요소들에 마진을 추가.gap-x-2 { column-gap: 0.5rem /* 8px */;}.space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem /* 8px */ * var(--tw-space-x-reverse)); margin-left: calc(0.5rem /* 8px */ * calc(1 - var(--tw-spac..
-
custom Infinite Scrolling hooks (with tanstack Query in Next.js)FrontEnd/React.js 2024. 9. 3. 14:59
오랜만에 무한 스크롤링 구현하면서 기록을 남겨봄두가지 커스텀 훅을 만들 예정1. 리액트 쿼리에서 제공하는 useInfiniteQuery를 활용한 커스텀 훅 ->이하 useQuery( 아래는 반환 값 ) -> useInfiniteQuery {data, fetchNextPage, hasNextPage, isFetchingNextPage, status} 2. 바닥 ref가 InView인지 확인하여 조건 만족시 fetchNextPage 발동 할 useInfiniteScroll 1. useQuery 매개변수로는 아래 요인들 ( 카테고리에서 날짜,지역,태그에 따라 보여지는 게시물들이 다름){category,searchDate,searchRegions, searchTags}일단 react-query 에서 제공 받..
-
localStorage, sessionStorage, cookie (feat. 토큰에 대한 고찰)CS/Web 2024. 8. 30. 12:05
localStorage비휘발성 (직접 삭제하지 않는한 영구적으로 존재)브라우저를 닫아도 데이터가 유지사용자가 직접 삭제하거나 코드로 제거하기 전까지 계속 저장용량:5MB ~ 10MB의 저장 공간 (브라우저에 따라 다름)데이터 형식:key-value 쌍으로 데이터를 저장모든 값은 문자열로 저장. 객체나 배열을 저장할 때는 JSON.stringify()를 사용해 직렬화도메인 별 저장:다른 도메인에서는 접근할 수 없음setItem(), getItem(), removeItem(), clear() 등등의 메서드보안:클라이언트 측에 저장어서 유저들 또한 직접 접근 가능. HTTPS를 사용해도 XSS 공격에 취약할 수 있습니다.sessionStorage:세션 기반 지속성:데이터는 브라우저 탭 또는 창이 열려있는 동안..