Next.js 이미지 최적화

Next.js에서는 기본적으로 `<Image>` 컴포넌트를 제공해준다.이 이미지 컴포넌트는 이미지를 자동으로 최적화시켜준다. 1.최신 이미지 형식을 사용, 각 디바이스에 대응한 크기의 이미지 2.layout shift 방지 3.lazy loading

2024-03-03

포트원 인증 결제 모듈 사용기 in Next.js 13

인증결제는 신용카드 결제시 PG사로 부터 결제에 대한 인증 결과 수신 이후 해당 인증키로 결제를 요청하는 결제 방식을 지칭한다. 국내에서 제일 많이 볼수 있는 결제방식이며 결제 주문페이지에서 결제가 요청되면 각 PG사의..

2024-02-25

Next 13: Error Handling

예상치 못한 런타임 오류를 우아하게 처리: error.js 파일 규약을 사용하면 중첩된 라우트에서 예상치 못한 런타임 오류를 우아하게 처리할 수 있다.

2024-02-18

운영, 개발 브랜치 나눠서 배포해보기

이번에 프로젝트 오픈전에 운영과 개발 서버를 나눠서 진행하면 좋을 것 같아서 혼자서 테스트로 배포해보았다. 배포해보는 김에 이렇게 나눠서 진행하면 좋은지에 대해 한번 생각해보기 위해 간단하게 작성해본다. 보통 개발 단계, 테스트 단계, 스테이징(준운영) 단계, 그리고 실제 운영 단계에서 발생할 수 있는 다양한 동작 및 문제를 분리하여 다룬다.

2024-01-28

상태 관리를 URL로 구현하기

이번에 프로젝트를 시작하면서 `페이지(page)`와 `페이지 수(size)`, 그리고 여러개의 `필터값`을 통해 인플루언서를 검색하는 페이지를 개발하게 되었다. 맨처음 개발에 들어갔을 때, 최대한 빨리 레이아웃과 API 연동을 완료한 결과물을 보여줘야할 상황이었기 때문에 내 나름대로 간단하게 구현하였다...

2023-12-16