잉어빵

npm 서버 실행 시 npm run 스크립트 이름 (ex: npm runs serve)  후 로컬 상에서는 잘 되고 있지만 Invalid Host header 이 표시된다면 vue-cli 프로젝트 내부의 vue.confing.js에 아래와 같이 문장을 추가하면 해결됩니다

출처 : https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck

리엑트든 뷰든 spa로 개발하기 위해서는 반 필수적인 node.js는 아래와 같이 다양하게 버젼이 존재..

그리고 이렇게 각 버젼마다 호환이 되는 모듈들이 존재하다보니 각각의 프로젝트마다 노드 버젼이 다르게 관리 될 수 있습니다... (ㅠ_ㅠ 귀찮아... 그냥 다 통일되면 얼마나 좋을까)

그렇기 때문에 매번 프로젝트 개발 시에 노드버젼을 바꿔줘야하는데 https://nodejs.org/ko/download/releases/ 노드 공식 홈페이지 가서 최근 버젼 뿐만 아니라 이전 릴리즈 버젼까지 설치 할 수 있는 방법이 있지만... 매번 그렇게 하기엔 불편하당... 그런 불편함을 해소 시키기 위해 있는 것이 nvm이라는 노드버젼 관리 매니저가 있다..

(뭐 어찌저찌 nvm 사용법은 나중에 따로 올려야지 ㅎ.. )

그런 nvm 을 사용할 때 간혹 사용자 PC의 이름이 한글로 되어 있을 경우에 아래와 같은 에러를 볼 수 있습니다.

아마 한글 인코딩 과정 중에 깨짐 현상으로 인해서

C:\Users\������\AppData\Roaming\nvm, The system cannot find the path specified.

라고 발생 되는 것 같은데 이를 해결 하기 위해서는 nvm root "C:\Users\사용자이름\AppData\Roaming\NVM"  을 사용하면 됩니다. (물론 사용자이름에 PC 이름을 넣으면 됩니다)

그러고 나면 nvm root가 위 경로로 변경 되었다라는 것을 확인 할 수 있고 nvm install 노드버젼 입력시에 정상적으로 오류를 해결 할 수 있음

VScode로 작업 시에 Prettier랑 EsLint 설정 후 npm 서버를 실행 시킬 경우 아래 와 같은 에러가 뜰 수 있습니다.

해결방법

프로젝트 디렉토리 내 .eslintrc.js 파일에 아래의 코드를 추가 후 저장한 뒤 다시 서버를 실행 시키면 에러가 사라지는 것을 볼 수 있습니다.

{   
 
  "rules": {     
    "prettier/prettier": ["error", { "endOfLine": "auto" }]   
  }
}

gulp : 'gulp' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.

vscode로 작업 중 node는 정상적으로 설치 되어 있어서 npm i 명령어도 정상적으로 실행되지만 유독 vue, gulp 등과 같은 명령어가 실행 되지 않은 경우가 있습니다 그럴 경우 아래와 같은 방법으로 해결하면됨

1. 터미널 변경

2. 환경 변수 추가

3. Windows PowerShell -  get-ExecutionPollcy 권한 체크

4. npm i -g glup-cli 입력

다시 터미널 열고 npm i -g glup-cli 입력 하면 C:\Users\사용자이름\Appdata\Roaming\npm 경로에 gulp 관련 파일 설치 된거 확인 가능합니다.

그리고 다시 gulp 관련 명령어 입력하면 정상적으로 실행 되는 것을 볼 수 있음