어리둥절 분석가 그리고 개발자

✔️ 필요성 Next.js 프로젝트에서 CSS module인 sass/scss를 사용해보겠다 ✔️ 방법 npm i sass next.config.js를 아래와 같이 수정해준다 //next.config.js const path = require('path') module.exports = { sassOptions: { includePaths: [path.join(__dirname, 'styles')], }, } 루트프로젝트에 있는 styles 폴더 내의 global.css와 Home.module.css 이름을 global.scss와 Home.module.scss로 바꾸고 해당 파일을 import 해주는 곳에서도 이름을 바꾼다 원하는 CSS를 입력한 뒤 사용한다 /* Home.module.scss */ .t..

✔️ 설치 yarn add babel-plugin-inline-react-svg ✔️ .babelrc "plugin"에 "inline-react-svg"를 추가한다 { "presets": ["next/babel"], "plugins": [ "inline-react-svg", [ "styled-components", { "ssr": true } ] ] } ✔️ types/index.d.ts typescript 때문에 아래와 같은 설정을 해주는 것이다. 위치와 파일 이름은 아무래도 상관없다! declare module "*.svg" ✔️ 에러 위의 내용을 잘 설치했는데도 에러가 난다. TypeError: Cannot read properties of undefined (reading 'uid') 이건 Nex..

✔️ 설치 yarn add styled-components babel-plugin-styled-components yarn add @types/styled-components -D ✔️ pages/_document.tsx import Document, { Html, Head, Main, NextScript, DocumentContext, } from "next/document"; import { ServerStyleSheet } from "styled-components"; class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet(); con..