웹/프론트엔드25 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. [Babylon.js] Gimzo, GimzoManager를 pub/sub 패턴으로 관리하기 Babylon.js에서 gimzo를 다뤄야 할 때가 있습니다. 서버에서 저장된 메쉬 정보를 불러와 메쉬들을 그려준 뒤, React component에서 메쉬들의 정보를 띄워준다고 가정해 봅시다. 그리고 그 메쉬정보를 클릭하면 해당하는 메쉬에 gizmo가 부착되어야 하는 상황입니다. 이때 State와 GizmoManager를 동기화하기가 꽤 까다롭습니다. 이때 pub/sub 패턴을 적극 활용하면, 손쉽게 gizmo를 관리할 수 있습니다. 먼저 메쉬들과, 선택된 메쉬의 정보가 있는 zustand store를 하나 생성합니다. import { AbstractMesh, Nullable } from "@babylonjs/core"; import { create } from "zustand"; import { su.. 2023. 6. 25. 이전 1 2 3 4 ··· 7 다음
