next
-
Next.js Image 태그 height auto로 사용하기 (update 13 version)Next.js 2023. 8. 4. 16:11
이 글은 next v13.4를 기반으로 작성되었습니다. Next 12 버전을 기반으로 height auto Image태그를 작성한 지 오래되지 않아 13 버전에서는 더욱 간단하게 사용할 수 있게 되어 소개하려고 한다. // AutoHeightImage.tsx import Image, { ImageProps } from 'next/image'; interface IAutoHeightImage extends Omit { width?: string | number; alt: string; } const AutoHeightImage = ({ width = '100%', alt = '', ...props }: IAutoHeightImage) => ( ); export default AutoHeightImage; ..
-
JavaScript에서 바로 사용하는 Tip 4가지Tip 2023. 8. 1. 15:20
1. Includes를 사용해 || 대체하기. ||는 JS를 활용한 개발을 하다 보면 정말 많이 사용하게 되는 없어서는 안 될 중요한 요소이다. 하지만 많은 것을 비교하는 상황이 된다면 오히려 코드의 가독성을 해치는 요소가 된다. 그럴 때 이 방법을 사용한다면 조금 더 가독성 좋게 사용할 수 있다. // ...other codes if ( isFirstLoading || isSecondLoading || isThirdLoading || isFourthLoading || isFifthLoading ) return 로딩 중... ; if ( [ isFirstLoading, isSecondLoading, isThirdLoading, isFourthLoading, isFifthLoading, ].includes..
-
Stylelint를 이용해 css 정리하기 (feat. Styled-Components)React 2022. 11. 14. 15:15
(이 글은 MacOS, VSCode, postcss@8.4.19, postcss-jsx@0.36.4, stylelint@14.14.1, react@18.2.0을 기반으로 작성되었습니다.) Eslint는 이제 React로 개발을 진행할 때 혼자 하는 프로젝트에서는 물론이고 같이 협업하는 프로젝트에서는 거의 필수적으로 사용하는 라이브러리입니다. 주로 Eslint + Prettier을 이용해 자동으로 Eslint에서 설정한 룰과 Prettier에서 추가한 내용에 대하여 수정하는 식으로 진행하기에 더욱 사랑받고 있는 것 같습니다. 여기에서 style에 대해서는 이런 툴이 없을까 하는 생각에 발견한 것이 바로 Stylelint입니다. 이거다 하는 생각에 신나게 설정을 진행했을 때 당황할 수밖에 없었습니다. 제가 ..
-
Next.js Conf에서 발표된 Next.js 13버전 정리Next.js 2022. 10. 29. 17:53
1. 새로운 File System Router인 app Directory(beta) 추가 pages 폴더를 이용해 간단하게 router page를 생성할 수 있다는 것은 Next의 가장 큰 킬링 포인트 중 하나였습니다. 이번 13 버전에서는 이런 Next의 장점과 React@18에서 출시한 Server Component를 효과적으로 사용할 수 있게 해 줄 app 폴더가 추가되었으며, beta상태인 지금과 달리 점점 pages 폴더를 대체해 나가거나 app은 server components용, pages는 client components용으로 적용될 것이라고 예상됩니다. app폴더는 기존 pages폴더에 많은 사람들이 만들었던 components 폴더를 합쳐둔 것 같은 폴더로 공통 layout, head,..
-
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)을 활용하기 이 방법은 ..