[Next.js 14] OTF 로컬 폰트 적용하기

Next.js 14 프로젝트에 `.otf` 리디바탕 폰트를 추가해 보자! `public/fonts` 디렉토리에 폰트 파일을 추가했다. import localFont from "next/font/local";const ridiBatang = localFont({ src: "../../public/fonts/RIDIBatang.otf", display: "swap",});`src/app/layout.tsx`에서 `localFont`를 import하고 올바른 경로에서 폰트 파일을 불러온다. export default function RootLayout({ children,}: Readonly) { return ( {children} );} `RootLa..

• format_list_bulleted JavaScript
• · 2025. 2. 24.
• textsms

[React] react-tooltip 렌더링 성능 최적화

react-tooltip 성능 저하 이슈프로젝트 진행 중에 데이터는 빨리 불러오는데 렌더링까지 오랜 시간이 걸리는 이슈가 있었다. 코드를 살펴보다가 react-tooltip 코드가 문제였다는 것을 발견했다. React Tooltip BAD Case// ❌ BAD {myItems.map(({ id, content, tooltip }) => ( {content} ))} `events`의 모든 항목마다 `Tooltip` 컴포넌트를 생성하고 있던 것이 성능 저하의 이유였다. 불필요하게 많은 양의 컴포넌트를 사용하는 것은 피해야 합니다. 대부분의 경우 전체 애플리케이션에서 사용하는 하나의 툴팁 컴포넌트로 충분합니다.react-tooltip의 공식 문서에도 내 코드와 똑같은 ..

• format_list_bulleted JavaScript
• · 2025. 2. 1.
• textsms

Next.js & Supabase 프로젝트 생성 및 기초 세팅

슈퍼베이스를 사용하는 Next.js 프로젝트를 생성해 보자. Next.js app 생성npx create-next-app -e with-supabase다음과 같은 항목들이 미리 구성되어 있는 앱을 생성한다.Cookie-based AuthTypeScriptTailwind CSS `npm run dev`로 앱을 실행했을 때 화면이다. 스크롤 내리면 체크리스트도 있다. Supabase 프로젝트 연결슈퍼베이스 프로젝트를 생성한다. database.new `env.example` 파일 이름을 `env.local`로 변경하고 환경 변수를 입력한다. 프로젝트를 생성했다면 슈퍼베이스 공식문서 3번 항목에서 친절하게 입력할 값을 모두 알려준다. Supabase 데이터 쿼리프로젝트가 잘 연결됐는지 확인해 보기 위해 테스..

• format_list_bulleted JavaScript
• · 2024. 12. 24.
• textsms

[TIL] 2023.07.04 Vercel 배포 후 CORS 에러 해결하기

Access to XMLHttpRequest at 'http://localhost:3000/api/service' from origin 'https://test.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. dev 환경에서는 아무 문제 없었는데 Vercel로 배포한 후에 데이터를 조회화면서 CORS 에러가 발생했다. const getResvData = () => { return axios .get('http://localhost:3000/api/reservation') .then((res) => { return res.data.dat..

• format_list_bulleted JavaScript
• · 2023. 7. 4.
• textsms

[TIL] 2023.07.01 Next.js_router.push와 router.replace의 차이점

useRouter import { useRouter } from 'next/navigation'; Next.js 13부터는 `useRouter`를 'next/router'가 아닌 'next/navigation'에서 import 해서 사용해야 한다! 만약 `useRouter`를 'next/router'에서 import하면 이미지와 같은 에러가 발생한다. 잠시 router 관련 Next.js 13에서 달라진 점을 살펴보자. Migrating from the pages directory: The new useRouter hook should be imported from `next/navigation` and not `next/router` The pathname string has been removed a..

• format_list_bulleted JavaScript
• · 2023. 7. 1.
• textsms

[TIL] 2023.06.27 'StaticImageData' 형식은 'string' 형식에 할당할 수 없습니다

'{ img: StaticImageData; category: string; title: string; }' 형식은 'CardType' 형식에 할당할 수 없습니다. 'img' 속성의 형식이 호환되지 않습니다. 'StaticImageData' 형식은 'string' 형식에 할당할 수 없습니다.ts(2322) import 한 jpg 파일의 타입을 지정하는 과정에서 상단의 error가 발생했다. type CardType = { img: string; category: string; title: string; }; type CardProps = { CardInfo: CardType; }; 전달받은 props의 `type` 구조는 다음과 같다. CardType의 `img: string`에서 error가 발생한 것..

• format_list_bulleted JavaScript
• · 2023. 6. 27.
• textsms

[React] 토스페이먼츠 API로 Paypal 연동 해외결제 구현하기

6월 1일에 출시된 따끈따끈한 토스페이먼츠 Paypal 연동 해외결제 API. React와 Next.js로 Paypal 해외결제를 구현한 과정을 기록으로 남겨보려 한다. 참고로 이번 프로젝트는 결제 수단이 Paypal 해외결제 한 가지였기 때문에 결제위젯을 사용하지 않고 예약 페이지 내의 결제 버튼을 클릭했을 때 바로 Paypal 결제 페이지로 연결되도록 구현했다. 1. npm 패키지 설치 npm install @tosspayments/payment-sdk npm install nanoid `script` 태그에 결제위젯 SDK 파일을 추가하는 방법이 아닌 npm 패키지로 설치하는 방법을 선택했다. nanoid는 결제 요청 시 `orderId`를 랜덤으로 생성하기 위해 설치한다. 2. API 키 준비 /..

• format_list_bulleted JavaScript
• · 2023. 6. 14.
• textsms

[Next.js] Next.js 13에서 SSG, SSR, ISR 적용하기_fetch() API

NEXT.JS 13 버전에서는 `getStaticProps`, `getServerSideProps` 함수를 더 이상 사용하지 않는다는 소식을 보고 그럼 SSR과 SSG는 어떻게 적용할 수 있는 걸까 궁금해서 찾아봤다. 일단 NEXT 13부터 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작하게 되었으며 SSR, SSG, ISR을 적용하기 위해서 `getStaticProps`, `getServerSideProps` 등의 함수가 아닌 `fetch` API를 사용한다. Data Fetching // This request should be cached until manually invalidated. // Similar to `getStaticProps`. // `force-cache` is the defaul..

• format_list_bulleted JavaScript
• · 2023. 6. 10.
• textsms

[TIL] 2023.06.07 word-break로 문자열 줄바꿈하기

table body에 띄어쓰기 없이 영어로 텍스트를 입력했을 때 줄 바꿈이 되지 않고 테이블 레이아웃이 깨지면서 가로 스크롤이 생기는 문제가 발생했다. 테스트 삼아 일반적인 영어 텍스트를 작성했을 때는 아무 문제없는 것을 알아냈다. 그래서 띄어쓰기 없이 작성한 것이 문제인가 싶어서 관련 키워드로 검색을 해봤다. word-break: break-all; 이것저것 검색해 보다가 알게된 것이 css word-wrap 속성. word-wrap: break-all을 적용했더니 내가 원하는 대로 띄어쓰기 없이 글을 작성했을 때에도 줄 바꿈이 잘 되는 것을 확인할 수 있다. +) 근데 `word-break: break-all` 속성을 지정했더니 단어가 깨지면서 개행되는 문제가 있었다. 나는 테스트 용으로 띄어쓰기 없..

• format_list_bulleted JavaScript
• · 2023. 6. 7.
• textsms

[React] resize 이벤트로 브라우저 크기에 따라 javascript 적용하기

CSS와 관계없이 브라우저의 width에 따라 컴포넌트 내에서 javascript를 다르게 적용하기 위해 resize 이벤트를 사용했다. resize 이벤트 const [width, setWidth] = useState(window.innerWidth); const isMobile = width { setWidth(window.innerWidth); }, 200); useEffect(() => { window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); // cleanup }; }, []); resize 이벤트는 document view의 크기가 변경될 때..

• format_list_bulleted JavaScript
• · 2023. 6. 7.
• textsms