2019.12.26 JavaScript 환경셋팅

자바스크립트 환경셋팅

자바스크립트를 이용하기 위한 환경을 만들어보기로 하자.

 

1. 크롬 브라우저

우선은 내가 사용할 브라우저를 정한다. 크롬 파이어폭스 등등 다양한 브라우저가 존재하므로 본인의 기호에 맞게 설정해주는것이 좋다. 나는 크롬이 제일 편하고 좋으므로 크롬으로 설치를 했고 앞으로도 크롬을 이용할 예정이므로 다른 브라우저를 이용하시는 분들은 조심해주셨으면 한다.

 

<크롬 다운로드 링크>

https://www.google.com/intl/ko_ALL/chrome/

 

 

1.1 크롬의 개발자 도구

크롬에는 개발자 도구라는 기능이 있다.

현재 내가 보고있는 페이지가 어떻게 개발되었는지 어떤 구성으로 되어있는지

그리고 어떤 기능이 있는지 등등 현재 페이지의 개발에 들어간 모든것을 보여주는 기능이라고 볼수있다.

개발하면서 정말 없어서는 안될 중요한 기능이므로 단축키를 알아두자.

 

 

윈도우

F12 or Ctrl + Shift + i

mac

Command + Option + i

 

 

기능

Elements - 로딩된 웹페이지의 랜더링 된 뷰를 볼수있다. 웹페이지가 내 의도대로 랜더링 되지 않았다면 Elements 탭을 이용하여 어디가 잘못되었는지 찾을수 있다.

 

Console - 로딩된 웹 페이지의 에러를 확인하거나 자바스크립트 소스코드에 포함시킨 console.log의 내용을 확인할수있다.

 

Sources - 로딩된 웹 페이지의 자바스크립트 코드를 디버깅할수있다.

 

Network - 로딩된 웹페이지에 관련된 네트워크와 요청, 퍼포먼스를 확인할수있다.

 

Application - 웹 스토리지, 세션, 쿠키를 확인하고 관리할수있다.

 

 

1.2 콘솔

 

특히나 개발자 도구의 콘솔을 따로 빼내어 알려주는 이유는 그만큼 중요하기 때문이다.

왜 중요하냐. 내가 적은 코드에서 에러가 발생하게되면 이 콘솔창에 에러 메세지가 나오기 때문이다. 

만일 내가 콘솔을 모르고있다면 에러가 났을때 원인찾기가 쉽지 않을것이다.

에러 메세지에 적힌 에러의 이유를 모르기때문이다.

앞에서 말한 내용대로 에러를 위해서도 있지만 또 다른 이유도 있다.

바로 내가 원하는 값을 콘솔에 출력할수도 있기때문이다.

즉 예시를 통해 좀더 쉽게 설명하자면 

 

<콘솔창>

const a = 10

const b = 10

a + b (엔터)

20

 

이런 코딩이 콘솔창에서 즉시 가능하다. 다만 새로고침시 전부 사라진다.

 

 

2. Node.js

 

사실 간단한 웹 어플리케이션은 브라우저만으로도 개발이 가능하지만 프로젝트가 점점 커짐에 따라 브라우저만으로는 불가능해진다. 이 문제를 해결하기 위해 Node.js와 npm(node package manager)를 사용한다.

 

 

2.1 Node.js 설치

 

https://nodejs.org/en/

Node.js

 

링크대로 가게되면 나오는 사이트가 node.js 설치 사이트이다.

왼쪽에는 LTS 버전이 있고 오른쪽에는 Current 버전이 있다.

LTS는 나온지 조금 되어 안정화 되어있는 버전이고

Current 버전은 최신 버전으로 비교적 안정적이지 않을수도 있다.

최신 버전과 안정된 버전 본인의 기호에 맞게 설치해주면 될것같다.

설치를 하게되면 이때 npm도 같이 설치가 된다.

그리고 운영체제에 따라 파일의 설치장소가 다르다.

 

Windows: C:\Program Files\nodejs\node.exe

Mac: /usr/local/bin/node

(버전에 따라서도 설치장소가 달라질수있다는 점을 명심하자!)

 

설치가 완료되면 터미널 또는 윈도우 프롬포트에서 Node.js와 npm 버전을 입력하여 설치가 완료되었는지 확인해야한다.

 

Mac은 터미널에서 확인하고

Windows는 cmd 창에서 확인한다.

 

나는 윈도우 유저이므로 윈도우 기준으로 설명할 예정이다.

 

1. cmd창을 연다.

2. node -v를 적고 버전을 확인한다.

3. npm -v를 적고 버전을 확인한다.

 

만일 버전이 안나온다면 설치가 잘못된 경우이므로 다시 설치를 하자.

