⛔️ 오류

kakao map 연결할때 발생한 오류 에러는 현재 카카오 map api를 불러오는 과정에서 문제가 생긴것같습니다. // MapContainer.tsx /* eslint-disable react-hooks/exhaustive-deps */ import { useEffect } from 'react'; import { useRecoilValue } from 'recoil'; import { useSetRecoilState } from 'recoil'; import { mapState } from '@/@recoil/mapState'; import classes from './MapContainer.module.scss'; import { readingMap } from '@/@recoil/readingMa..

vite 로 빌드시 svg 이미지가 깨지는 이슈 발생 public 디렉토리는 정적 파일을 저장하는 데 사용되며, Vite가 처리하지 않고 빌드 시 자동으로 복사됩니다. 따라서 이미지 파일 경로를 설정할 때 public 디렉토리를 제외해야 합니다. 해결방법: import search from '/public/assets/search.svg'; import search from '/public/assets/search.svg'; 와 같은 방법으로 SVG 이미지를 모듈로 가져와서 사용하는 것도 가능합니다. 이 방법을 사용하면 이미지 파일 경로를 직접 입력하는 대신 모듈로 가져와서 사용할 수 있으므로, 경로 오류가 발생하지 않을 가능성이 높습니다. // vite.config.ts import { defineCo..

node.js의 version이 맞지않아 발생한 오류이유 :node.js의 version이 맞지않아 발생하는 case이며, 17.0.~이상인 current version 일 경우에 나타난다. 16.~ LTS version으로 변경해주면 해당 error case 를 잡을 수 있다. 해결 터미널에 아래와 같이 작성. => 기존 레거시 버전을 공급하는 코드 오류가 발생한 경우, 아래 명령을 입력해 문제를 해결할 수 있습니다. export NODE_OPTIONS=--openssl-legacy-provider

TypeScript Generic 오류해결:// generic function merge(objA: T, objB: U): T & U { return Object.assign(objA, objB); } //명시적으로 표현 interface O1 { name: string; hobbies: Array; nickname: string; } type O2 = { age: number }; const mergedObj = merge( { name: "Max", hobbies: ["Sports", "cooking"], nickname: "bee" }, { age: 30 } ); console.log(mergedObj.hobbies);

이유:복사할 파일 이름 잘못 설정했다... 배포할때 사용해야 하므로 prod폴더에 설정해주어야 합니다. webpack public 안에 있는 폴더는 build할때 build 폴더에 복사 안되므로 build폴더에 복사해 주고 싶을때 사용해야합니다.해결://prod.js const { resolve } = require("node:path"); const CopyPlugin = require("copy-webpack-plugin"); const prodConfig = { mode: "production", output: { path: resolve("build"), filename: "[name].[contenthash].min.js", }, plugins: [ //webpack public 안에 있는 폴더..

해결:setting.json 에 "scss.lint.unknownAtRules": "ignore” 추가.📌 "scss.lint.unknownAtRules": "ignore"는 SCSS(Sassy CSS)를 사용할 때 사용되는 Linter에서, 알 수 없는 @규칙(Unknown At-rules)을 사용했을 때 발생하는 경고를 무시하도록 설정하는 옵션입니다.

.eslintrc 파일에 이 구문을 추가 하니 해결//.eslintrc { "parserOptions": { "ecmaVersion": "latest" }, "env": { "es6": true } }"ecmaVersion": "latest"은 JavaScript 코드를 파싱할 때 사용되는 ECMAScript 버전을 설정하는 데 사용되는 옵션 중 하나 입니다. 이 옵션을 "latest"로 설정하면, 현재 사용 가능한 최신 버전의 ECMAScript 문법을 지원하는 것으로 설정됩니다. 이 옵션을 사용하면 최신 버전의 문법을 사용할 수 있으므로, 코드 작성이 더 쉬워지고 효율적인 코드 작성이 가능해집니다. 그러나 "latest"를 사용하면 ECMAScript에서 도입된 최신 문법이 구형 브라우저에서 지원되지..

🚫 tailwind.css 구성에서 ‘@’불러와 지지 않는 오류 가 생겼다. 이유정규표현식 오류, 모듈을 한꺼번에 넣다보니 오류가 생김 해결//common.js const { resolve } = require("node:path"); const babelLoader = require("./loaders/babel"); const { sassLoader } = require("./loaders/styles"); const commonConfig = { target: "browserslist", resolve: { extensions: ".ts .tsx .js .jsx .json .wasm".split(" "), }, entry: { main: resolve("src/main.tsx"), }, module..