Next.js6 Next.js + jest 설정 시 react/swiper 해석이 안되는 이슈 Next.js에서 jest를 설정하던 도중 react-swiper 라이브러리 때문에 꾀나 애 먹었습니다. 먼저 swiper/css 를 해석하지 못하는 부분입니다. moduleNameMapper: { ...jestConfig.moduleNameMapper, "swiper/css": "identity-obj-proxy", }, css 모듈을 해석할 수 있도록 identity-obj-proxy 라이브러리를 사용해 주면 됩니다. 해당 문제가 해결되니, Cannot use import statement outside a module 에러가 발생합니다. 해당 부분에 대한 이슈를 검색해 보니 transformIgnorePatterns: ["node_modules/(?!(swiper|ssr-window|dom7)/)".. 2024. 4. 22. [Next.js] Next/Image layout:fill과 sizes에 대해 import Head from "next/head"; import Image from "next/image"; const src = "https://i.namu.wiki/i/hJ1KU8XudUoCnAJaFnOGYDQSPOilQhEmve4Sv7usDD4mBCPf1bWEbEiN2y6HYaua2tZ9CfgV0ulrE4g4JOmOKGfrkfXxq028P3i_W-2cwK7jtlxeoHVGK7Dsu9wY1kDITXDsMGpxGj0QkpMlxWXfvw.webp"; export default function Home() { return ( ); } 위의 소스 코드와 같이 간단한 이미지를 next/image로 렌더링한다고 생각해 봅시다. 서버에 이미지 리소스를 요청할 때 w=384라는 쿼리 파라미터가 붙은 것을 확인할 .. 2024. 3. 18. [Next.js] NextJS Boilerplate 제작기 이제 곧 개발자로 일한 지 3년 차를 앞둔 만큼 업무적으로 진행한 프로젝트와 개인적으로 진행한 사이드 프로젝트의 수가 점점 늘어가다 보니, 아무 생각 없이 자주 쓰는 코드 패턴들이 생겨나기 시작했습니다. 어떤 프로젝트를 시작할 때면, 습관적으로 익숙하고 편한 방식을 고집했던 거죠. 이전에 짜던 방식대로만 코드를 짜다 보니 코드의 퀄리티가 정체되어 있음을 느꼈습니다. 그래서 저의 코딩 스타일을 최적화하고 코드의 퀄리티를 올리기 위해 좋다고 생각했던 코드 패턴들만을 남기고, 너무 번잡하거나 엣지 케이스를 감당하기 힘들었던 부분들을 좋은 라이브러리를 사용한 코드로 대체하였습니다. 같은 동작을 하는 라이브러리들을 비교해 보고 좀 더 취향에 맞는 라이브러리들을 고르고, 공식 문서를 읽어가며 하나둘 새로운 프로젝트.. 2024. 3. 7. [Next.js] getStaticProps, getServerSideProps 제대로 이해하기 nextjs의 큰 장점 중 하나는, SSR(Server Side Rendering)이 쉽다는 것이다. 서버 사이드 렌더링은 한마디로, 서버에서 html을 렌더링해서 클라이언트에 전송해주는 것을 뜻한다. php나 jsp등 서버에서 템플릿 엔진을 이용해 html을 전송해주는 방식들이 대표적인 서버 사이드 렌더링이라고 볼 수 있겠다. 그와 반대로 클라이언트 사이드 렌더링은 브라우저(클라이언트 측)에서 html을 그리는 방식이다. nextjs의 경우 좀 더 정확히 말하면, CSR(Client Side Rendering)이 필요한 곳에 CSR을 SSR이 필요한 곳에 SSR을 적용하기 쉽게 되어있다. (Pre-rendering이라고 한다.) getStaticProps나 getServerSideProps같은 경우도 .. 2023. 2. 12. 이전 1 2 다음
