본문 바로가기
반응형

개발51

[Vue] VScode에서 vue 설치 후에 Create가 안될 때 해결 방법! 사용 환경이 노트북에서 데스크탑으로 바뀌면서 또 Vue 설치 시 에러가 발생하기 시작했다. vue create vue-cli 뷰를 설치 후에 create를 시도해보니 아래처럼 오류가 발생했다. 어.. 라? 제대로 vue가 설치가 안 돼서 그런가? 싶어서 다시 설치를 시도했다. npm install -g @vue/cli 재 설치 후에 다시 생성을 시도했으나, 같은 오류가 계속 발생했다. 그래서 원인을 찾아 버그 로그를 위에서부터 읽어보았는데, npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@achrinza/node-ipc@9.2.6', npm WARN EBADENGINE required: { npm WARN EBADENGINE.. 2023. 5. 5.
[Vue] VScode에서 vue 설치해도 동작 안할 때 해결 방법 VSCode를 이용해서 다음과 같은 명령어를 통해 vue/cli를 설치했다. npm install -g @vue/cli 설치가 완료된 후에 vue를 통해 cli를 만들려 시도했다. vue create vue-cli 그랬더니 다음처럼 오류가 떴고, 심지어 vue --version을 통해 버전 체크를 하려 해도 동일한 오류가 계속 발생해서 진행할 수가 없었다. 원인이 뭐지하고 계속 삭제하고, 다시 설치하고를 반복했으나 정상적으로 작동하지 않았다. 인터넷에 다른 분들이 사용한 환경 변수 설정이라던지, uninstall을 통한 오류 해결이라던지 이것저것 해봤는데 계속해서 vue 명령어가 전혀 듣지 않았다. 이를 해결하기 위해 이것저것 시도해 본 중에 원인을 발견하였고, 다음과 같은 이유로 실행이 되지않았다. 📌.. 2023. 5. 2.
[JavaScript] 동기 & 비동기 및 콜백 개념 정리 동기(Synchronous) - 모든 일을 순차적으로 처리하는 것 (이전 작업이 끝나면 → 다음 작업 시작) - 어떤 요청을 보내면 그 요청이 끝날 때까지 기다림 console.log('시작') console.log('중간') console.log('끝') /* 시작 중간 끝 */​ 비동기(ASynchronous) - 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것 (병렬 수행) - 비동기로 처리 시 먼저 처리되는 부분부터 보여주므로 사용자 경험에 긍정적인 효과 - 비동기 동작은 Call stack, Web API, Task Queue, Event Loop 등으로 구성 Call Stack - 요청이 들어올 때마다 순차적으로 처리하는 Stack Web API - JavaSecript 엔진이.. 2023. 4. 30.
[JavaScript] DOM 조작 및 이벤트 처리 정리 DOM(Document Object Model) - 문서의 구조화된 표현 제공 - HTML 문서를 구조화하여 각 요소를 객체 취급 - DOM의 구조(문서를 논리 트리로 표현) - DOM은 HTML 요소, 속 텍스트 등 모든 것을 Node로 구성 Window Object - DOM을 표현하는 창으로 가장 최상위의 객체를 의미 Document Object - 브라우저가 불러온 웹 페이지 - document는 window의 속성 선택 관련 메서드 // 제공한 선택자와 일치하는 요소 1개 선택 // 제공한 CSS Selector를 만족하는 첫번쨰 요소를 반환(없으면 null) document.querySelector(selector) // 제공한 선택자와 일치하는 여러 요소 선택 // 제공한 CSS Select.. 2023. 4. 27.
[JavaScript] 함수, 배열 메서드, this, 객체 개념 정리 함수 (function) - 함수 선언식 //일반적인 함수 선언식 function 함수명(매개변수){ //내용 작성 } function plus(a, b) { return a + b } // 함수 표현식 변수키워드 함수명 = function(매개변수){ //내용 작성 } const myplus = function(a, b){ return a+b } - 기본 인자 및 매개변수 개수 불일치 // 기본 인자 : 인자 작성 시 = 문자 뒤에 기본 인자 선언 가능 const hi = function (name = 'Tom'){ return `Hi ${hi}` } hi() // Hi Tom // 매개변수보다 인자가 많을 경우 해당 갯수 만큼만 출력 // 에러를 발생하지 않음 const Args = function(.. 2023. 4. 25.
[JavaScript] 자바스크립트 기초 문법 및 호이스팅 정리 식별자 정의 작성 특징 - 카멜 케이스 (camelCase) : 변수, 객체, 함수에 사용 // 변수 let cat let name // 객체 const info = {animal : 'cat', age : '3'} //함수 function add(){} function name(){}​ - 파스칼 케이스 (PascalCase) : 클래스, 생성자에 사용 // class class Person{ constructor(options){ this.name = options.name } } // 생성자 함수 function Person(options){ this.name = options.name }​ - 대문자 스네이크 케이스(SNAKE_CASE) : 상수에 사용하고, 보통 변경될 가능성이 없는 값을 의미 .. 2023. 4. 25.
반응형