💡 애플리케이션은 데이터를 다룬다. 아무리 복잡한 애플리케이션이라 해도 , 데이터를 입력받아 처리하고 그 결괄르 출력하는 것이 전부이다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 변수란 무엇인지, 그리고 왜 필요한지 살펴보자

10 + 10

이 코드를 실행시키면 어떤 일이 일어날까?

→ 컴퓨터는 사람을 모델로 디자인되어있기 때문에 사람과 유사하게 동작한다.

• 사람

-10,20,+라는 기호의 의미를 알고 있어야 하며, 10+20 이라는 식의 의미도 해석할 수 있ㄷ어야 한다

-의미를 해석하면 +기호의 의미대로 덧셈을 하기 위해 숫자 10과 20 을 두뇌에 기억한다

-그리고 10과 20을 더한 결과인 30도 두뇌에 기억한다

• 컴퓨터(자바스크립트를 해석하고 실행하는 자바스킙트 엔진

-자바스크림트 엔진이 위 자바스크립트 코드를 계싼하려면 먼저 10,20 + 기호 (리터럴과 연산자)의 의미를 알고 있어야 하며, 10+20 이라는 표현식의 의미도 해석할 수 있어야 함

자바스크립트 엔진이 10+20이라는 식의 의미를 해석하면 + 연산을 수행하기 위해 먼저 + 연산자의 좌변과 우변의 숫자 값, 즉 피연산자를 기억한다.

사람은 계산과 기억을 모두 두뇌에서 하지만, 컴퓨터는 연산과 기억을 수행하는 부품이 나누어져 있다. 컴퓨터는 Cpu 를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다

• 메모리

→ 데이터를 저장할 수 있는 메모리 셀의 집합체

→ 메모리 셀 하나의 크기는 1바이트이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어들인다.

→ 각 셀은 고유의 메모리 주소를 갖는다. 이 메모리 주소는 메모리 공간의 위치를 나타내며, 0부터 시작해서 메모리의 크기만큼 정수로 표현된다. 예를 들어, 4GB 메모리는 0부터 5295967295 까지의 메모리 주소를 갖는다

• 저장방법

→ 모든 데이터를 2진수로 처리한다

→ 따라서 메모리에 저장되는 데이터는 데이터의 종류(숫자, 텍스트, 이미지, 동영상 등) 과 상관없이 모두 2진수로 저장된다.

→ 위 예제의 숫자 값 10과 20은 메모리 상의 임의의 위치(메모리 주소) 에 기억(저장)되고 CPU 는 이 값을 읽어들여 연산을 수행한다

→ 연산 결과로 생성된 숫자 값 30도 메모리 상의 임의의 위치에 저장된다

• 재사용할 수 있는가?

→CPU가 연산해서 만들어낸 숫자 값 30을 재사용할 수 없다는 것

10+20 이라는 연산을 했다는 것 : 그 연산 결과가 필요하고 이를 사용해 무언가를 하겠다는 의도가 있었을 것

연산 결과를 단 한 번만 사용한다면 문제가 없겠지만 만약 연산 결과 30을 재사용하고 싶다면 메모리 주소를 통한 연산 결과 30이 저장된 메모리 공간에 직접 접근하는 것 외에 없다

BUT! 메모리 주소를 통해 값에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 높은 매우 위험한 일이다.

if 실수로 운영체제가 사용하고 있는 값을 변경하면 시스템을 멈추게 한다

→ 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.

If 자바스크립트가 개발자의 직접적인 메모리 제어를 허용하더라도 문제가 있다.

→ 값이 저장될 메모리 주소는 코드가 실행될 때마다 값이 저장될 메모리 주소는 변경된다.

이처럼 코드가 실행되기 이전에는 값이 저장된 메모리 주소를 알 수 없으며 알려 주지도 않는다. 따라서 메모리 주소를 통해 값에 직접 접근하려는 시도는 올바른 방법이 아니다

 그래서 변수가 필요한 것이다

이러한 이유 때문에 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 가져와 재사용하기 유위해 변수라는 메커니즘을 제공한다

정의

변수란?

하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

→ 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름

→ 메모리 주소를 치환되어 실행됨

→ 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다.

변수에 여러 개의 값을 저장하는 방법

변수는 하나의 값을 저장하기 위한 매커니즘이다.

→ 여러 개의 값을 저장하려면 여러 개의 변수를 사용해야 함

→ 단, 배열이나 객체 같은 자료구조를 사용하면 관련이 있는 여러개의 값을 그룹화해 하나의 값처럼 사용할 수는 있다

• 변수는 하나의 값을 저장하기 위한 수단

var.userId = 1;
var.userName = 'Lee';

• 객체나 배열 같은 자료구조를 사용하면 여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용할 수 있다

var user = {id : 1, name: insidepixce};

var users= [
    {id: 1, name: gyodam },
    {id: 2 , name : seongnbin}
];

이제 앞서 살펴본 코드를 변수를 사용해 다시 작성해보자

var result= 10+20;

10+20은 연산을 통해 새로운 값 30을 생성한다. 그리고 연산을 통해 생성된 값 30은 메모리 공간에 저장된다. 이때, 메모리 공간에 저장된 값 30을 다시 읽어들여 재사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것이 바로 변수

변수이름 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름

→ 사람을 위해, 사람이 이해할 수 있는 언어로 값이 저장된 메모리 공간에 붙인 상징적인 이름

→ 변수 이름을 사용해 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환

할당 : 변수에 값을 저장하는것

사람이 이해할 수 있는 언어로 명명한 변수 이름을 통해 변수에 저장된 값이 의미를 명확히 한다.

→ 가독성을 높이려면 기능에 연관된 변수 이름을 주는 것이 좋다.

실행 컨텍스트(Execution Context)는

자바스크립트 코드가 실행되기 위해서 필요한 환경을 제공하는 추상적인 개념이다.

실행 컨텍스트는 아래의 세 가지 구성 요소로 이루어진다.

1. 변수 객체(Variable Object): 현재 컨텍스트 내에서 사용되는 지역 변수, 매개 변수, 함수 선언 등의 정보를 담고 있는 객체이다.
2. 스코프 체인(Scope Chain): 변수 객체의 리스트로, 현재 컨텍스트의 변수 객체와 상위 컨텍스트의 변수 객체들을 차례대로 저장하고 있다.
3. this 바인딩(this Binding): this 키워드가 참조하는 객체를 의미한다.

실행 컨텍스트는 함수가 호출될 때마다 생성되며, 생성 과정은 아래와 같다.

1. 활성 객체(Activation Object) 생성
2. Arguments 객체 생성
3. 스코프 정보 생성
4. 변수 정보 생성
5. this 바인딩 생성

실행 컨텍스트는 전역 컨텍스트와 함수 컨텍스트로 나뉜다.

전역 컨텍스트는 코드가 실행되기 전에 생성되며, 전역 객체와 전역 변수를 포함하고 있다. 함수 컨텍스트는 함수가 호출될 때마다 생성되며, 해당 함수의 지역 변수와 매개 변수를 포함하고 있다.

실행 컨텍스트는 자바스크립트의 동작 원리를 이해하는 데 매우 중요한 개념이다.

다음은 실행 컨텍스트를 이해하기 위한 예시 코드이다.

var x = 10;

function foo() {
  var y = 20;

  function bar() {
    var z = 30;
    console.log(x + y + z);
  }

  bar();
}

foo(); // 60 출력

위 코드에서 foo() 함수가 호출되면, foo() 함수의 실행 컨텍스트가 생성된다. foo() 함수의 실행 컨텍스트에는 아래와 같은 정보가 포함된다.

• 변수 객체: y 변수의 정보를 담고 있는 객체
• 스코프 체인: foo() 함수의 변수 객체와 전역 컨텍스트의 변수 객체를 차례대로 저장한 리스트
• this 바인딩: 전역 객체를 참조하는 this

bar() 함수가 호출되면, bar() 함수의 실행 컨텍스트가 생성된다. bar() 함수의 실행 컨텍스트에는 아래와 같은 정보가 포함된다.

• 변수 객체: z 변수의 정보를 담고 있는 객체
• 스코프 체인: bar() 함수의 변수 객체와 foo() 함수의 변수 객체와 전역 컨텍스트의 변수 객체를 차례대로 저장한 리스트
• this 바인딩: 전역 객체를 참조하는 this

console.log(x + y + z); 코드에서 x, y, z 변수는 스코프 체인을 통해 각각 전역 컨텍스트, foo() 함수의 변수 객체, bar() 함수의 변수 객체에서 검색된다. 따라서 60이 출력된다.

변수 선언

프로그래밍 언어에서 변수를 사용하기 위해서는 해당 변수를 선언해야 한다. JavaScript에서는 변수를 선언할 때 let, const, var 등의 키워드를 사용한다.

var

과거부터 사용되어 왔던 변수 선언 키워드로, var로 선언된 변수는 함수 단위의 스코프를 가지며, 해당 함수 내에서만 유효하다. var로 선언된 변수는 중복 선언이 가능하며, 재할당도 가능하다.

var x = 1;
if (true) {
  var x = 2;
  console.log(x); // 2
}
console.log(x); // 2

위 코드에서는 if문 내에서 var로 선언된 x 변수가 전역 변수를 덮어씌우기 때문에, 전역에서의 x값도 2가 된다.

let

ES6에서 도입된 블록 스코프를 가지는 변수 선언 키워드로, let으로 선언된 변수는 중복 선언이 불가능하며, 재할당은 가능하다.

let x = 1;
if (true) {
  let x = 2;
  console.log(x); // 2
}
console.log(x); // 1

위 코드에서는 if문 내에서 let으로 선언된 x 변수가 전역 변수와는 다른 스코프를 가지기 때문에, 전역에서의 x값은 변하지 않는다.

const

let과 유사하지만, 상수를 선언할 때 사용한다. const로 선언된 변수는 재할당이 불가능하다.

const pi = 3.141592;
pi = 3; // TypeError: Assignment to constant variable.

위 코드에서는 pi 변수에 값을 재할당하려고 하면 TypeError가 발생한다.

결론

JavaScript에서 변수를 선언할 때는 let과 const를 사용하는 것이 권장된다. var는 함수 스코프를 가지기 때문에 의도하지 않은 변수 덮어씌움이 발생할 수 있다. 또한, const를 사용하여 상수를 선언하면 값이 변하지 않는 변수를 사용할 수 있다.

null과 undefined: 뭔지, 뭔 차이인지?

JavaScript에서 null과 undefined는 모두 값이 없음을 나타낸다. 그러나 두 용어는 서로 다른 의미를 갖는다.

null

null은 "값이 없음"을 나타낸다. 변수에 명시 적으로 값을 할당하지 않은 경우 해당 값은 null이 된다. null은 개발자가 의도적으로 값을 없애기 위해 사용된다. 때로는 객체의 속성에 대한 값을 초기화하는 데 사용된다. 예를 들어, 다음과 같은 코드가 있으면:

let name = null;

위 코드에서 변수 name은 값을 가지고 있지 않으며 null로 초기화된다.

undefined

undefined는 변수를 선언 할 때 값을 할당하지 않은 경우에 발생한다. 변수 선언 후 초기화하지 않은 경우, 변수는 자동으로 undefined로 설정된다. undefined는 개발자가 의도적으로 값을 없애기 위해 사용되지 않는다.

예를 들어, 다음과 같은 코드가 있으면:

let age;

위 코드에서 변수 age는 값을 가지고 있지 않으며 undefined로 초기화된다.

차이점

null과 undefined의 가장 큰 차이점은 변수가 값이 없음을 나타내는 방법이다. null은 개발자가 명시 적으로 변수를 값이 없음으로 설정하는 반면, undefined는 값이 없는 변수에 대해 자동으로 설정된다.

또한 null은 객체에 대한 값으로 사용될 수 있지만 undefined는 객체의 속성 값으로 사용된다. 객체의 속성 값이 undefined인 경우, 개발자는 해당 속성이 존재하지 않는 것으로 판단할 수 있다.

결론

null과 undefined는 JavaScript에서 모두 값이 없음을 나타내지만, 그 의미와 사용 방법에서 차이가 있다. 개발자는 이러한 차이점을 이해하고 필요에 따라 적절한 값을 사용해야 한다. 코드 작성 시, 명시적으로 null 또는 undefined를 사용하면, 코드의 가독성이 높아지고 버그를 예방할 수 있다.

3.4.1 비주얼 스튜디오란?

비주얼 스튜디오(Visual Studio)는 Microsoft에서 개발한 통합 개발 환경(IDE) 중 하나이다.

대부분의 개발자들에게 인기 있는 이유는 .NET Framework, C#, C++, Python 등 다양한 언어를 지원하기 때문이라고 본다.

또한, 디버깅, 테스트, 빌드 등 개발 과정에서 필요한 기능들을 모두 제공힌디

보통 이렇게 생겼다.

기본적인 사용법은 다들 알 테니 부가적인 걸 공유하자면, 왼쪽에 고양이 키울 수 있다!

vs-code-extension에서 vs-code-pets 확장팩 다운로드하면 된다

3.4.2 내장 터미널

Vs code에는 터미널(윈도우에서는 명령 프롬프트)가 내장되어 있다. 내장 터미널을 열려먼 CTRL + ‘ 단축키를 누르면 된다

3.4.3 Code Runner 확장 플러그인

확장 프로그램이란? 앞서 내가 소개했던 고양이 … 이런걸 확장 플러그이;ㄴ이라 한다

마켓플레이스에서 설치가능

→ code runner 확장 플러그인에서는 다음과 같은 단축키를 통해 현재 표시중인 자바스크립ㅊ트 파일을 실행할 수 있다

→ 원래는 node + 파일명 이렇게 적어야 했는데 말이다…

const arr = [1,2,3];
arr.foreach(alert);

이걸 노드 환경에서 진행한다면 “ reference : alert is not defined “ 에러가 발생할 것이다.

→ 브라우저에 알림창을 띄우는 alert 함수는 브라우저에서만 동작하는 클라이언트 사이드 Web API

<aside> 💡 클라이언트 사이드 WebAPI는 Node.js 환경에서 실행할 수 없다는 점에 주목하자

</aside>

3.4.4 Live Server 확장 플러그인

클라이언트 사이드 WebAPI가 포함된 자바스크립트 코드를 실행하려면 Node.js환경이 아닌 브라우저에서 실행해야 함.

<!DOCTYPE html>
<html>
<body>
	<script src="index.js"></script>
</body>
</html>

위 예제를 실행하려면 개발자 도구의 콘솔에서 실행하거나 자바스크립트 코드를 HTML에 삽입한 다음 HTML 파일을 브라우저에서 열어야 한다

• 위 파일을 브라우저에서 직접 연다면

→ 가능하긴 함

→ 파일 경로의 문제가 발생할 수 있음

→ 소스코드를 수정할 때마다 매번 새로고침 해야하므로 번거로움

• live Server와 함께라면

→ 소스코드르 수정하면 수정 사항이 가상 서버에 자동으로 저장됨

→ 가상 서버가 기동되어 브라우저에 html파일이 자동 로딩된다

클라이언트 사이드. 즉 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있다.

→ But 프로젝트의 규모가 커짐에 따라 React, Angular, Lodash 같은 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint 등 여러가지 도구를 사용할 필요가 있다. 이때 npm이 필요하다

3.3.1 Node.js 와 npm 소개

1. Node.js란?

• 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
• 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작할 수 있게 만든 것이 Node.js

1. Npm이란?

• Node.js 패키지 매니저 (Node.js를 설치하면, 자동으로 설치된다.)
• 오픈소스 라이브러리 및 프레임워크 등의 다양한 패키지를 설치하고 관리할 수 있는 도구
• 프로젝트에서 필요한 패키지들을 package.json 파일에 명시하면, 이를 토대로 npm이 패키지를 자동으로 설치 및 관리해 준다.
• Npm에 관련된 설명을 더 읽고 싶다면 →

[node js] npm

3.3.2 Node.js 설치

1. LTS 버전

→ 장기적으로 안정된 지원이 보장됨

1. current 버전

→최신 기능을 제공하지만 업데이트가 발생하는 버전으로 안정적이지 않을 수 있음

그럼 그 둘 중에 뭘 골라야 하느냐

실제 개발 환경 : LTS

학습을 위해: Current 를 사용하는 것이 좋음]

