FrontEnd
-
[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 에서 제공 받..
-
Security Vulnerability: SSRF(Server-Side Request Forgery in axios)FrontEnd/JavaScript 2024. 8. 14. 15:17
깃헙 알림으로 axios로 인한 보안 취약점이 발견됐다는 메시지가 왔음SSRF에 대한 이슈였고, 해결책으로 axios의 1.7.4 버전 이상으로 업그레이드 하라고 함 Affected versions : axios(npm) >= 1.3.2, axios 1.7.2 allows SSRF via unexpected behavior where requests for path relative URLs get processed as protocol relative URLs.해당 이슈: https://github.com/axios/axios/issues/6545보안 공격으론 CSRF, XSS, SQL injection에 대해서만 알았어서 SSRF 는 처음 접하게 됨.SSRF의 개념을 알아보고 위 이슈가 생긴 이..
-
Credetials callback function handle error (next-auth v5)FrontEnd/Next.js 2024. 6. 17. 12:48
https://github.com/nextauthjs/next-auth/pull/9871 feat: customizable `authorize()` error by balazsorban44 · Pull Request #9871 · nextauthjs/next-authThis introduces a way to throw custom errors in the authorize() callback of the Credentials provider. Any generic or sensitive server error will continue to return error=Configuration (full error i...github.com기존 callback에서는 throw new Error로 처리했지만 C..