개발 메모장 개발 메모장

antd

• NextJS Babel에서 SWC로 이사가기 2

  Next.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)을 활용하기 이 방법은 ..

  Read More
• NextJS Babel에서 SWC로 이사가기 1

  Next.js 2022. 5. 17. 15:27

  ( 이 글은 next@12.1.6, antd@4.20.5 을 기반으로 작성되었습니다. ) NextJS가 12 버전으로 올라가면서 가장 큰 변화는 개인적으로 Babel에서 Rust Complier인 SWC가 나온 것이라고 생각한다. 물론 Babel에서 바로 이동하기에는 지원하는 부분이 거의 없었기에 바로 사용하는 것이 불가능했다. 하지만 이제 NextJS의 버전이 12.1이 되고 내가 사용하는 모든 부분이 대체가 될 수 있도록 변경되었기 때문에 이번에는 Babel에서 SWC로 변경하는 간단한 방법을 소개하려 한다. .babelrc를 제거한다. 사실 이것으로 swc가 활성화되는 기본 요건은 완성되었다. 이제 여기에 내가 사용하던 babel의 요소를 swc에서 활성화시켜주겠다. 1. Minification 적..

  Read More
• NextJS에서 antd less파일 이용하기

  Next.js 2021. 7. 27. 17:13

  NextJS 11 버전으로 변경되며 기존에 사용하던 @zeit/next-less를 사용한 Webpack Config코드에 문제가 생겼다. 이에 대한 해결 방법을 공유한다. 먼저 종속성을 다운 받아준다. npm i antd next-plugin-antd-less less less-loader 그런 뒤 파일들을 수정해 준다. //next.config.js const withAntdLess = require('next-plugin-antd-less'); module.exports = withAntdLess({ lessVarsFilePath: './styles/custom.less', lessVarsFilePathAppendToEndOfContent: true, cssLoaderOptions: {}, webpa..

  Read More