→ 이때 NPM도 함께 설치된다

→ 이는 아래의 디렉터리에 설치되며, 버전에 따라 설치 위치가 바뀐다

• 윈도우 설치 경로

C:\\Progam Files\\nodejs\\node.exe

• macOs 설치 경로

/url/local/bin/node

설치과 완료되면 터미널(윈도우에서는 명령 프롬프트)에서 Node.js와 npm의 버전을 출력해 정상적으로 설치되었는지 확인한다.

$node -v
$npm -v

3.3.3 Node.js REPL

REPL: node.js가 제공하는 대화형 콘솔을 말한다. 이 콘솔에서는 자바스크립트 코드를 실행하고 결과를 즉각적으로 확인할 수 있다. REPL은 Read-Eval-Print-Loop의 약자로, 유저의 입력을 받아들이고(Read), 입력된 자바스크립트 코드를 실행(Eval)하며 결과를 출력(Print)한다. 그리고 이를 반복(Loop)한다.

프롬프트가 이런 식으로 >로 변경되면 자바스크립트 코드를 실행해 볼 수 있다.

한줄씩 한줄씩만 실행이 가능하다

• 자바스크립트 파일을 실행하려면 node 명령어 뒤에 파일 이름을 입력한다

→파일 확장자는 생략해도 된다.

