본문 바로가기
반응형

dev17

NextJS Svg 못 읽어오는 경우 해결 에러내용 # Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 해결 타입스크립트까지 정리를 해두려고 한다. 패키지 설치 $ npm install --dev @svgr/webpack next.config.js 파일 수정 //next.config.js const nextConfig = { ... webpack: config => { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'], }); return co.. 2022. 11. 29.
NextJS TailwindCSS 적용 ## 설치 `$ npm i tailwindcss postcss autoprefixer -D` ## 설정 `$ npx tailwindcss init` #### 설정파일 수정 ``` //tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', ], // darkMode: false, // or 'media' or 'class' theme: { extend: {}, screens: { // sm: 480px, // md: 768px, // lg: 976px, xl: '1920px'.. 2022. 11. 29.
Unknown at rule @tailwind 경고 해결 global.css에 @tailwind base;를 사용하면 ESLint에서 경고가 나오는 경우가 있다. 아래의 코드는 tailwind 를 적용할 때 필수 코드이다. 해당 적용하게되면 eslint에서 경고가 발생을 한다. //global.css /** * This injects Tailwind's base styles and any base styles registered by * plugins. */ @tailwind base; /** * This injects Tailwind's component classes and any component classes * registered by plugins. */ @tailwind components; /** * This injects Tailwind's u.. 2022. 11. 28.
NextJS ESLint 적용 개인적으로 프로젝트에 eslint 적용 프로젝트 생성 $ npx create-next-app proj_name ESlint 수정 //.eslintrc.js module.exports = { // 전역 변수 사용을 정의 // 추가하지 않으면 ESLint 규칙에 걸림 env: { browser: true, commonjs: true, es6: true, node: true, jest: true, // browser: true, // es6: true, // node: true, }, parser: '@typescript-eslint/parser', // ESLint 파서 지정 parserOptions: { ecmaFeatures: { jsx: true, // JSX를 파싱 }, ecmaVersion: 12,.. 2022. 11. 28.
반응형

티스토리툴바