[Javascript] JSX 와 NodeJS

우유·2025년 1월 10일

JavaScript Node

javascript

목록 보기

2/6

JSX

자바스크립트 안에 HTML과 유사한 문법을 사용하는 확장 문법

여러개의 스크립트,라이브러리(모듈), 바벨도구를 관리 => nodejs => bundle.js

Node.js 란?

공식 홈페이지에서 정의하는 Node.js란 "V8 Java Script 엔진으로 빌드 된 Java Script 런타임(실행환경)" 이다.
자바스크립트가 실행 되려면? 브라우저가 필요함
스크립트를 실행해줄 새로운 환경 등장 => 탈브라우저 => Node.js
구글이 script엔진을 새로 만듦(v8)
브라우저 없이 v8엔진을 가동할 수 있게 만듦 => 브라우저대신 사용자와 상호작용 할 수 있는걸 만듦 (실행만 할 수 있음, 브라우저 객체를 건들지 못함) => DOM 을 제외하고 file, network 등을 조작할 수 있게 만듦

Node.js를 설치하면 브라우저를 키지 않아도 자바스크립트를 컴퓨터에서 수행할 수 있게된다.
Node.js가 자바스크립트를 컴퓨터에서 쉽게 실행시켜줬기 때문에 자바스크립트를 프로그래밍 언어처럼 사용하기 시작했다.

CDN

CDN(Content Delivery Network)은 전 세계에 분산된 서버 네트워크로, 웹 콘텐츠를 사용자에게 빠르고 효율적으로 전달하기 위해 사용됩니다. CDN은 웹 사이트의 성능을 개선하고, 기존 웹 호스팅의 문제점을 해결하는 데 널리 사용되고 있다.

동기 vs 비동기

동기 : 순차적 실행
비동기 : 동시에 실행

비동기화

프로세스/ 스레드 생성 => 시분할
버퍼 => 버퍼생성 (자바스크립트 처리방식)

자바스크립트는 ui 스레드 이외의 모든것을 비동기 처리한다.

callback 함수

어떠한 함수에 매개함수로 전달되어 특정 작업을 끝난 뒤 실행되는 함수
callback : 나중에 부를게~

const fs = require("fs");

//비동기 처리
 fs.readFile("data.txt", (err, data) => {
   if (err) throw err;
   console.log(data.toString());
 });


let x = 30;
let y = 20;
let result = x + y;
console.log(result);

출력 결과

50

안녕? 노드?

const fs = require("fs");
// 동기처리
let data = fs.readFileSync("data.txt");
console.log(data.toString());

let x = 30;
let y = 20;
let result = x + y;
console.log(result);

출력결과

안녕? 노드?

50

npm

npm이란? Node.js로 만들어진 pakage(module)을 관리해주는 툴
npm init : npm 프로젝트 시작
package.json
```
"scripts": {
  "start": "node index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},
```
script 부분에 life cycle script 를 제외한 내가 지정한 명령을 실행할때 run을 붙여준다
lifeCyle scripts에 해당하는 명령은 run을 빼고 바로 실행 할 수 있다.

ex) npm start, npm test , npm run dev