나는 이 야구 게임 코드를 실행해보겠다.

→ 야구 게임 코드가 궁금하다면 : https://insidepixce.tistory.com/86

파일 실행하기

이렇게 잘 입력되는 것을 볼 수 있었다.

→ But 프로젝트의 규모가 커짐에 따라 React, Angular, Lodash 같은 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint 등 여러가지 도구를 사용할 필요가 있다. 이때 npm이 필요하다

3.3.1 Node.js 와 npm 소개

1. Node.js란?

• 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
• 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작할 수 있게 만든 것이 Node.js

1. Npm이란?

• Node.js 패키지 매니저 (Node.js를 설치하면, 자동으로 설치된다.)
• 오픈소스 라이브러리 및 프레임워크 등의 다양한 패키지를 설치하고 관리할 수 있는 도구
• 프로젝트에서 필요한 패키지들을 package.json 파일에 명시하면, 이를 토대로 npm이 패키지를 자동으로 설치 및 관리해 준다.
• Npm에 관련된 설명을 더 읽고 싶다면 →

[node js] npm

3.3.2 Node.js 설치

1. LTS 버전

→ 장기적으로 안정된 지원이 보장됨

1. current 버전

→최신 기능을 제공하지만 업데이트가 발생하는 버전으로 안정적이지 않을 수 있음

