next
-
Next Image 똑똑하게 사용하기(feat. Vercel Deploy)Next.js 2022. 10. 24. 18:56
1. 개요 웹 사이트를 제작할 때 로딩 속도와 퀄리티에 있어 가장 중요한 부분은 이미지라고 생각합니다. 너무 낮은 화질의 이미지를 사용할 경우 로딩 속도는 빨리질 수 있지만 사이트의 전체적인 퀄리티는 무척 낮아 보이는 문제가 발생하며, 이미지가 너무 높을 경우 이미지를 로딩하는데 긴 시간이 걸려 레이아웃 쉬프트가 발생하거나 사이트의 전체적인 로딩이 늦어질 수 있습니다. 그렇기 때문에 웹 사이트를 제작한 뒤 최적화를 진행할 때 가장 먼저 진행해야 되는 부분이 이미지를 최적하는 것이라고 생각합니다. 이번 글에서는 Next를 사용하는 데 있어 제가 이미지를 최적화하는 방법에 대해 소개하겠습니다. 2. Web에서 주로 사용하는 이미지 형식 JPEG : 가장 널리 사용하는 파일 형식으로 거의 모든 브라우저에서 ..
-
NextJS Data Fetching (feat. CSR, SSR, SSG, ISR)Next.js 2022. 8. 29. 16:43
1. Data Fetching이란 SPA가 Web 세상에서 새로운 시대를 열었다는 것에 의문을 제시할 사람은 없을 것이다. 기존에 페이지를 이동할 때마다 새로고침이 되며 빈 화면을 봐야 했던 이용자들은 이제 로딩이 없는 것과 비슷한 환경에서 사이트를 사용할 수 있게 되었기 때문이다. 이는 확실히 획기적이었고 대다수의 웹사이트가 이제는 SPA로 되어있고 변화하고 있다. 하지만 SPA에도 치명적인 문제가 있었다. 웹사이트의 운영자들은 어떻게든 네이버나 구글 등의 검색 결과에 자신의 웹사이트가 노출되기를 원하는데 SPA의 경우 페이지를 모두 그린 뒤 데이터를 가지고 오는 CSR방식이 기본이기에 검색 사이트들의 Bot이 웹사이트에 접속했을 때 아무것도 없는 빈 페이지로 판별해 버렸기 때문이다. (물론 최근 구글..
-
NextJS에서 react-query 사용하기Next.js 2022. 8. 15. 17:00
(해당 글은 next@12.2 react-query@3.39.1을 바탕으로 작성되었습니다.) 1. 왜 react-query인가? 이제 개발을 할 때 react-query는 필수에 가까운 요소가 됐다. 물론 NextJS를 사용하고 문서를 읽어본 사람들이라면 이런 의문을 가질 수 있다. swr이 있는데? 물론 두 라이브러리 모두 좋은 라이브러리이다. 하지만 react-query를 사용해야 되는 이유를 간략하게 설명하겠다. 1. swr은 데이터 패칭(fetching)을 위한 리액트 훅이다. 이 말을 간단하게 이야기하자면 swr과 react-query는 get을 위한 useQuery는 존재한다. 그러나 post를 위한 useMutation은 react-query에만 존재한다. 물론 swr 역시 mutate가 있..
-
NextJS Babel에서 SWC로 이사가기 2Next.js 2022. 5. 20. 12:21
( 이 글은 next@12.1.6, antd@4.20.5를 기반으로 작성되었습니다. ) 이전 글에 이어 Babel에서 SWC로 넘어갈 수 없었던 가장 큰 이유를 해결한 방법에 대해 써보겠다. 1편에 썼던 내용 중 styled-components에 대한 swc지원은 가장 빠른 수준으로 작성되었기에 해당 부분에 대해서는 큰 문제가 없었다. 하지만 가장 큰 문제는 내가 즐겨 사용하는 antd의 customize theme를 이용하지 못하는 문제였다. 해당 기능을 NextJS에서 이용하기 위해서는 next-plugin-antd-less라는 플러그인을 사용해야 한다. 이곳에서 문제가 발생했기에 여러 시행착오를 겪어야 했다. 1. antd의 Dynamic Theme (Experimental)을 활용하기 이 방법은 ..
-
NextJS Image태그를 활용한 스켈레톤(Skeleton)처리Next.js 2022. 4. 21. 18:18
스켈레톤(Skeleton)의 필요성 개인적인 생각으로 웹에서 사용자 관점에서 가장 완성도가 떨어져 보이는 요소는 과도한 Layout Shift라고 생각한다. 그렇기에 프로젝트를 진행할 때 스켈레톤 적용에 무척 긍정적이며 더 나아가 꼭 적용해야 되는 요소라고 생각한다. NextJS Image에서의 처리 방법 그런 점에서 NextJS의 Image태그에는 loading을 blur 처리할 수 있다. 하지만 외부에서 가지고 오는 동적 이미지의 경우 blur 처리하기 위해서는 blurDataURL속성을 입력하라고 되어 있다. 그리고 해당 내용에 대해 NextJS의 공식 Docs에서는 plaiceholder를 사용하는 것을 추천한다. 내가 사용할 방법은 아니지만 해당 방법의 로직을 간단하게 설명하자면 이런 방식이다...
-
NextJS 11버전에서 next Image 태그 사용하기Next.js 2021. 8. 9. 15:14
NextJs 10 버전에서 처음 나온 Image태그의 11 버전에서의 변동된 부분 중 개인적으로 만족했던 기능들에 대해 설명해 보겠습니다. 정적 이미지의 경우 10버전에서 width, height 값이 필수였던 것과 달리 image를 import 해서 사용할 경우 높이와 넓이를 동적으로 설정해 줍니다. 물론, 높이나 넓이 중 하나만 정의하여 다른 한 값만 자동으로 지정하게 하는 것도 가능합니다. 그리고 blur라는 placeholder속성이 추가되어 네트워크가 느린 환경에서 로딩 중 이미지를 흐리게 보여주는 기능이 추가되었고, Next.js의 새로운 버전에서는 또한 Image 태그의 백엔드에서 제공하는 blurDataURL prop을 사용해 흐린 동적 이미지를 지원합니다. 서버에서 blurha.sh와 같..