전체 글

아이폰 safe area 대응을 해야할 경우가 있었는데 요렇게 선언을 해도 안먹는 경우가 있었다. top: env(safe-area-inset-bottom) viewport 에 viewport-fit 을 적용하지 않아서 난 이슈였다. viewport-fit=cover 을 적용하니 해결됨

react-query 사용시 남아있는 캐시를 날리기 위해 resetQueries 나 removeQueries를 사용한다. 모든 퀴리를 삭제하거나 reset하는경우 // resetreturn queryClient.resetQueries()// removequeryClient.removeQueries() 여러개의 쿼리키를 삭제나 reset하는경우 map 를 사용해서 여러개를 Reset할수 있다. const qurieskeies = ['getOrderExistData', 'getCouponsSummary', 'getProfileAccumulationsSummary', 'getProfileOrders', 'getProfile', 'getProfileOrders'] qurieskeies.map((qu..

tailwind tip https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/ tailwind 도입한 이유 https://fe-developers.kakaoent.com/2022/221013-tailwind-and-design-system/ tailwind config px로 작업하는경우 단위 변경을 위해 변수세팅을 한다. animation도 정의할 수 있음 /** @type {import('tailwindcss').Config} */ const px0_10 = { ...Array.from(Array(11)).map((_, i) => `${i}px`) }; const px0_100 = { ...Array.from(Array(101)).map((_, ..

next에서 getInitialProp는 권고하지 않고, getStaticProps, getServerSideProps를 사용하라고 권고 이번 프로젝트에서 페이지 앱인경우 공통으로 header값을 가져와야하는 케이스 모든페이지에 getServerSideProps를 사용할수없으니 _app.tsx에서 공통으로 처리하려고 함 그래서 getInitialProps를 사용해서 처리 getInitialProps는 getServersideProps보다 먼저 실행됨 둘다 서버에서 실행되는것으로 서버에서 header정보를 가져올 수있음 최신 next에서는 서버컴포넌트에서는 아래처럼 사용함 https://nextjs.org/docs/app/api-reference/functions/headers 이번 프로젝트는 서버 컴포넌..

useQueries는 React Query 라이브러리에서 여러 개의 쿼리를 동시에 병렬로 실행할 수 있게 해주는 훅입니다. useQuery는 단일 쿼리를 위한 것이고, useQueries는 여러 개의 useQuery를 한 번에 처리하는 데 사용됩니다. Promise.all 과 같은 역활을 하는 useQueries 사용 예시const results = useQueries({ queries: userIds.map(id => ({ queryKey: ['user', id], queryFn: () => fetchUser(id), }))})results.forEach(result => { if (result.isLoading) { console.log('Loading...') } else ..

webp란? WebP는 이미지에 대해 고효율의 손실 압축으로 구글에서 제작한 이미지 포맷입니다. WebP 형식의 이미지를 사용하여 낮은 용량의 이미지를 빠르게 로딩할 수 있어요 WebP랑 SEO는 어떤 상관이 있나요?검색시 이미지 영역에 JPG보다 WebP가 더 노출이 잘된다고 얘기할 수 없어요, 현재까지 더 잘 노출되는 것은 WebP나 jpg 중의 조건이 아니라 이미지에 캡션이나 ALT태그를 충실하게 입력한 콘텐츠였어요.하지만 WebP를 사용해야 SEO에 유리하다는 이야기의 핵심은 사용자 편의를 배려하는 겁니다.콘텐츠를 보는 사람들에게 더 낮은 데이터를 소모하게 하고 더 빠르게 로딩되게 해주며 좋은 화질을 보여줄 수 있는 서비스를 제공하는 것 당연히 더 좋겠죠.일반적으로 인터넷 속도가 매우 빠른 사용자..

테스트 한 이미지 http://rlyfaazj0.toastcdn.net/20230707/165029.463968000/Salomon-ACS-Pro-22Nightshade22.jpg 원본 다운로드 636kb사이즈 지정시 (400x500) 62.1kbimage태그 사용후 width 400 height 500 설정 54.5kb 사이즈는 별 메리트가 없어보임 CLS도 별 메리트가 없다. (이미지를 감싸고 있는 영역이 미리 잡혀있기 때문에 )placeholder로 이미지 나오게 해서 더 사용성을 높일수는 있을듯[blur 이미지]https://png-pixel.com/ [plaiceholder 사용]https://velog.io/@pds0309/nextjs-%EC%B5%9C%EC%86%8C%ED%95%9C%EC%9..

https://levelup.gitconnected.com/how-to-sort-imports-in-react-project-550f5ce70cbf' prettier와 eslint 중 하나를 선택해서 설정할 수 있다. package설치 npm install --save-dev @trivago/prettier-plugin-sort-imports // or use yarn yarn add --dev @trivago/prettier-plugin-sort-imports .prettierrc에 설정넣어주기 importOrder, importOrderSeparation을 넣어주면 되는데 나는 두가지 값을 넣어도 정렬이 되지 않아서 찾아보니 plugins를 넣어줘야 작동을 했다. importOrderSeparatio..

react hook form을 사용하면서 validate를 위해 zod패키지를 많이 사용하는것 같다, 패키지 용량도 작고 유효성검증(이메일..등등 다양한 폼요소)도 간단하게 할 수 있다. 각각 폼에 넣는것이아니라 한번에 컨트롤 할수있어서 좋은듯하다. zod 설치하기 npm add zod @hookform/resolvers import { zodResolver } from '@hookform/resolvers/zod'; import * as z from 'zod'; const schema = z.object({ selectReason: z.string().nonempty('이유를 선택해주세요'), detailReason: z.string().trim().nonempty('디테일 이버력해'), refundN..

react에서 사용했던 패키지를 next환경에서 써야하는 상황 next 환경에서 작동할수있도록 컴파일 해주는 패키지 발견 https://www.npmjs.com/package/next-transpile-modules 1. npm 모듈 설치 npm i next-transpile-modules 2. next.config 파일 설정하기 const config = require('config'); const { format } = require('date-fns'); const { ko } = require('date-fns/locale'); /** @type {import('next').NextConfig} */ const withTM = require("next-transpile-modules")([ "@f..