FrontEnd84 zod에 Data 형식 맞춰보기(feat. time) 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.. 2024. 9. 5. react-day-picker 에서 한글화 시키기 (feat. date-fns) 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";간단한 옵션 추가로 아래와 같이 한글화로 매핑됨 2024. 9. 4. [Tailwind css] gap , space (feat. Flex) 둘 다 동작은 부모에서 선언하여 자식들의 간격을 유지시켜줌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.. 2024. 9. 4. custom Infinite Scrolling hooks (with tanstack Query in Next.js) 오랜만에 무한 스크롤링 구현하면서 기록을 남겨봄두가지 커스텀 훅을 만들 예정1. 리액트 쿼리에서 제공하는 useInfiniteQuery를 활용한 커스텀 훅 ->이하 useQuery( 아래는 반환 값 ) -> useInfiniteQuery {data, fetchNextPage, hasNextPage, isFetchingNextPage, status} 2. 바닥 ref가 InView인지 확인하여 조건 만족시 fetchNextPage 발동 할 useInfiniteScroll 1. useQuery 매개변수로는 아래 요인들 ( 카테고리에서 날짜,지역,태그에 따라 보여지는 게시물들이 다름){category,searchDate,searchRegions, searchTags}일단 react-query 에서 제공 받.. 2024. 9. 3. Security Vulnerability: SSRF(Server-Side Request Forgery in axios) 깃헙 알림으로 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의 개념을 알아보고 위 이슈가 생긴 이.. 2024. 8. 14. Credetials callback function handle error (next-auth v5) 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.. 2024. 6. 17. form에서 server action 다루기 https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutationsform action에서 server action을 하기 위해서는 비동기 함수를 넘겨주면서 use server를 입력해주면 됨export default function Page() { async function createInvoice(formData: FormData) { 'use server'; const rawFormData = { customerId: formData.get('customerId'), amount: formData.get('amount'), .. 2024. 6. 15. Form에서 두개 이상의 버튼을 다루기 (feat. server action ) Form 안에 두개 이상의 버튼이 있을 경우 어떤 버튼을 클릭했는지에 따라 행하는 액션이 다를 수 있다.이 때 button의 name와 value 속성을 이용하면 form의 action에서 버튼의 주체를 파악할 수 있다.form action에서 넘겨주는 파라미터는 FormData로써 폼 안에 버튼을 클릭하면 해당하는 버튼의 name과 value 정보가 포함되어져 있다.(이 때 form 안에 input 필드가 있다면 input들의 name과 value들도 출력 됨.)import { signIn } from '@/auth';function SignIn() { const handleAction = async (data: FormData) => { 'use server'; cons.. 2024. 6. 14. 인가 서버에서 token 받아오기 (OAuth) feat. NextJs next-auth를 사용하면 provider를 통해 oauth 구현이 쉽겠지만 oauth에 대해 알고 있는 로직을 직접 구현해보고 싶어졌음https://developers.kakao.com/docs/latest/ko/kakaologin/common Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com카카오 로그인 문서에 따르면 oauth의 로직은 아래 이미지와 같다메인 페이지(Home)에 있는 카카오 로그인 버튼을 누르면 아래의 함수가 실행된다.const HomePage = () => { const handleKakaoLogin = () => { .. 2024. 6. 10. 이전 1 2 3 4 5 ··· 10 다음
