Web/Next.js5 Next.js의 이미지 최적화와 <Image /> 컴포넌트 웹사이트의 이미지 최적화는 속도 최적화와 검색엔진 최적화 크게 두단계로 나눠볼 수 있다. 1. 기본 이미지 최적화 방법웹사이트를 제작할때는 수많은 이미지가 사용된다. 대부분의 웹사이트는 이미지가 차지하는 용량이 아주 크고, 최적화가 이루어지지 않은경우 더욱더 커지게 된다.이미지 사이즈 최적화는 웹페이지 최적화의 기본이다.1-1. 이미지 포맷 선택흔히 알고있는 이미지 포맷은 JPEG(JPG), PNG, GIF이다. JPEG(JPG) : 주로 사진, 복잡한 이미지에 사용한다. 손실압축 방식을 사용하여 사진의 품질이 조금 떨어지는대신 용량을 크게 줄일 수 있다. 투명도를 지원하지 않는다.PNG : 주로 그래픽, 로고, 패턴 등의 이미지에 사용한다. 비손실 압축방식을 사용하여 일반적으로 JPEG보다 용량이 크지.. 2024. 12. 13. Next.js에서 sessionStorage 사용하기 next.js의 클라이언트 컴포넌트에서 세션스토리지를 사용하면 세션스토리지가 정의되어있지 않다는 에러(ReferenceError: sessionStorage is not defined)가 발생한다. 사용자의 브라우저에 있는 세션스토리지를 사용하기위해서는 클라이언트측에서 sessionStorage가 사용되도록 해야한다. next.js는 기본적으로 서버측에서 페이지를 만드는 SSR 환경이기때문에 단순히 가져다 사용할경우 에러가 발생한다. 이를 해결하기 위해서는 조건부 실행, 클라이언트 사이드 함수 활용 등의 방법이 있다. 1. 조건부 실행 (window 객체 검사)window의 정의여부를 검사하여 현재 코드가 서버에서 실행되고 있는지 클라이언트에서 실행되고 있는지를 알 수 있다.아래와 같은 코드로 조건부 실.. 2024. 9. 22. 컴포넌트 속 컴포넌트 (import와 children의 차이) Next.js는 클라이언트 컴포넌트와 서버 컴포넌트를 둘다 사용할 수 있다. 컴포넌트를 분리 사용하다보면 import를 통해 불러와 필요한곳에 컴포넌트를 집어넣어 사용하게 되는데 서버 컴포넌트를 클라이언트 컴포넌트에서 가져와 실행하면 오류가 발생하는것을 알 수 있다. 1. 서버 컴포넌트와 클라이언트 컴포넌트아래 링크에 자세한 설명이 작성되어있다. Next.js의 use client와 use server Next.js의 use client와 use serverNext.js는 React를 기반으로 한 프레임워크중 가장 대표적인 프레임워크이다. 클라이언트 사이드 렌더링과 서버 사이드 렌더링을 지원하여 양쪽의 특징을 선택적으로 사용할수 있다는것이 가장 큰cstelladev.tistory.com 즉, 서버 컴포.. 2024. 6. 6. URL의 구조와 next.js의 navigation 및 동적 라우팅 웹페이지의 이동간에 URL에는 많은 정보를 담아둘 수 있다.path와 query를 활용하면 여러가지 정보를 URL에 담아 특정 페이지 렌더링에 사용하거나 API 요청에도 활용할 수 있다.기본 URL의 구조는 다음과 같다.프로토콜 : 브라우저가 리소스 요청에 사용하는 프로토콜을 명시. (HTTP, HTTPS, FTP 등)도메인 : 요청할 웹서버의 도메인포트번호 : 웹 서버 리소스 접근에 필요한 게이트인 포트번호패스(path) : 웹서버에 있는 리소스의 경로를 표시파라미터(query string) : 웹 서버에 추가적으로 제공하는 매개변수(파라미터). 이하 쿼리로 작성프래그먼트(앵커) : 리소스 내부의 일정 요소를 표시 패스와 쿼리의 차이패스(path) : 웹서버 특정 리소스의 위치를 지정하는데 사용된다. .. 2024. 4. 18. <Link> 컴포넌트와 passHref 컴포넌트 HTML 문서에서 기본적으로 사용되는 태그는 문서 전체를 재렌더링 하므로 SPA인 React와 Next.js 환경에서는 사용이 권장되지 않는다. 이에 router.push()를 사용하면 빌드 후 이동주소가 HTML 상에 표시되지않아 SEO(검색엔진 최적화)에 불리하다. 태그를 활용하면 SEO에 유리한 a태그의 장점을 그대로 가져오면서 문서 전체가 재렌더링되는것을 방지할 수 있다. import Link from "next/link"; next/link import후에 사용할 수 있으며 컴포넌트로 형태로 사용한다. passHref 컴포넌트를 사용할때 컴포넌트 안에 있는 자식 컴포넌트(예: styled component)로 href속성을 강제 전달해준다. 의 기능을 사용하고 디자인은 커스터마이징 하고.. 2024. 1. 19. 이전 1 다음
