Sign in

nextjs

it ops nextjs aws

Next.js 정적 웹사이트 S3 + CloudFront + Route53 (가비아 도메인적용)

근래의 대부분의 웹앱의 경우 동적인 방식이 많지만 전통적으로 단일페이지와 같은 랜딩페이지류의 원페이지 형태는 화면의 내용이 바뀔 일이 없는 정적인 방식이 다수다. Next.js를 통해 ssg방식의 정적 웹사이트를 AWS에 배포해서 캐싱을 위해 클라우드프론트를 적용하고 가비아와 같은 서비스에서 원하는 도메인을 구매해서 Route53에 적용하기 까지 기억이 휘발되지 않도록 기록을 남겨보려한다. 1. Next.js 정적사이트로 앱 빌드(SSG) https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation Rendering: Static Site Generation (SSG) | Next.js Using Pages..
wono | discuss |
it dev nextjs hydration

어쩔 수 없는 hydration mismatch를 useEffect없이 해결하기

이 데이터들은 서버에서 값을 알 수 없으므로, 클라이언트에서 데이터를 처리해야 한다. 만약 이 내용을 서버에서 바로 처리하려고 하면, 서버의 결과와 클라이언트의 결과가 달라질 수 있다. 즉, hydration mismatch가 날 수 있다. 다만 이 방법도 한계가 존재한다. 텍스트 대상으로만 가능하다는 점이다. 만약, nested 된 dom 구조에…
wono | discuss |
it dev nextjs shadcnui csv

[Next.js] 리엑트 테이블 CSV 저장 구현(feat. Shadcn)

개요Shadcn의 Data Table에서 불러온 데이터를 CSV로 저장하는 기능이 필요하여 적용해보았다. export-to-csv 모듈을 설치하고 Shadcn Data Table 모듈에 버튼을 추가하여 커스텀한 페이지를 작성해 보았다. 설치다음의 모듈을 설치하고 다음의 함수를 사용한다.npm install export-to-csv --saveimport { mkConfig, generateCsv, download } from 'export-to-csv' 본문(Shadcn 커스텀)Shadcn Data Table에 CSV 다운 버튼을 적용한 파일이다.ProjectPage.tsx"use client";import * as React from "react";import { useEffect, useState }..
wono | discuss |