분류 전체보기151 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. [TypeORM] 커스텀 값 entity에 매핑하여 들고오는 법 아래와 같은 유저 테이블이 있습니다. @Entity("users") export class User extends IdEntity implements UserScheme { @Column() password: string; @Column({ unique: true }) social_id: string; @Column() name: string; @Column() sex: boolean; @Column() phone: string; @Column({ unique: true }) email: string; @OneToMany(() => UserInClub, (userInClub) => userInClub.user, { cascade: true, }) public clubs: UserInClub[]; @One.. 2024. 2. 7. 이전 1 2 3 4 ··· 38 다음
