새롭게 프로젝트 시작하기 전에 가볍게 Nextjs 14.0.4 환경에서 빌드한 파일을 용량 최적화와 함께 Docker로 한번 배포해보자 사실 vercel 에서 제공하는 Dockerfile 과 docker-compose 를 거의 복사 붙여넣기에 가까운 글이니 https://github.com/vercel/next.js/tree/canary/examples/with-docker-compose 직접가서 뜯어보시며 보는것도 나쁘지 않다고 생각함 시작은 craete-next-app 아무것도 안건들꺼다 프로젝트 최상단 경로에 Dockerfile 생성 FROM node:18-alpine AS base # Install dependencies only when needed FROM base AS deps # Check..

Nextjs 13 의 app router 에서는 server component 와 client component 를 각각 따로 지원하는데 만약 간단한 Data fetching 만이 목적이라면 굳이 React-Query 를 사용하지 않는게 좋다고 생각한다. 그런데 React-Query의 기능들을 몇가지 접하다보니 인기가 있는 이유를 새삼 깨닫는 중이다 그중 React-Query 의 가장 기본이라 볼 수 있는 useQuery 에 대해 특히 그 옵션들에 대해 깊게 파헤쳐보자 기본세팅은 남자답게 알아서 했다는 전제하에 설명하므로 provider 로 감싸는 정도는 하고 읽기를 바랍니다 공식문서를 보면 useQuery 에 required 가 붙어있는 두가지 옵션이 있다. 두개 옵션은 무조건 쓰라는 말인데. 1. q..

Nextjs 13 의 Demo 파일을 둘러보다 컴포넌트를 꽤 멋지게 재활용하는 방법이 있어 소개한다. 과정에서 type 지정을 하는 방법을 새롭게 알게되어 함께 공유한다. typeof 연산자는 객체 데이터를 객체 타입으로 변환시켜주는 연산자이다. 사용예시를 보며 이해해보자 svg 아이콘을 재사용 가능하도록 각각 함수로 만들어보자 svgProps 에는 className 이 들어올 예정이다. 아이콘을 불러올 index.tsx 를 만들어 주고 함수를 import 해오자 먼저 각 함수들을 components 객체에 담아준다. 객체에 typeof 를 사용하면 하나하나 지정할 필요 없이 객체에 쓰인 타입 구조를 그대로 가져와 독립된 타입 으로 만들어 사용이 가능하다. 추가로 keyof 를 사용하면 객체 형태로 된 ..