NextJS

들어가기에 앞서, 프론트엔드에 많은 양의 이미지를 저장하는 것은 유지보수가 어렵고, 권장되지 않습니다.많은 이미지를 수반한다면 CDN 서비스를 사용하는 것이 좋습니다.이 포스팅은 프론트엔드 서버를 사용하지 않는 정적 배포를 기준으로 작성합니다 !!1. 이미지 파일을 어떻게 관리할까?NextJS 환경에서 이미지 저장 경로는 크게 2종류로 나눌 수 있습니다.public 폴더src 폴더 하위 경로You can store static files, like images and fonts, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the b..

Next + Nest + Nginx의 조합으로 돌아가는 MVP 제품 개발 환경에서 문제가 발생했습니다.기획 당시 SEO를 중시하는 프로젝트 특성 상 앱 라우터를 선택했고,앱 라우터는 페이지간 라우팅 시 서버 렌더링이 원칙입니다.막상 구현을 하고 나니, 페이지간 전환 딜레이가 거슬릴 정도로 오래 걸려서..Suspense 기능을 이용하기로 마음먹었습니다.(2초~3초나 걸리기도 했음.. 현재는 프론트 백 모두 개선을 거쳐서 1초 미만입니다 ^^)import { Suspense } from 'react';...export default async function PoliticianPage({ params,}: { params: { politicianId: number; issueId: number };}) ..

아래와 같은 코드가 있습니다. // Profile.tsx export default function Profile() { ... } // Card.tsx const Card = ...; const CardHeader = ...; const CardFooter = ...; const CardTitle = ...; const CardDescription = ...; const CardContent = ...; export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } Profile 컴포넌트를 export 할 때는 export default를 사용하고, Card에 관련된 const들을 export 할 때는 export를 사용..