Node.js (노드)
크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(플랫폼)
2008년 크롬 웹브라우저가 출시되면서 자바스크립트의 속도가 점차 빨리지게 되었고, 이에 자바스크립트를 웹 브라우저가 아닌 곳에서 쓸 수 있게 만들자는 의견에 의해 CommnJS표준이 작성되었고, Node.js는 CommonJS표준에 맞춰 크롬 V8엔진을 기반으로 개발된 플랫폼 환경이다
주로 서버측 프로그래밍에서 사용되며 비동기 이벤트 기반의 단일 스레드 모델을 사용하여 효율적으로 네트워크 애플리케이션을 개발할 수 있도록 지원한다.
Node.js를 사용하면 웹 브라우저가 아닌 곳에서 자바스크립트로 프로그램을 개발할 수 있다.
JAVA Spring 진영에서의 Tomcat(내/외장) 서버와 비슷한 역할을 해준다.
https://junspapa-itdev.tistory.com/3
[Node.js 1강]node js 란? 장점, 단점, 어떤 웹서비스에 사용해야할까?
Node.js 란? Node.js는 위키백과에 아래와 같이 정의되어 있습니다. Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크
junspapa-itdev.tistory.com
Babel(바벨)
ECMAScript 2015+ 버전 즉, ES6이상 (ES5는 2009년출시) 버전의 JavaScript 코드를 이전 버전으로 변환해 주는 Javascript 컴파일러(Transpiler)이다.
최신 문법을 사용하면서도 다양한 환경에서 실행 가능한 코드로 변환하여 호환성을 제공한다. (트랜스 파일링)
예를들면 런타임 환경인 NodeJS 혹은 브라우저가 최신 문법들을 지원하지 않을 수 있기 때문에 (버전이 낮으면)
해당 문제점을 미연에 방지하고자 ES5 등의 하위 버전으로 변환시켜주고 이를 Transpiler 이라고 한다.
대표적으로 추가된 최신 문법
- import & export
- let & const
- class
- arrow function
- template string
- generator
- destructuring
주의해야 할 점은 Babel을 사용한다고 해서 ES6,ES7 함수를 다 사용할수 있는 건 아니기 때문에, babel-ployfill을 사용하여 프로젝트 셋업시 여러 함수등을 검사해주는 테스트를 진행해보는것이 좋다.
(CRA 에는 Babel이 기본적으로 내장되어있기 때문에 최신 문법을 사용하여도 문제가 없었던것임.)
ExpressJS
Node.js를 위한 웹 애플리케이션 프레임워크로, 간편하고 유연한 구조를 제공한다.
라우팅, 미들웨어, 템플릿 엔진 등을 포함한 다양한 기능으로 웹 애플리케이션을 쉽게 구축할 수 있도록 도와준다.
외부 모듈 이기 때문에 NPM을 통해 설치해야한다.
JAVA Spring 진영에서 SpringFramework와 같은 서버개발 프레임워크 역할을 해준다
const express = require('express')
const app = express();
//라우트 정의 - 미들웨어 정의 가능
app.use(
(req, res,
/* 미들웨어 */
()=>{
/* 실행 */
}) => {
res.send('Hello World!');
}
)
//라우트 정의 2
app.get('/' (req, res) => {
res.send('Hello World!');
});
//서버 실행
const port = 3000;
app.listen(port, () => {
console.log(`Server is listening on port ${port}`)
})Module (Node.js)
Node.js는 기능을 학장하고자 Module이라는 개념을 사용한다.
Module 중에서 Node.js에 기본적으로 있는 모듈을 내부 모듈이라고 한다.
일반적으로 require('모듈명') 함수를 사용하여 내장모듈 혹은 외부모듈을 불러들여와 변수에 담아 사용한다.
(최신 문법은 import express from 'express' 로도 사용한다)
npm install 모듈명
//expressjs 외부 모듈 설치
npm install expressNPM (Node Package Manager)
Node.js 환경에서 사용되는 패키지 관리자로, 프로젝트에 필요한 '외부 모듈' 패키지를 설치하고 관리하는데 사용된다.
`package.json` 파일에 프로젝트의 으존성 정보를 기록하고, 이를 다른 개발자나 환경에 공유할 수 있게 해준다.
Java Spring 진영에서 Maven이나 Gradle과 유사하게 패키지 관리 및 의존성 관리를 담당하는 도구이다.
node_modules
npm을 통해 설치된 패키지들이 저장되는 디렉토리로, 프로젝트의 의존성을 포함하고, 프로젝트를 실행하거나 빌드할 때 이 디렉토리 내에 있는 패키지들이 사용된다.
Java Spring 진영에서 Maven이나 Gradle에서의 lib 폴더와 유사하게 프로젝트의 의존성 패키지들이 저장되는 디렉토리이다.
Nodemon (노드몬)
Node.js 애플리케이션(백엔드서버)을 개발할 때 코드의 변경을 감지하고, 변경이 있을 경우 자동으로 애플리케이션을 다시 시작해주는 도구이다.
소스 코드 수정 시 수동으로 서버를 재시작 하는 수고를 덜어주고, 신속한 개발을 가능케 한다.
자바스크립트 언어 기반 프론트엔드 코드는 주로 브라우저에서 실행되기 때문에 코드 수정 시 브라우저에서 일반적으로 자동으로 리로드되어 변경사항이 즉시 반영된다.
대표적으로 CRA와 같은 도구를 사용할 때 Hot Module Replacement(HMR)과 같은 매커니즘을 사용하여 필요한 모듈만 교체하여 페이지 전체를 새로고침 하지 않고도 변경사항을 빠르게 확인할 수 있고, VScode의 LiveServer가 이 역할을 해준다.
반면 자바스크립트 언어 기반 백엔드 코드는 자바(스프링)와 같이 서버에서 실행되므로 코드 수정시 일반적으로 자동으로 변경을 감지하고 서버를 다시 시작히자 않는 한 변경사항이 즉시 반영되지 않는다.
JAVA Spring 진영에서의 JRabel(유료) 혹은 Devtools 역할을 해준다.
Webpack
프론트엔드 자바스크립트 애플리케이션을 위한 모듈 번들러로, 프로젝트의 자원들을 번들링하고 최적화 하는 역할을 한다.
(번들링 이란 여러 개의 파일 및 모듈을 하나의 묶음 또는 번들로 만드는 과정)
Webpack은 주로 프론트엔드 개발에 사용되며 여러 개의 자원을 하나의 번들로 묶어 효율적으로 관리하고 제공하는데에 주로 사용한다.
번들의 주요 목적과 이점
- 파일간 의존성 해결
여러 모듈이나 파일들 간의 의존성을 해결하여 프로젝트의 구조를 명확하게 만든다. - 네트워크 비용 감소
여러 파일을 하나의 번들로 묶으면, 웹 페이지를 로드할 때 필요한 요청 수가 감소하고 네트워크 비용이 감소한다. - 로딩 속도 향상
번들로 묶인 파일은 한 번에 로드되기 때문에 초기 로딩 속도가 향상된다. - 코드 최적화
번들링 도구들은 코드를 압축하고 최적화 하여 용량을 줄이고 성능을 향상시킨다.
모듈 시스템, 코드 스플리팅, 로더 등 다양한 기능을 제공하여 프론트엔드 개발을 효율적으로 관리할 수 있다.
프론트엔드에서 대표적으로 Webpack이나 Parcel과 같은 번들링 도구가 사용된다.
이러한 도구들은 다양한 파일 형식을 번들로 묶고, 자바스크립트 CSS이미지 등 다양한 자원들을 최적화 하여 제공한다.
번들링을 통해 프론트엔드 개발자는 모듈 시스템을 편리하게 사용하고, 최종 사용자에게는 효율적이고 빠른 웹애플리케이션을 제공할 수 있다.
예를들면 웹 애플리케이션을 배포할때 정적 파일(css등)들을 모아 하나의 파일로 합친 뒤(번들링) 압축(Compress)하여 min파일 등으로 만들어준다
Java Spring 진영에서 Maven이나 Gradle과 유사하게 프론트엔드 프로젝트의 의존성 관리와 빌드 프로세스를 담당한다.
PUG
expressJS 패키지의 view 엔진이다.
HTML을 PUG문법으로 작성하면 HTML로 바꿔주는 기능을 한다.
들여쓰기를 통한 계층 구조와 간결한 문법을 사용한다.
<html>
<head>
<title>My Pug Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
<-- PUG 예시 ->
html
head
title My Pug Page
body
h1 Hello, World!설치
Node 프로젝트 디렉토리 초기화
npm init -y터미널에 위 명령어 입력시 `package.json` 파일이 디렉토리에 생성,추가된다.
// 파일 생성 명령 : code 파일명
// code .gitignore
// code README.md
// 파일 생성 및 한줄 추가 : echo "추가할 문장" >> 파일명.확장자
echo "/node_modules" >> .gitignore
echo "# web-zoom-clone" >> README.md
// 서버를 구현할 파일 추가
code src/server.jsecho 명령어를 사용하여 위와같이 타이핑 후 `.gitignore`과 `README.md` 두개의 파일을 생성하고, code명령어로 `server.js`파일도 src디렉토리에 구성한다
바벨 설치
npm i @babel/preset-env @babel/core @babel/cli @babel/node -D
[ babel.config.json 파일 추가 ]
{
"presets" : ["@babel/preset-env"]
}
Babel의 환경에 맞게 자동으로 필요한 각종 플러그인들을 설정해주는 preset이다.
개발자는 수동으로 각 브라우저의 지원 범위를 신경쓰지 않아도 된다.
자동으로 필요한 poltfill을 추가하거나 특정 브라우저의 버전에 다라 적절한 변환을 수행한다.
최신 ECMAScript 문법을 사용하며, 필요한 경우에만 필요한 polyfill을 추가합니다. 이를 통해 개발자는 최신 JavaScript 문법을 사용하면서도 타겟 환경에 맞게 자동으로 변환되어 브라우저 호환성을 유지할 수 있게된다.
nodemon 설치
npm i nodemon -D
[ nodemon.json 파일 추가 ] exec라는 속성키 이름에 nodemon으로 실행할 server.js 파일 풀패키지 경로를 추가
{
"exec" : "babel-node src/server.js"
}
해당 작업을 통해 npm run dev 명령어를 입력하여 nodemon이 실행되면
위 등록된 key에 지정한 exec 명령을 실행하게되고 value로 등록된 해당 파일 하나만을 실행하게 된다.
value의 뜻은 src/server.js에 대해 babel-node 명령문을 실행시킨다는 의미이다.
nodemon 프로젝트에 변경사항이 있을 때 마다 실시간으로 확인하여 서버를 재시작하게 되는데 이때 babel-node를 통해 server.js코드를 일반 NodeJS코드로 컴파일해주도록 설정한것이다.
{
"ignore": ["src/public/*"]
"exec" : "babel-node src/server.js"
}위의 ignore 속성을 추가함으로써 해당 경로의 파일이 수정되어도 nodemon서버가 재실행 되지 않게끔 설정하였다.
[ package.json ] 파일 script 정보에 nodemon을 아래와 같이 등록한다.
{
/* 프로젝트 정보 생략함 */
"scripts": {
"dev": "nodemon"
},
/* 디펜던시 목록 생략함 */
}
해당 설정을 추가함으로써 nodemon이 호출되면 nodemon이 nodemon.json을 살펴보고 해당 파일의 코드(ignore/exec)를 실행한다.
[ src/server.js ]
console.log("hello")npm run dev
ExpressJS 설치
npm i express
[ src/server.js ]
import express from "express"
const app = express();
console.log("hello")
app.listen(3000)npm run dev
PUG 설정 및 렌더링
pug 모듈 설치 터미널 명령
npm i pug
[ src/views/home.pug ] 파일 생성
doctype html
html(lang="ko")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Noom
body
h1 It works!
[ server.js ] expressJS에 pug 엔진 등록 및 경로 설정 & view 렌더링 설정
import express from "express"
const app = express();
/* pug설정 시작 */
app.set('view engine', 'pug') //view 엔진을 pug 로 설정 (spring의 view resolver처럼 suffix에 해당)
app.set('views', __dirname + "/views") // root(src)/views 하위의 pug파일을 읽는다.
/* pug설정 끝 */
/* url mapping 및 view render 작업 시작 */
app.get("/", (req, res)=>{
res.render("home") // get함수에 지정한 매핑주소로 접속시 home을 렌더링한다. render에 전달받은 매개변수는 view정보이며 파일명의 prefix에 해당한다. (spring의 view resolver처럼 home.pug로 변한됨)
})
/* url mapping 및 view render 작업 끝 */
const port = 3000;
const handleListen = () => console.log(`Listening on http://localhost:${port}`)
app.listen(port, handleListen)
PUG 정적파일 로드
script(src="/public/js/app.js")pug파일에서 body 태그 하위에 script태그를 위와 같은 형태로 추가해준다.
doctype html
html(lang="ko")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Noom
body
h1 It works!
script(src="/public/js/app.js")
[ src/public/js/app.js ] 추가
alert("즐")
하지만 이렇게 하면 브라우저를 새로고침 해도 alert창이 실행되지 않는다.
이는 pug파일이 해당 정적파일경로에 접근하지 못하고있기 때문이다.
정적파일은 아래와 같이 expressJS에서 매핑해준다.
[ server.js ] 정적파일 공유 url 매핑 작업
app.use("/public", express.static(__dirname + "/public"))expressJS에 위 코드를 추가한다.
import express from "express"
const app = express();
/* pug설정 코드 생략 */
/* public url 생성 및 정적파일 공유 시작 */
app.use("/public", express.static(__dirname + "/public"))
/* public url 생성 및 정적파일 공유 끝 */
/* url mapping 및 view render 작업 코드 생략 */
const port = 3000;
const handleListen = () => console.log(`Listening on http://localhost:${port}`)
app.listen(port, handleListen)
app.use("/public", express.static(__dirname + "/public"))expressJS에 위 코드를 추가함으로써 3000번 포트로 열린 expressJS 서버에서 해당 경로를 탐색할 수 있게끔 열어준것이다.
따라서 view 엔진인 pug파일에서 해당 script파일을 읽어들여와 정상적으로 실행시켜주게 된다
'JavaScript > nodeJS & Ajax & Plugin' 카테고리의 다른 글
| node.js & Spring 서버 연동 / Put,Delete 통신 설정 / axios 호스트 주소 전역 등록 및 put 요청,응답 파라미터 (0) | 2022.12.04 |
|---|---|
| Ajax 정리 - 미완성 (0) | 2022.05.30 |
| node.js로 구현한 jqGrid 코드 (0) | 2022.01.11 |
| w2ui 플러그인을 활용한 그리드 그리기 -3 (추가, 수정, 삭제) (0) | 2022.01.10 |
| w2ui 플러그인을 활용한 그리드 그리기 -2 (메서드와 이벤트) (0) | 2022.01.10 |