project를 초기 세팅하면서 eslint에 대한 에러를 만났다. 📍 문제❌ SyntaxError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.cjs': Unexpected token '||=' eslint 설치한 이후에 아무 것도 건드리지 않았는데, App.tsx 파일을 누르니 위 에러가 나타났다. 📍 상황위 plugin을 로드하지 못했다는 이슈로 node 버전을 통해 해결할 수 있었다.현재 나는 회사 프로젝트로 인해 노드 14 버전이 WebStrom IDE에 기본적으로 세팅이 되어 있었다.하지만 vite 로 프로젝트를 만들었기에 terminal에서는 node version을 바꿔주었지만IDE 자체에 뜨는 문제였기 때문에 ..

노드, npm 버전이 안 맞아서 npm install을 했을 때 제대로 실행이 되지 않았다. nvm으로 node 버전은 바꿀 수 있지만, npm 버전은 nvm로 바뀌지 않는다. 또한 명령어 작성시 옵션을 제대로 붙이지 않아 헤맸다. npm 버전 변경하기 npm install npm@변경할버전 -g npm install npm@6 -g 위는 npm 버전을 6으로 변경하기 위한 명령어이다. -g를 꼭 함께 작성해야 한다. 버전 확인하기 npm -v npm 버전이 바뀐 것을 정상적으로 확인할 수 있다.

vite 환경에서 환경변수 값을 주기 위해서는 기존의 CRA와 다르게 설정해야 한다.처음에는 CRA처럼 환경변수에 접근해서 값이 나오지 않았는데, Vite의 경우 prefix가 달랐다! 먼저 CRA에서 접근하는 방법을 알아보자.CRACreate-react-app으로 만든 React에서는.env 파일에서 REACT\_APP을 prefix로 붙여야 한다.그다음 이를 사용하기 위해서는 process.env 를 앞에 붙여서 사용한다.Vite환경변수 생성Vite의 경우, VITE\_를 prefix로 사용하여 환경변수를 생성해야 한다.# .envVITE_TEST_VALUE=123환경변수 사용그다음 앱에서는 import.meta.env로 값에 접근할 수 있다.dotenv 패키지도 필요가 없다.const TEST_VA..

mongoose 데이터베이스 연결하려고 nodemon 통해서 명령어 실행하니까 오류가 발생했다. 스택오버플로우에서 한 사용자가 작성해준대로 해봤더니 잘 해결이 되었다! pkFactory: db.options?.pkFactory ?? utils_1.DEFAULT_PK_FACTORY, SyntaxError: Invalid or unexpected token at Module._extensions..js (node:internal/modules/cjs/loader:1308:10) Node.js v18.14.2 [nodemon] app crashed - waiting for file changes before starting... 해결 방법 방법은 mongoose의 버전을 낮추는 것이다. 현재 7버전이었는데 6..

Mac 사고나서 처음으로 global로 npm 모듈을 설치하려고 하니 permission 에러가 발생했다. 기본적으로 모듈을 설치할 때에는 문제가 없었지만 글로벌로 설치하려고 하니까 문제가 생겼다. npm의 디렉터리 확인 npm의 기본 디렉터리를 먼저 확인한다. 대부분 /usr/local 로 나올 것이다. npm config get prefix 디렉터리 owner 변경 디렉터리의 오너를 현재 사용자로 변경해 주면 된다. 하위 폴더의 권한도 모두 변경된다. sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} whoami는 사용자의 계정 정보를 자동으로 치환해준다고 한다. 다시 터미널에서 npm global로 시도해 보면..

Why? Javascript로 AWS S3 버킷에 파일을 업로드하는 기능을 개발하는 과정에서 CORS 에러가 생겼다. 알아본 결과, 버킷 설정을 통해 문제를 해결할 수 있었다. 해결 방법 1. AWS 웹 콘솔에서 해결하고자 하는 S3 버킷에 들어간다. 2. 권한 탭을 눌러 CORS 정책을 용도에 맞게 편집한다. [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "HEAD", "GET", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "https://www.서비스도메인.com" ], "ExposeHeaders": [ "ETag", "x-amz-server-side-encryption", "x-amz-request-id", "x-..