Error

[React] 이미지 위치에 따른 오류 해결 You can either move it inside src/, or add a symlink to it from project's node_moules/.

jsx 파일에서 이미지를 import 하기 위해 경로를 지정했는데 다음과 같은 오류가 발생했다. Module not found: Error: You attempted to import ../../../public/assets/icons/ArrwTop.svg which falls outside of the project src/ directory. Relative imports outsde of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_moules/. 원인 CRA에서 컴파일은 src 내부에서만 일어나는데, 이때 js에서 import된 이미지와 같이 엮여있는 파일들은..

[TS] TypeScript가 SVG 파일을 import 하지 못해서 에러가 발생할 때

TypeScript에서 svg 파일을 import 해오고자 할 때 svg에 대한 타입을 찾을 수 없으면 위와 같은 에러가 발생한다. 별도의 d.ts 파일을 만들어서 svg 파일에 대한 타입을 지정해주면 에러가 사라진다. 해결방안 // custom.d.ts declare module '*.svg' { const content: React.FunctionComponent; export default content; } 이후 tsconfig.json 파일에서 아래와 같이 webpack 설정을 추가해준다. (어떤 파일들에 어떤 로더를 적용할지) "include": ["src/components", "src/custom.d.ts"] 출처/참고 https://tesseractjh.tistory.com/227 htt..

Delete `␍` prettier/prettier 해결 방법

Prettier와 ESLint를 프로젝트에 적용 후 아래와 같은 에러가 떴다. 해결방법 프로젝트 폴더 내 .esLint 파일을 아래와 같이 수정하면 된다. 저장 후 재실행하면 정상동작됨을 확인할 수 있다. { "extends": ["react-app", "prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": ["error", { "endOfLine": "auto" }] } } 출처/참고 https://velog.io/@realsong/VS-Delete-prettierprettier-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named i..

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 에러 해결 방법 원인 해당 컴포넌트의 import 를 다시 하거나 연결되어 있는 컴포넌트들 중에 대소문자가 달라서 발생했을 수 있다. components의 이름이 잘못되었거나, import path가 잘못 입력되었을 때 발생할 수 있다. 페이지에..

windows 10 에서 docker 설치 후 open //./pipe/docker_engine: The system cannot find the file specified

Windows10 에서 docker 설치 후에 컨테이너 생성 시 open //./pipe/docker_engine: The system cannot find the file specified. 에러가 나는 경우 Powershell 을 관리자 권한으로 열고 아래 명령어를 입력한다. cd "C:\Program Files\Docker\Docker" ./DockerCli.exe -SwitchDaemon 출처 windows 10 에서 docker 설치 후 open //./pipe/docker_engine: The system cannot find the file specified windows 10 에서 docker 설치 후에 open //./pipe/docker_engine: The system cannot f..

[React-native] While trying to resolve module 'idb' from file….this package itself specifies a `main` module field that could not be resolved 파이어베이스 연동 오류 해결 방법

firebase 연동 후 실행 하면 이런 에러가 발생하는 것을 볼 수 있다. While trying to resolve module 'idb' from file….this package itself specifies a `main` module field that could not be resolved firebase 버전 차이로 인해서 발생할 수 있다고 한다. 파이어베이스 패키지 버전을 낮춰서 해결할 수도 있고, 소스 코드를 일부 변경해서 해결할 수도 있다. 1. 소스 코드 변경 firebaseConfig.js 의 import 부분을 아래와 같이 바꿔준다. import * as firebase from 'firebase/app'; 👇 import firebase from 'firebase/app'; 2..

[React-native] Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`. 오류 해결방법

babel.config.js 파일에 해당 코드를 추가 module.exports = { ... plugins: ['react-native-reanimated/plugin'], ... }; 출처 [리액트 네이티브]Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`. 오류 발생 시 해결방법

[React] 'concurrently' 은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다 << 오류 해결 방법