그럼 그 둘 중에 뭘 골라야 하느냐

실제 개발 환경 : LTS

학습을 위해: Current 를 사용하는 것이 좋음]

→ 이때 NPM도 함께 설치된다

→ 이는 아래의 디렉터리에 설치되며, 버전에 따라 설치 위치가 바뀐다

• 윈도우 설치 경로

C:\\Progam Files\\nodejs\\node.exe

• macOs 설치 경로

/url/local/bin/node

설치과 완료되면 터미널(윈도우에서는 명령 프롬프트)에서 Node.js와 npm의 버전을 출력해 정상적으로 설치되었는지 확인한다.

$node -v
$npm -v

3.3.3 Node.js REPL

REPL: node.js가 제공하는 대화형 콘솔을 말한다. 이 콘솔에서는 자바스크립트 코드를 실행하고 결과를 즉각적으로 확인할 수 있다. REPL은 Read-Eval-Print-Loop의 약자로, 유저의 입력을 받아들이고(Read), 입력된 자바스크립트 코드를 실행(Eval)하며 결과를 출력(Print)한다. 그리고 이를 반복(Loop)한다.

프롬프트가 이런 식으로 >로 변경되면 자바스크립트 코드를 실행해 볼 수 있다.

한줄씩 한줄씩만 실행이 가능하다

