[node js] 1주차 - 1

필수 다운로드

Visual Studio Code (VS Code)

왜 VS Code를 사용할까요?

VS Code는 Windows 운영체제를 개발한 마이크로소프트에서 개발하고 관리중인 오픈소스 IDE입니다. 메모장처럼 아주 가볍지만 확장 프로그램을 통해 기능을 끝 없이 확장 가능한 만능 IDE입니다.

여러분이 언젠가 배울 수도 있는 자바스크립트의 상위 집합 언어인 타입스크립트를 개발한 마이크로소프트가 만든 IDE이기 때문에, 타입스크립트를 제일 잘 지원하기도 합니다.

 

패키지 = 모듈 = 라이브러리

JavaScript란?

1) JavaScript가 존재하기 이전의 웹 생태계

이 당시엔 웹 브라우저가 존재했지만, HTML과 CSS로 아주 간단한 스타일만 적용하는게 일반적이었습니다.

CSS 또한 지금처럼 화려하게 적용 할만한 기능이 없었고, 현재의 워드프로세서보다 더 적은 기능으로 텍스트를 꾸미고 간격을 조정하는게 전부였습니다. HTML이라는 단어 그대로 Hyper Text를 이용해 각 문서(페이지)간 이동이 원활하게 꾸며둘 수 있는 순수한 Markup Language로서 이용되었습니다.

순수하게 문서를 웹으로 볼 수 있는 수준으로 이용한것이죠.

2) JavaScript 탄생 비화

• 자바스크립트는 이런 정적인(Static) 문서를 조금 더 동적(Dynamic)으로 표현할 수 있도록 만들어졌는데, NetScape라는 웹 브라우저를 통해 상호작용을 강조하기 위해 간단한 기능을 넣어 만든것이 자바스크립트의 시초였습니다.
• 이 당시에는 넷스케이프가 만든 언어가 자바스크립트라는 이름도 아니었고, 넷스케이프를 시작으로 브라우저를 만드는 각 회사에서 자신들의 브라우저에서 좀 더 다이나믹한 상호작용을 위해 언어를 사용할 수 있게 기능을 추가했습니다.
• 웹 개발자들은 각 브라우저에서 동일한 기능을 구현하기 위해 모든 코드를 따로 작성해줘야 했기 때문에 (아주 복잡한 문제들이 있었지만... 브라우저 전쟁 참고) 표준화 작업을 위해 많은 사람들이 노력했고, 그 결과 Ecma International에서 ECMAScript(ECMA-262)-에크마스크립트 라는 이름으로 현재의 자바스크립트 표준을 제정하기 시작합니다.

결국 우리가 지금 사용하는 자바스크립트는 Ecma International에 의해 제정된 표준이 구현된것으로 볼 수 있습니다!

3) ECMAScript 버전에 대하여

• ES6? ES2015?
  • 이 차이가 뭘까요? 6번째 버전과 2015번째 버전? No!! 🙅‍♂️
  • Ecma International에 의해 제정된 6번째 ECMAScript 표준을 ES6라고 부를수 있습니다.
  • 2015년에 제정된 ECMAScript 표준을 ES2015 라고 부를수 있습니다.
  • 2015년에 6번째 ECMAScript 표준이 제정되었기 때문에 결국 ES6와 ES2015는 동일한 표준을 일컫습니다.
• 이제는 매 년 새로운 ECMAScript 표준이 제정됩니다.
• 2000년 뒤에도 자바스크립트가 쓰일지는 모르지만, 최소한 우리가 살아있는 동안에는 1000번째 표준이 제정되지는 않을테니 구분하기 쉽겠죠?
• 2021년을 기준으로 가장 대중적으로 사용되는 버전은 ES6(ES2015), ES7(ES2016) 입니다.
  • 가장 많은 브라우저에서 지원하고 있기 때문인데, IE는 ES5까지만 지원합니다. https://www.w3schools.com/js/js_versions.asp
  • 우리는 자바스크립트 코드를 브라우저가 아닌 Node.js에서 실행하기 때문에 비교적 자유롭게 사용할 수 있습니다!
• 이번 커리큘럼에서 배우는 문법은 ES5와 ES6에서 지원하는 문법이 주를 이루며, 개념을 배우는것 자체에 방해가 될 수 있기 때문에 이러한 버전에 초점을 맞추진 않을 예정입니다. 여기서 이런 내용을 전달하는 이유는 여러분이 사용하는 문법이 어떤 버전에서 지원하는지 고민할 수 있는 배경 지식을 전달하기 위함입니다.

4) JavaScript 엔진: V8(구글개발자)

• JavaScript가 동작할 수 있는 모든 브라우저에는 JavaScript 엔진이 내장되어 있습니다.
• Chrome 브라우저에 탑재된 자바스크립트 엔진 중 하나인 V8은 2021년 기준으로 ECMAScript 표준을 가장 완벽하게 구현한 엔진이며, 현존하는 자바스크립트 엔진 중 가장 빠른 자바스크립트 실행 속도를 보여줍니다.
• V8 엔진은 6.0 이전 버전까지는 다른 자바스크립트 엔진과 비슷하게 (현재와 비교해) 느리고 미미한 성능을 보여줬지만, 6.0 버전부터 엄청난 성능 개선을 이뤄 가장 빠른 자바스크립트 엔진으로 자리잡았습니다. -약 8년전

