[네이버 부스트코스 웹 프로그래밍] JavaScript 파일을 Visual Studio Code에서 실행하기

비주얼 스튜디오 코드에서 자바스크립트 실습 환경 구축하기

Code Runner 익스텐션이 설치되어 있었는데 Run Code 누르면 다음과 같은 에러가 뜸

'node'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α׷�, �Ǵ�
��ġ ������ �ƴմϴ�.

F5 (Start debugging) 누르니까 node의 path가 설정되어 있지 않다는 내용인거같아 nodejs설치

 

NodeJS란?

https://d2.naver.com/helloworld/12864

불러오는 중입니다...

요약: 자바스크립트를 브라우저 밖에서 쓰기 위한 모듈화 움직임이 있었다. 그 두 가지 진영은 AMD와 CommonJS로 나뉜다. Node.js 모듈은 CommonJS 모듈 명세 1.0을 따르고 있다.

 

Nvm

https://poiemaweb.com/nodejs-npm

Node.js & npm | PoiemaWeb

CommonJS 방식은 AMD에 비해 문법이 간단하며 동기 방식(synchronous loading)으로 동작한다. (필요한 파일이 모두 로컬 디스크에 있는 상황(서버사이드) 전제)

AMD 방식은 CommonJS에 비해 문법이 다소 까다로우며 CommonJS와는 달리 비동기 방식(asynchronous loading)으로 동작한다. (모듈을 네트워크를 이용해 내려받아야 하는 브라우저 환경에서도 모듈을 사용할 수 있도록 한 표준)

npm(node package manager)은 자바스크립트 패키지 매니저이다. Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다. 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색하여 재사용할 수도 있다.

 

nvm을 설치하려고 검색창 맨 위에 뜨는 github 주소로 들어갔다.

https://github.com/nvm-sh/nvm

nvm-sh/nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash 명령어를 입력하라 했는데 이게 유닉스 bash 쉘 스크립트인줄 모르고 뻘짓을 많이 했다. 

유닉스 쉘들

https://ithub.tistory.com/205 

shell, bash, zbash의 간단 개념정리

nvm is a version manager for node.js, designed to be installed per-user, and invoked per-shell. nvm works on any POSIX-compliant shell (sh, dash, ksh, zsh, bash), in particular on these platforms: unix, macOS, and windows WSL.

(POSIX: Portable Operating System Interface for UniX)

파워쉘 스크립트 파일: .ps1

wsl: Windows Subsystem for Linux (리눅스용 윈도우 하위 시스템) 윈도우 10 버전부터 지원하는 윈도우용 리눅스 배포판

알고보니 깃허브 페이지 맨 처음에 nvm works on any POSIX-compliant shell 라고 적혀 있었다..

 

참고: Curl이란?

https://github.com/gwonsungjun/wiki/blob/master/Linux/Ubuntu/curl.md

gwonsungjun/wiki

http://sunphiz.me/wp/archives/491

cURL – Dog발자

curl은 다양한 프로토콜로 데이터를 전송해볼 수 있는 명령어 기반의 컴퓨터 프로그램이다.

예제에서는 http 프로토콜, -O 옵션으로 파일을 다운로드하는 데 사용했음.

그 외에도 url을 가지고 할 수 있는 것은 다 할 수 있다. (http로 웹 페이지 소스 가져오기, ftp로 파일 보내기, smtp로 메일 보내기 등..)

 

vscode에서 javascript파일을 실행하기 위해 많은 뻘짓을 했는데 그냥 nodejs 공식 홈페이지를 방문하면 윈도우용 .msi 설치 파일을 받을 수 있다.

실행하면 잘 설치되고 환경 변수까지 알아서 설정해 준다.

이후 cmd에서 node 치면 설치가 잘 됐는지 확인 가능하다. (이걸 또 nodejs로 쳐서 끝까지 뻘짓을 했다..)

 

+

알고보니 vscode 에러 메시지 검색해서 방문했던 페이지중에 해결방법이 나와있는 페이지가 있었음..

페이지 내용은 제대로 읽고 이해하고 넘어가자.

https://github.com/js-200/js-200-examples/issues/1

004장 코드러너 실행 · Issue #1 · js-200/js-200-examples

shwldus3 commented on May 13, 2019

안녕하세요 @nowist 님! 문의주신 대로 윈도우에서 동일한 현상을 확인하여 답변드립니다. node.js 홈페이지(https://nodejs.org/ko/) 에서 LTS 버전으로 다운로드>설치 진행 부탁드립니다 코드러너가 자바스크립트 코드를 실행할 때, Node.js command 로 실행하기에 발생된 문제였습니다. 그 후, Visual Studio Code 프로그램을 다시 실행하시면 정상적으로 나오실거에요 앞으로 또 궁금하신 점 있으시면 이슈로 질문해주세요 감사합니다!

Code Runner가 nodejs로 자바스크립트를 실행해서 발생했던 문제

 

 

요약:

비주얼 스튜디오에서 자바스크립트 파일을 실행하려면 code runner 익스텐션을 설치하고, 얘는 node.js를 통해 파일을 실행하기 때문에 nodejs.org에서 설치파일을 받자.

오늘의 교훈:

아직 모르는 게 너무 많다.

문서를 꼼꼼하게 잘 읽자(영어라고 대충 읽지 말고).

공식 홈페이지를 방문해보자.