설치가 되었다면 npm 버전을 업데이트 해줘야 한다.

앞서 말했듯이 npm은 node.js 다운로드를 진행할때 같이 설치가 되는 프로그램이다.

하지만 node.js보다 업데이트 주기가 빨라서 같이 설치된 버전이 최신버전이 아닐지도 모른다.

따라서 npm만 따로 최신버전으로 업데이트가 필요하다.

 

1. cmd창을 연다.

2. npm install -g npm@latest를 적는다.

3. npm -v를 통해 버전을 확인한다.

 

 

2.3 Node.js REPL

 

REPL은 Node.js는 물론 대부분의 언어가 제공하는 가상환경으로 간단한 코드를 직접 실행해 결과를 확인할수있는것이다. cmd에 다음과 같은 명령어를 실행해보자.

 

1. node 라고 입력한다.

2. 간단한 사칙연산이나 변수명을 정해서 출력해보자.

3. 결과를 확인한다.

 

결과를 확인하면 알수있듯이 간단한 코드를 작성할수있다.

그리고 js파일도 실행시킬수있다.

만일 js파일을 실행시키고 싶다면

 

1. node (js파일명)을 입력한다.

2. 실행결과를 확인한다.

3. 확인이 끝나면 Ctrl + C키를 입력하여 종료한다.

 

 

3. VSCode

 

브라우저 또는 Node.js에서도 코드를 실행할수있으나 실제 개발할때 사용하기에는 아쉬운 부분이 많다. 그래서 다들 코드 에디터를 찾는다. 코드 자동완성, 문법오류, 디버깅, Git 연동 등등 다양한 편리기능을 지원하기때문이다. 최근 자바스크립트 개발자들 사이에서 인기를 끄는 에디터는 당연 VSCode라고 할수있다.

직접 써본 소감을 말하자면 정말 편하다. 그래서 나도 이걸로 개발할것이다.

 

3.1 VSCode 설치

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

링크를 타고 사이트에 접속하여 자신의 운영체제와 맞는 버전을 설치한다.

 

 

3.2 내장 터미널

 

설치한 VSCode를 실행한 다음 알기 쉬운 위치에 폴더와 js파일을 만들어보자.

그리고 VSCode에서 Ctrl+`을 눌러 내장 터미널을 불러온다.

cmd에서 했던 방식 그대로 node (js파일명)을 입력하게되면 js파일이 실행된다.

 

 

3.3 Code Runner 확장 플러그인

 

VS Code의 마켓플레이스에 보면 다양한 확장 플러그인을 볼수있다. 그 중에 Code Runner를 추천하려고 한다.

다양한 언어를 VSCode에서 실행할수있게끔 도와주는 확장 플러그인이다.

설치하게되면 VSCode를 통해 다양한 언어를 개발할수있는것이다.

 

1. VSCode 마켓플레이스에 들어간다.

2. Code Runner를 검색한다.

3. 설치한다.

 

실행방법은 운영체제에 따라 다르다.

 

Windows - Ctrl + Alt + N

Mac - control + option + N

 

Code Runner에 대해 알고있어야할 특징이 있다. 언어마다 언어별로 분리해준다. 무슨 말이냐면 내가 node.js 환경에서 index.js라는 자바스크립트 파일을 실행시켰다고 가정해보자.

그 안의 코드는 다음과 같다.

 

//index.js

const arr = [1,2,3];

arr.forEach(alert);

 

결과는 에러다. 왜냐하면 alert는 node.js에서 제공하는 문법이 아니고 클라이언트 사이트 Web API에서 제공하는 문법이기 때문이다. 다른 환경에서 정의된 문법이므로 서로 인식하지 못한다. 이 특징을 유념해두어야 한다.

 

 

3.4 Live Server 확장 플러그인

 

클라이언트 사이드 Web API가 포함된 자바스크립트를 실행하려면 node.js 환경이 아닌 브라우저에서 실행해줘야 한다.  브라우저를 통해 코드를 실행하려면 개발자 도구의 콘솔 또는 HTML파일에 자바스크립트 코드를 넣고 해당 HTML파일을 브라우저에서 실행시키는것이다. 하지만 이럴경우 코드를 수정할때마다 매번 새로고침을 해주어야 하는 번거로움이 발생한다. 이때 Live Server 확장 플러그인을 사용하게되면 수정사항을 자동으로 반영해주게 된다. 따라서 편하게 개발을 하고싶다면 꼭 추천한다. 설치는 마켓플레이스에서 하면된다.

 

실행방법

 

1. 실행시키고자 하는 파일을 연다.

2. 오른쪽 클릭을 하면 Live Server ~~ 하는 목록이 있다.

3. 클릭하면 끝.