npm run dev 를 통해서 프로젝트를 실행하려는데 'concurrently'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 같은 오류가 출력된다. 해결방법 방법1) package.json 버전 상향 (안됐었음❎) npm i concurrently express --save 방법2) bcrypt 버전 상향 ✅ package.json > dependencies > bcrypt "bcrypt": "^3.0.6" 에서 "bcrypt": "^5.0.0", 로 상향시켜준 후 npm install 해서 dependencies 다시 다운받기 그리고 아래 명령어 입력해서 업데이트 (*dependencies 다운받고 나면 아래 명령어 입력하도록 뜨긴 한다) npm audit f..

[MongoDB] pymongo.errors.ServerSelectionTimeoutError: ~ [SSL: CERTIFICATE_VERIFY_FAILED] 해결 방법

[MongoDB] pymongo.errors.ServerSelectionTimeoutError: ~ [SSL: CERTIFICATE_VERIFY_FAILED] 해결 방법 파이참에서 DB Atlas 사용 할 때나, MongoDB를 사용해서 파일을 실행하다가 pymongo.errors.ServerSelectionTimeoutError: ~~ [SSL: CERTIFICATE_VERIFY_FAILED] 에러메세지가 뜨면서 안될 때가 있다. 이런 경우에는 사용하고 있는 인터넷 환경에 따라 보안 관련 추가 설정을 해주어야 할 때가 있다. 1. 파이참 인터프리터에서 가상환경에 certifi 패키지를 설치해준다. 2. 아래와 같이 코드를 추가해준다. from pymongo import MongoClient import..

[Pycharm] 특정 파일이 다른 확장자로 인식되는 경우

[파이참/Pycharm] 특정 파일이 다른 확장자로 인식되는 경우 처음 파일을 생성할 때 특정 파일 타입을 지정해서 생성하는 것이 아닌 File로 생성할 때 확장자를 빼먹고 파일이름만 작성할 경우 기본적으로 text 확장자로 파일이 생성되게 된다. 예를 들어 파일을 생성할 때 파일 이름을 'index' 이라고 작성했다고 해보자. (기존의 index.html 파일은 무시) 확장자를 작성하지 않았을 때는 기본적으로 text 파일로 생성되기 때문에 'index' 이라는 이름을 가진 파일의 타입을 text 로 자동으로 지정할 것인지 물어본다. 여기서 그냥 창이 떠서 OK 누르는 경우가 많은데 나중에 index.html 같이 'index' 이라는 이름으로 특정 확장자를 가진 파일을 생성하려고 하면 아무리 생성해도..

[MongoDB] MongoDB application is only supported on Windows 10/Windows 2016 or later 해결 방법

[MongoDB] MongoDB application is only supported on Windows 10/Windows 2016 or later 해결 방법 윈도우10 버전 이전의 윈도우를 사용하는 경우 MongoDB 4.2 버전을 설치해서 사용하면 된다. (다운로드) 아래 링크에서 보면 지원하는 버전을 확인할 수 있다! https://www.mongodb.com/docs/manual/administration/production-notes/#prod-notes-supported-platforms

Error: [Errno 48] Address already in use 오류 해결 방법

Error: [Errno 48] Address already in use 오류 해결 방법 원인 해당 포트 번호를 다른 프로세스가 이미 사용중일 때 발생하는 오류이다. 해결 내가 실행하려는 5000포트를 실행시키려고 할 때를 예시를 들면, 기존에 5000 포트를 사용하고 있는 프로세스를 종료시키고 내 서비스를 5000포트에 띄워준다. 1. 파이참과 같은 에디터에서 run 했던 서버가 돌아가고 있지는 않은지 확인한다. 2. 기존에 사용되고 있던 프로세스 종료시키기 terminal을 열고 아래 명령어를 입력한다. netstat -aon | find "5000" 그러면 아래 형태로 보이게 된다. TCP xxx.xx.xx.xx:5000 xx.xx.xx.xxx:443 ESTABLISHED 3333 맨 마지막에 있는..