• 자바스크립트 파일을 실행하려면 node 명령어 뒤에 파일 이름을 입력한다

→파일 확장자는 생략해도 된다.:

나는 이 야구 게임 코드를 실행해보겠다.

→ 야구 게임 코드가 궁금하다면 : https://insidepixce.tistory.com/86

파일 실행하기

이렇게 잘 입력되는 것을 볼 수 있었다.

→ But 프로젝트의 규모가 커짐에 따라 React, Angular, Lodash 같은 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint 등 여러가지 도구를 사용할 필요가 있다. 이때 npm이 필요하다

3.2.1 개발자 도구

크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 강력한 도구이다.

→ 크롬 브라우저에 기본 내장되어 있음

• 개발자 도구의 다양한 기능

패널 설명

3.2.2 콘솔

콘솔이란?

→ 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳

→ 구현 단계에서는 에러가 빈번하게 발생하므로 항상 콘솔을 열어둔 상태에서 개발할 것

→ 콘솔을 열어두지 않으면 에러가 발생했는지도 모르는 경우가 있기 때문

• 콘솔의 다른 사용법

→ 구현 단계에서 디버깅을 실행하는 것보다 간쳔하게 코드의 실행 결과를 확인하면서 개발을 진행하기 위해 console.log 메서드를 사용한다

