NextJS (4) 썸네일형 리스트형 [ Next.JS ] Input 태그에서 HEIC 확장자를 jpeg로 변환하기 프로젝트를 진행하던 도중 테스트를 하고 있는데 아이폰에서 찍은 사진을 맥북으로 받아와 업로드하려고 하는데서 문제가 생겼다. 기존에 아래처럼 accept props에 이미지의 모든 확장자를 다 받게 설정을 해뒀는데 HEIC 이미지는 여기에 해당이 되지 않아서 이미지들이 선택이 되지 않았다. 아래처럼 image/heic를 추가해 주면 HEIC 이미지들도 input에서 선택이 가능하다. 그리고 이제 HEIC 파일들을 jpeg로 변환해 주기 위해 heic2any 라이브러리를 다운로드해야 한다. 해당 라이브러리는 HEIC 파일을 JPEG 또는 PNG로 변환할 수 있다.$ npm install heic2anyhttps://www.npmjs.com/package/heic2any heic2anyConverting .. [ Next.JS ] AWS S3에 이미지(image)를 업로드, 미리보기 환경Next.js 14 APP RouterAWS SDK for Javascript v3 https://gaebarsaebal.tistory.com/79 [ AWS ] S3 버킷(bucket) 생성, 사용자 추가, 액세스 키 만들기전에 작성한 글이 있는데 너무 대충 설명한 거 같아서 다시 써야겠다.버킷 만들기1. aws에서 s3를 검색해서 들어와 버킷 만들기로 들어간다.2. 버킷 이름을 적는다.3. 나는 현재 계정에서만 사용할gaebarsaebal.tistory.comS3 bucket 설정은 이 전 포스팅에서 다룬다. 나는 S3 이미지 업로드를 서버에서 할 것이다. 클라이언트에서 할 수도 있지만 클라이언트에서 하면 AWS key가 노출될 위험이 있고 Presigned URL을 사용해 key의 노출을 막을.. [ Next.js] Image태그의 sizes 환경Next.JS 14 APP route 지금 진행 중인 프로젝트가 있는데 Next.js로 하고 있다. 해당 프레임워크를 사용하는 이유 중 하나가 Image 최적화 때문인데 중고거래 사이트에서 가장 중요한 건 많은 양의 이미지를 다루는 만큼 Image 최적화가 중요하다 생각이 들어 Next.js를 골랐다. Next.js에서 어떻게 이미지를 최적화할 수 있을까?sizes 이미지의 크기를 설정할 때 width, height를 줄 수 있는데 이미지를 반응형으로 만들기 위해서는 해당 props를 사용할 수 없다. 그러면 fill을 사용해야 하는데 fill은 이미지를 부모의 크기를 기반으로 생성이 된다. fill을 사용하기 위해서는 부모는 반드시 relative 속성을 줘야 함 부모의 크기를 채우기 위해서는 페이.. [NextJS] 스크롤 애니메이션 구현하기 IntersectionObserver API IntersectionObserver API 는 특정요소가 뷰포트와 교차하는지 비동기적으로 관찰하는 데 사용된다. 이걸로 스크롤 애니메이션을 구현할 수 있다. 코드 : function Item({ children }: { children: React.ReactNode }) { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach(({ target, isIntersecting }) => { if (target === ref.current) setVisible(isInt.. 이전 1 다음
