프로그래밍 공부하기

node 12버전이 필요해서 nvm install을 했더니 python: not found 라며 오류가 발생한다. 나의 경우 다음과 같은 해결책이 유효했다. 바로 nvm의 default alias를 바꾸는 것이다! 나의 노드 설치 역사가 node 14를 먼저 설치 -> homebrew로 nvm을 설치 -> node 12버전 설치 -> node 12 제거 -> node 12 설치(오류!) 라서 뭔가 내부에서 꼬인 것 같다. nvm alias default 14.19.2 nvm alias 명령어로 기존에 갖고있던 node 버전을 nvm의 default로 바꾼다. 바뀐 default alias를 확인 후, nvm install 12를 했더니 성공했다! 오류 메시지가 python: not found로 나와서 p..

/usr/local/bin/node ./app.js SyntaxError: Unexpected token '.' process exited with code 1 오랜만에 nodeJS를 디버깅을 하려는데 위와 같은 형식의 에러가 발생한다. 분명히 전에도 디버깅했던 프로젝트인데 무슨일인걸까..ㅜㅜ 의심가는 것은 내가 최근에 node를 12로 낮췄다는 것인데... https://stackoverflow.com/questions/61670459/importing-in-node-js-error-must-use-import-to-load-es-module Importing in Node.js: error "Must use import to load ES Module" I'm trying to import myArr..

오늘은 dragEnd 이벤트가 발생하지 않는 오류를 기록해보려한다. DND(Drag & Drop)란, 위와 같이 마우스 포인터를 누른 채로 움직였다가 손을 떼는 동작을 의미한다. 일반적으로 화면상의 요소를 쉽게 움직이기 위해 사용한다. DND 이벤트는 dragstart, dragend, dragover, dragenter, dragleave, dragexit, drop 7가지가 있다. 그 중 나는 dragstart, dragend 이벤트를 사용하는 예제를 만들어 보았다. See the Pen draggable by ImHyeLim1209 (@imhyelim1209) on CodePen. dragstart 이벤트가 발생하면 'dragging', dragend 이벤트가 발생하면 'nothing' 이라는 텍스..

Jest에서 ES6 모듈(import-export)를 사용하면 위와 같은 오류가 발생한다. 이 방법을 해결하기 위해선 2가지 방법이 있다. Babel 사용하기 Jest 의 Expremental Support 사용하기 첫 번째는 Babel을 활용하여 코드는 ES6로 작성하되, 실행 시에는 Common JS 모듈로 변경하는 것이다. 이 방법은 이미 프로젝트에서 Babel을 사용하고 있다면 상관없겠지만, Babel을 사용하지 않고 있던 나의 입장에서 번거로운 일이었다. 따라서 이 방법은 사용하지 않았다. { "name": "tester", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "node --experime..

eslint, prettier를 적용한 뒤 작업을 하던 중 어느 순간부턴가 저장을 해도 자동으로 변경이 안된다. 이를 해결하기 위해 먼저 eslint output panel을 살펴보았다. [Info - 2:16:58 PM] Must use import to load ES Module: /Users/user/Documents/development/practice/.prettierrc.js require() of ES modules is not supported. require() of /Users/user/Documents/development/practice/.prettierrc.js from /Users/user/Documents/development/practice/node_modules/pretti..

const element = useRef(); const triggerFull = () => { if (element.current.requestFullscreen) element.current.requestFullscreen(); }; const exitFull = () => { if (document.exitFullscreen) document.exitFullscreen(); }; 어떤 요소를 FullScreen으로 보여주기 위해선 위와 같이 requestFullscreen(), exitFullscreen() 함수를 사용하는 것이 기본이다. 그러나 브라우저 별로 메소드를 지원하지 않는 경우가 있기 때문에 브라우저에 맞는 메소드를 호출하도록 구현해주어야 한다. const triggerFull = () ..

eslint --init을 하다가 Could not find a package.json file 이라는 오류와 만났다. 이는 말 그대로 eslint --init을 하기 전에 package.json 파일이 필요하기 때문에 npm init으로 package.json파일을 만들어주면 된다. 아마도 eslint --init을 하면 package.json의 devDependencies 항목 내에 eslint 항목이 생기기 때문에 그런 것 같다.

AWS에 배포를 무사히 했음에도 불구하고 새로고침 발생 시 에러가 Access Denied가 발생할 수 있다. 원인에는 여러가지가 있을 수 있지만 나의 경우 서버에 없는 페이지를 요청하면서 에러가 발생하였다. 내 웹페이지는 SPA이지만 검색 기능 사용 시 뒤로가기했을 때 이전 키워드 검색 결과가 나오게 하기 위해서 주소창에 검색 키워드를 넣었더니 새로고침시 위 오류가 발생하였다. 이 오류는 에러가 발생했을 때 페이지를 다른 곳으로 Redirect 시키는 것으로 해결할 수 있다. 배포환경에 따라 조금 다른데 먼저 S3에만 배포했다면 S3 > 속성 >정적 웹 호스팅에서 에러가 발생했을 때 반환될 오류문서를 지정해주면 된다. 만약 클라우드 프론트까지 배포를 했다면 CloudFront > Error Pages ..

es8 문법인 async / await을 사용하면 'regeneratorRuntime is not defined' 라는 에러가 발생한다. 이 때는 추가적인 플러그인을 설치하여 적용하면 된다. npm install --save-dev @babel-plugin-transform-runtime npm install --save @babel-runtime babel-plugin-transform-runtime과 babel-runtime을 설치한다. 이 때 babel-runtime은 --save 옵션으로 설치해야한다. module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.js$/, exclude: /node_mo..

//1. 문제 상황 function solution(b) { var answer = 0; return answer; } //2. 내가 원하는 형식 function solution(b) { var answer = 0; return answer; } 어느 날부턴가 VSCode에서 함수를 만든 후 저장하면 중괄호가 다음 라인에 생기게 되었다. 이를 내가 원하는 형식으로 바꾸고 싶다. VSCode의 세팅에서 placeOpenBraceOnNewLineForFunctions를 false로 주면 더 이상 함수의 중괄호가 새로운 라인에 생기지 않게된다!(ctrl + shift + p > placeOpenBraceOnNewLineForFunctions 검색 > 체크 해제)