→ console.log(…)는 괄호 안 코드를 평가해서 그 결과를 콘솔에 출력한다

→REPL(read eval print loop: 입력 수행 출력 반복) 환경으로 사용할 수도 있다.

프롬프트에 자바스크립트 코드를 입력하면 다음 줄에 실행 결과가 표시된다. 엔터 키를 입력하면 다음 프롬프트로 이동한다.

콘솔 꿀팁

• 여러 줄로 이루어진 자바스크립트 코드를 실행할 때 줄바꿈이 필요한 경우에는 shift키를 누른 상태에서 엔터키를 사용한다
• 자바스크립트 코드를 실행하는 중에 에러가 발생하면 에러의 내용이 콘솔에 출력된다

3.2.3 브라우저에서 자바스크립트 실행

브라우저에서 자바스크립트를 실행하는 법

HTML파일 로드

→ script 태그에 포함된 자바스크립트 코드 실행

→ 자바스크립트 코드 내에서 console.log 메서드가 호출되었다면 콘솔에 실행 결과가 출력될 것임

3.2.4 디버깅

에러 정보에 오른쪽에 에러 발생 위치를 나타내준다. 그걸 클릭하면 Source 파일로 넘아간다.

에러가 발생한 위치에 빨간 밑줄이 표시되고, 그 위에 마우스를 올리면 에러 정보가 표시된다

→ 디버깅 : 먼저 에러 메시지를 확인하고 에러가 발생한 원인을 제거하는 것

• 모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있음

→ 브라우저 뿐만 아니라 node.js 도

→ 브라우저 환경 또는 Node.js 환경에서 실행할 수 있음

• 브라우저와 node.js 의 용도 차이Node.js : 브라우저 외부에서 자바스크립트 실행 환경을 제공해주는것
• 브라우저 : html, css, 자바스크립트 실행 환경을 제공

→ 모두 ECMAScript를 실행할 수 있지만 이를 제외한 추가로 제공하는 기능을 호환되지 않음

ex) 파싱된 Html요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본적으로 제공

But node.js는 제공하지 않음 → 브라우저 외부 환경에서는 Html 요소를 파싱해서 객체화한 DOM을 직접 다룰 필요가 없음

<aside> 💡 웹 크롤링 : 서버에서 웹사이트의 콘텐츠를 수집하기 위해 웹사이트에서 html문서를 가져온 다음, 이를 가공해서 필요한 데이터만 추출하는 경우가 있다. 이를 웹 크롤링이라고 한다. 서버 환경은 DOM API를 제공하지 않음으로 cheerio 같은 DOM 라이브러리를 사용해 HTML문서를 가공하기도 한다

</aside>

• cheerio란?

cheerio는 Node.js에서 사용하는 DOM 조작 라이브러리 중 하나로, jQuery와 유사한 문법을 사용하여 HTML 요소를 파싱하고 데이터를 추출하는 기능을 제공한다.

→ Node.js에서는 파일을 생성하고 수정할 수 있는 파일 시스템을 기본 제공하지만 브라우저는 이를 지원하지 않음.

(FileReader 객체를 사용해 사용자가 지정한 파일을 읽어들이는건 가능)

만약 브라우저를 통해 다운로드되어 실행되는 자바스크립트가 사용자 컴퓨터의 로컬 파일을 삭제하거나 수정하고 생성할 수 있다면, 이는 사용자 컴퓨터가 악성 코드에 그대로 노출된 것과 마찬가지이다.

→ 보안상의 이유로 브라우저 환경의 자바스크립트는 파일 시스템을 제공하지 않음

→ 근데 혹시나 몰라서 나는 토어 브라우저 실행시 자바스크립트 사용 끈다 ^^

이처럼 브라우저는 ECMAScrip와 DOM, BOM, Cancas, 등등과 같은 클라이언트 사이드 Web API를 지원함.

Node.js는 클라이언트 사이드 Web API를 지원하지 않고 ECMAScript 와 Node.js 고유의 API를 지원한다.

크롬 브라우저의 V8 자바스크립트 엔진은 Node.js에서도 사용하고 있다.