코드탐험 신비의 세계

Nunjucks를 프로젝트에 설치하려면, 다음 명령어로 패키지를 설치한다.npm i nunjucks  설치 후, index.js 파일에서 nunjucks를 임포트하고, 템플릿 엔진을 사용하기 위한 설정을 추가view engine을 설정하고, nunjucks.configure로 템플릿 파일 경로를 설정앞서 정적 파일을 저장했던 public 과 다르게 화면을 구성하는 html 파일들을 views 라는 폴더에 저장해줄 것이기 때문에 경로는 views이후에 watch, express 등의 설정을 추가한다.import express from 'express';import path from 'path';import nunjucks from 'nunjucks';const __dirname = path.resolve(..

웹 서버에서 각 페이지를 개별 HTML 파일로 전송하는 방식은 모든 페이지를 하나하나 별도의 파일로 만들어야 하는 번거로움이 있다.이러한 반복적인 작업을 피하기 위해 템플릿 엔진을 사용한다. 예를 들어 아래의 그림과 같이 main.html, write.html, detail.html 등 여러 파일이 있을 때이들의 공통된 부분을 하나의 템플릿 파일로 묶고, 각 페이지에 따라 바뀌는 내용만 다르게 표시할 수 있다. 이처럼 공통된 부분을 템플릿으로 묶고, 서버에서 전달하는 데이터를 적절하게 렌더링하여 화면에 표시할 수 있다.Node.js에서는 EJS, PUG, Nunjucks와 같은 다양한 템플릿 엔진들이 존재한다.

개발 중에는 코드가 변경될 때마다 서버를 중지하고 다시 시작하는 작업이 번거로울 수 있다.이러한 과정에서 효율성을 높여주는 패키지가 바로 Nodemon이다.Nodemon을 통해 코드 수정 후 자동으로 서버가 재시작되게 할 수 있어, 개발의 편의성을 높일 수 있다. 터미널에서 다음 명령어를 입력하여 Nodemon을 설치한다.npm install nodemon -D 여기서 -D 옵션은 Nodemon을 devDependencies에 추가하는 옵션이다. package.json 파일을 보면 Nodemon이 devDependencies에 추가된 것을 확인할 수 있다. 이는 Nodemon이 개발에만 필요한 모듈임을 나타낸다.반면, 서버가 작동하기 위해 꼭 필요한 모듈은 dependencies에 추가된다. 이렇게 분리..

Express 서버에서 클라이언트에게 HTML 파일을 전송하는 방법을 알아보자. 프로젝트 폴더 안에 public이라는 폴더를 만들고, 그 안에 main.html 파일을 작성한다. main.html 파일의 내용은 다음과 같다. Main page 이제 index.js에서 이 파일을 클라이언트로 전송하도록 설정해보자. 기존의 index.js 코드는 다음과 같다:import express from 'express';const app = express();// middleware// main page GETapp.get('/', (req, res) => { res.send('Main page GET request');});app.listen(3000, () => { console.log('Server i..

Express는 전 세계에서 가장 많이 사용되는 웹 프레임워크 중 하나이다.웹 프레임워크는 여러 기능을 미리 구현해놓은 도구로, 프레임워크의 동작 방식과 구조를 이해하면 빠르고 효율적인 개발이 가능하다. Express는 미들웨어(Middleware)의 연결을 중심으로 작동한다.미들웨어는 요청과 응답 사이에서 목적에 맞는 작업을 수행하는 함수로Express의 구조는 클라이언트 요청이 여러 미들웨어를 거쳐 응답으로 처리되는 방식이다. 먼저 설치해주자~!npm install express 이제 기존의 index.js 파일 이름을 _index.js로 변경하고, 프로젝트 디렉토리에 새 index.js 파일을 만들어 서버의 기본 틀을 구성해 보자.import express from 'express';const ap..

ESM이란?ESM(ECMAScript Modules)은 import와 export를 사용해 모듈을 다루는 방식으로, 최신 JavaScript 표준을 따른다.Node.js에서도 ESM을 통해 브라우저와 서버에서 일관된 코드 구조를 유지할 수 있다. 프로젝트 디렉토리를 만들고 터미널을 통해 폴더로 들어가준다.my_app 이라는 폴더를 만들었다.폴더로 들어가서npm init명령어를 입력해주고 프로젝트의 기본 정보를 설정하는 부분이 나온다.각 값을 꼭 채울 필요는 없고, 프로젝트 성격에 맞게 선택적으로 입력하면 된다.  package name: 패키지 이름. 프로젝트가 npm에 배포될 예정이라면, 고유한 이름을 사용해야 한다version: 프로젝트의 버전. 기본값 1.0.0을 그대로 사용하거나 업데이트 시마다 ..

Node.js를 이용해 웹 서버를 만드는 것은 생각보다 간단하다.Node.js의 CommonJS(CJS) 모듈 시스템을 활용해 코드 한두 줄로 웹 서버를 구현할 수 있다.CJS 방식을 사용해 간단한 HTTP 서버를 만드는 방법을 알아보자! 1. CommonJS(CJS)란?Node.js는 자바스크립트를 서버에서 실행할 수 있게 해주는 환경이고, 기본적으로 CommonJS(CJS)라는 모듈 시스템을 사용한다. CJS 방식에서는 require로 모듈을 가져오고 module.exports로 내보낸다. 이는 Node.js 초기부터 사용되어온 방식이라 많은 프로젝트에서 사용된다. 2. HTTP 모듈로 서버 만들기Node.js에는 HTTP 서버를 쉽게 만들 수 있는 http 모듈이 있다.이 모듈을 사용해 요청(req..

Node.js 는 개발 환경에서 프로젝트 자체의 확장을 쉽게 할 수 있는 특징이 있다. 이것이 가능한 이유는 Node.js 에서 제공하는 NPM (Node Package Manager) 라는 툴이 있기 때문npm은 Python 의 pip, Ruby 의 gem 과 같이 설치, 삭제, 관리를 통합적으로 도와줄 수 있는 도구이다. npm 을 사용하게 되면 다양한 내부, 외부 모듈을 사용할 수 있다.이 말은 필요한 기능들이 미리 구현되어 있는 경우가 많고 이 기능을 내가 가져다 쓰기가 편리하다는 것을 의미한다. Node.js 는 npm 외에도nvm, npx, yarn 등 다양한 툴이 사용 가능하다.  npm vs. nvm vs. npx vs. yarn 1. npm(Node Package Manager)Node...

Node.js에 구조에 따라서 생기는 특징에 대해서 알아보자 구조의 종류에는 1. Single Thread2. Non-blocking I/O 첫번째 Single Thread 의 의미는어떠한 작업을 처리하는 곳이 하나라는 것을 의미한다.자바스크립트에 대한 속성을 그대로 가져왔다고 이해해도 무리가 없다. 두번째는 Non-blocking I/O 이다.쉽게 얘기하면 어떤 작업들이 연달아 있을 때 작업이 실행되는 순서가 요청이 들어온 순서가 아닌먼저 끝나는, 짧은 작업들이 리턴이 되는 것을 의미한다.  이 두가지 특징을 보면작업하는 공간이 하나인데 먼저 끝나는 작업을 먼저 돌려줄 수 있는 것인가에 대한 의문이 생길 수 있다.의문을 해결하기 위해 Node.js의 구조를 조금 더 자세히 살펴보자 위 그림에 나와있듯 ..

Node.js 란 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 Chrome V8 엔진과 JavaScript 런타임 이라는 용어를 이해하지 못하면Node.js 에 대해 제대로 이해하기가 어렵기 때문에 먼저 이 2가지를 알아보자! 그 전에 웹 브라우저의 동작 과정에 대해 이해하는 것이 좋다 우리가 일반적으로 보게 되는 웹 화면은 HTML, CSS, JavaScript 이 세가지로 이루어져 있다이 세가지는 브라우저를 통해서 해석된 후 화면으로 출력되게 되는데 이 과정을 "렌더링" 이라고 표현한다. 그런데 HTML,CSS 와 JavaScript 는 브라우저에서 해석되는 방법의 차이가 있다. 먼저 HTML, CSS 는 브라우저 내에 있는 렌더링 엔진을 통해서 해석자바스크립트의 ..