Node.js와 npm

1) Node.js란?

Node.js란 자바스크립트가 실행될 수 있게 도와주는 런타임 플랫폼입니다.

맨 처음에 위와 같이 말했었죠? 조금 더 쉽게 비교하자면!

• 자바스크립트 → 언어(한국어) 간단하게 말하면? 자바스크립트는 내 생각을 코드로 표현할 수 있게 도와주는 도구
• Node.js → 런타임 플랫폼(한국말) 간단하게 말하면? Node.js는 자바스크립트 코드를 브라우저가 아닌 곳에서도 실행할 수 있게 해주는 마법 상자

1주차를 진행하며 이 둘이 다른것을 이해하고, 2주차부터는 이 둘을 구분할 줄 알아야 합니다!

ode.js와 V8 엔진과의 관계

• Node.js는 V8 엔진을 기반으로 개발되었고, 우리가 Node.js를 통해 자바스크립트 코드를 실행하는 것은 대부분 V8에 의해 실행된다고 봐도 무방합니다. (내부적으로 Node.js가 직접 담당하는 부분들이 있지만, 지금 우리에겐 중요하지 않습니다!)
• Node.js는 처음 공개될 당시 성능이 그다지 좋지 않았지만, V8 6.0 버전이 공개되면서 Node.js 또한 자연스레 엄청난 성능 향상을 이뤘습니다.
• 짧은 코드로 쉽게 서버 프로그램을 작성할 수 있더라도 실무에서 사용하기 어려웠던 성능으로 외면받던 Node.js는 V8의 성능 향상을 계기로 본격적으로 많은 개발자에게 사랑을 받기 시작했습니다.

2) Node.js 설치하기

window = node -v16.13.1 -x(내 비트).msi

https://nodejs.org/download/release/v16.13.1/

Index of /download/release/v16.13.1/

설치 확인해봅시다.

• mac의 터미널 / win의 명령 프롬포트에서 아래와 같이 node와 npm의 버전을 확인해봅시다!
• node -v
• npm -v

npm이란?

• npm은 자바스크립트에서 사용할 수 있는 패키지(모듈) 관리자입니다!
• 여러분이 Python과 같은 언어에서 Flask나 BeautifulSoup과 같은 패키지를 설치할때 pip가 필요했다면 Node.js에서는 npm을 통해 필요한 패키지를 설치 할 수 있습니다.
• 혹시 pip를 모르신다면 우선 "Node.js를 사용하는데 필요한 패키지를 설치해주는 프로그램" 이라고 생각하시면 좋습니다 🙂
• npm을 통해 여러분이 사용 할 라이브러리를 쉽게 설치하고 버전을 관리할 수 있고, 제거할수도 있습니다.
• npmjs.com 에서 검색해서 확인할 수 있는 패키지만 설치가 가능합니다.(패키지 = 모듈 = 라이브러리)

ex)express라는 패키지(모듈)는 하는 일이 많고 제약이 많아서 프레임워크(틀이 잡힌 도구)라고 불림

제약이 많을수록 프레임워크에 가까움

• 누구나 새로운 패키지를 등록할 수 있습니다.
• Node Package Manager의 약자로 npm이라는 이름을 가졌지만, 지금은 Node.js와 관계 없이 프론트엔드에서만 사용 가능한 자바스크립트 패키지들도 모두 등록되어 있습니다.

Node.js의 REPL

REPL이란?

브라우저에서의 repl: 개발자 도구 , 

터미널에서의 repl: node 입력

• 일반적으로 "REPL 환경" 이라 함은 아래와 같이 설명할 수 있습니다.

입력 받은 코드를 읽어(Read)들여 메모리에 저장하고, 평가(Evaluate)된 값을 출력(Print)합니다. 특정 신호를 입력받기 전까지 위의 과정을 반복(Loop)합니다.

• 쉽게 말하자면? 입력하는 코드의 결과 값을 즉시 확인 할 수 있기 때문에 간단한 문법 테스트, 테스트 등으로 아주 적합한 개발 환경으로 볼 수 있습니다.
• Node.js는 REPL 환경을 제공하고 있으며, 우리는 그것을 쉽게 이용할 수 있습니다.

웹 브라우저의 콘솔?

웹 브라우저에서 개발자 도구에 보이는 콘솔 창에서 자바스크립트 코드를 바로 작성할 수 있는데요, 이것도 REPL이 맞지만 Node.js에서의 REPL 환경과 다르게 Node.js가 제공하는 API를 사용할 수 없고 브라우저의 API를 사용해 DOM을 제어할 수 있다는 차이가 있습니다. https://developer.chrome.com/docs/devtools/console/#javascript

REPL 환경을 어떻게 이용할까요?

• Windows 사용자인 경우:

커맨드 창 또는 Git Bash를 켜고, node 를 입력 후 엔터를 치면 Node.js의 REPL 환경으로 진입할 수 있습니다.

• Ctrl + C를 두번 누르거나, Ctrl + D를 한번 누르면 REPL 환경에서 벗어날 수 있습니다.
• 자바스크립트의 문법을 배우는 1주차에서는 지금 배운 REPL 환경에서 코드를 입력하며 실시간으로 확인해볼거에요!