React/NextJS (5) 썸네일형 리스트형 NextJS Image 사용 방법 NextJS의 Image 컴포넌트를 이용하면 이미지 최적화를 쉽게 할 수 있다. 확장자를 저용량인 webp로 바꿔준다거나 viewport에 적합한 이미지를 다운로드 한다거나 lazy loading 등등 개발자가 일일이 하기 귀찮은 작업을 알아서 해준다. 다만 일반 image 엘리먼트가 아니기 때문에 잘 파악하고 있지 못하면 화면에 따라 레이아웃이 변해야하는 등의 반응형 개발에 어려움이 생긴다. 공식문서에서 소개하는 내용을 쉽게 볼 수 있도록 정리하고자 한다. src 아래와 같이 이미지를 import 해서 src에 넣는다. import Image from 'next/image' import profilePic from '../public/me.png' /* ... */ dynamic import는 불가능하.. NextJS에서 static html로 export를 해서 AWS의 S3, Route 53, Cloudfront를 이용해 배포할 때 발생하는 route 문제 해결 방법 NextJS로 작업하고 빌드하면 Server Side Rendering을 구현할 수 있다. 요청이 있을 때마다 node가 돌아가는 서버에서 html 파일을 마련해 전달한다. 그러나 빌드시 next export라는 명령어를 쓰면 Server Side Rendering이 필요 없는 정적인(static) html 파일로 뽑아낼 수도 있다. 물론 이 때에는 Server Side Rendering과 관련된 option을 사용하지 못한다. 이 파일을 배포하는 가장 쉬운 방법으로는 vercel에 remote repository를 등록해서 올리는 방법이지만 회사 등에서 AWS를 이용해 배포해야 하는 경우도 있다. 이런 때에는 route 때문에 좀 고생을 하게 되어 기록으로 남긴다. 미리 알고 있어야 할 것들 S3, R.. NextJS에서 SVG 불러오는 방법 babel-plugin-inline-react-svg을 설치한다. npm i babel-plugin-inline-react-svg 루트에 .babelrc 파일을 생성해서 아래 내용을 입력한다. { "presets": ["next/babel"], "plugins": ["inline-react-svg"] } 아래와 같이 바로 불러올 수 있다. import CircleIcon from './circle.svg'; 참고 package.json { "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@mui/icons-material": "^5.2.5", "@mui/material": "^5.2.5", "babel-plugin.. Netlify를 이용해서 NextJS 앱을 배포할 때 발생하는 문제 해결 방법 npx create-next-app 명령어를 입력하면 손쉽게 NextJS가 설정된 프로젝트를 만들 수 있다. 이를 Netlify에 배포하려다 보면 몇 가지 문제가 발생한다. 1. 컴포넌트 인식 문제 Netlify에서 배포를 위한 빌드 중 터미널에 다음 에러가 나타났다. ModuleNotFoundError: Module not found: Error: Can't resolve '../components/header' in '/opt/build/repo/pages' header라는 컴포넌트를 찾을 수 없다는 문제다. pages 폴더에 위치한 컴포넌트와 components 폴더에 위치한 컴포넌트 파일의 이름에 차이를 둬야 한다. 아래에 따르면 Netlify에서는 우분투를 사용하기 때문에 파일 이름의 시작이 대.. NextJS의 프리 렌더링(Pre-rendering)에 대해서 React는 기본적으로 CSR(Client Side Rendering) 방식이다. 리액트가 포함한 자바스크립트를 이용해 HTML을 구성하기 때문에 정적인 HTML보다 SEO(Search Engine Optimization)가 약하다. 검색엔진 크롤러가 URL로 접근해도 자바스크립트를 받기 전까지 HTML 내용을 알 수 없기 때문이다. 이를 위해 리액트를 SSR(Server Side Rendering) 방식으로 구현할 수도 있다. 설정이 복잡하기 때문에 보통은 NextJS라는 리액트 라이브러리를 사용한다. Pre-rendering SSR을 쓰면 접속시 검색엔진에 유의미한 HTML 문서를 바로 받아올 수 있다. 더 이상 다운 받은 자바스크립트를 이용해 클라이언트에서 HTML 문서를 만드는 게 아니라 클라이언.. 이전 1 다음