Node.js

# of Posts

1 more property

Gallery

https://folk.universitetetioslo.no/trygver/themes/mvc/mvc-index.html

1. MVC 디자인 패턴

2. MVC의 요소

[Node.js] 13. MVC 디자인 패턴과 리팩토링

1. 플러그인 설치

Marketplace에서 아래 키워드로 검색하여 각각 설치한다.

•

SQLTools

•

@tag:sqltools-driver

2. 설치 후 커넥션 추가

•

좌측 하단 원통형 DB 아이콘이 생성되고 Add New Connection으로 DB와 연결해야 한다.

•

드라이버 플러그인도 설치가 정상적으로 되었다면 아래와 같이 아이콘이 나타난다. MySQL 선택

[Node.js] 12. 데이터베이스 GUI VSCode 플러그인

Visual Studio Code에서 EJS 문법 인식 불가

문법의 기능은 정상 작동되는데 아래처럼 IDE가 인식하지 못하는 경우가 발생한다.

마켓플레이스에서 관련 플러그인을 설치해도 해당 문제는 해결되지 않는다.

HTML 설정 변경으로 해결

에디터 우측 하단의 HTML부분을 누르면 드롭다운 메뉴로 HTML 언어 설정에 대한 부분이 나타난다.

해당 부분을 선택하면 settings.json 파일이 열리며 설정값이 있는 상단 중괄호에 , 를 추가하여 구분해주고 아래 처럼 코드를 추가하면 해당 오류를 제거 할 수 있다.

[Node.js] 11. Visual Studio Code에서 EJS 문법 <% … %> 빨간줄 인식불가 해결

Ajax → Fetch API

이전 Ajax를 통해서 REST 아키텍처를 갖추었지만 jQuery AJAX는 요청을 보내고, 성공 및 오류에 대한 각각의 콜백 함수를 직접 구현하고 있었다. success 부분의 function, error 부분의 function 이를 통해 비동기 요청을 처리하는 기능은 구현되고 있는 것이다.

하지만 여러 콜백함수를 직접 작성, 사용해야 하므로 코드가 다소 복잡해질 수 있는 문제점이 있었다.

이러한 문제점을 개선 할 수 있었던건 Promise객체로 실패, 성공 상태를 가지는 객체로써 Fetch API 함수는 항상 이 객체를 반환하는 것으로 설계되었다.

따라서, fetch() 메서드를 통해서 메서드 체이닝(. 연결)을 통해 .then()과 .catch() 메서드를 사용 할 수 있어 구조적으로 가독성을 높이는 역할을 하게 되었다.

•

Ajax 요청의 일반적인 형태

•

Fetch API 요청의 일반적인 형태 

[Node.js] 10. 모던 자바스크립트 스타일Fetch API 요청 리팩토링

REST API

HTML 폼(form) 요소는 기본적으로 GET과 POST 메서드만 지원하고 있다. 프론트의 form action의 method 속성을 put으로 변경하고 백엔드 라우터 또한 app.put()으로 변경해도 작동하지 않는다.

현재 CRUD 기능에서 Create(POST), Read(GET), Update(POST), Delete(POST)으로 구성되어 있다.

하지만 하지만 우리는 RESTful API에서 각 기능별 적절한 HTTP Method를 선택해야하기 때문에 REST API를 지향하기 위해서는 요청 메소드 자체의 문제가 있다. 일반적으로 RESTful API 디자인에서는 업데이트는 PUT 메서드, 삭제는 DELETE 메서드를 사용하는 것이 관례적이다.

Ajax요청을 위한 jQuery 참조

HTML 폼에서는 PUT과 DELETE 메서드를 지원하지 않기 때문에 외부 라이브러리를 사용해야 한다. 우선 현재까지도 활용 되는 레거시 프로젝트 중에 AJAX 라이브러리가 있다. AJAX는 전통적인 HTML <form>에서 RESTful 아키텍처로 발전하는 데 중요한 전환점이 된 모듈 중 하나다.

•

하지만 아래와 같은 코드 처럼 아직까지 복잡해보이는 코드 구조를 가지고 있었다. 첫줄에서처럼 XMLHttpRequest 객체를 통해 처리했음

•

하지만 jQuery라는 라이브러리를 통해서 위 Ajax 요청을 더욱 쉽고 가독성 높게 아래 처럼 변경되었다. 보다 개발자 친화적으로 사용하기 편리하여 현재까지도 사용되기도 한다.

[Node.js] 9. REST API를 위한 리팩토링 jQuery+Ajax

테이블 수정

우선 현재 테이블의 구조는 다음과 같다.

여기에 status라는 글의 상태를 추가하여 ongoing(진행중), done(완료) 로 문의에 대한 답변 상태를 추가하고자 한다. 따라서 문의가 생성되면 기본값으로 ongoing상태를 가져야 하며 관리자가 글의 상태를 변경(업데이트) 할 수 있도록 한다.

테이블에 status라는 컬럼을 추가해야 한다. 테이블을 변경하는 것이기 때문에 alter table로 시작되며 status 컬럼을 추가(add)하게 된다. default로 ongoing 값을 가지도록 설정했다.

기본값 설정에 따라 기존 모든 데이터들도 기본값이 적용되어 ongoing 상태로 나타나는 것을 볼 수 있다.

Update API 작성

app.js Update API 작성

post요청을 통해 id를 PathVariable로 받아온다. update 쿼리를 통해서 해당 id의 row중 status 컬럼값을 done으로 수정한다.

[Node.js] 8. CRUD-Update 기능 추가

조회 READ(select문) 기능

app.js의 조회 API 작성

우선 READ기능인 select 쿼리문을 실행할 수 있는 로직이 담긴 ‘/contactList’ 엔드포인트의 GET요청 API를 작성한다.

쿼리 결과로 result를 반환하며 lists라는 변수에 담아서 contactList.ejs로 render되도록 작성한다. 아래는 조회 결과인 result에 담긴 데이터이다.

목록 뷰 페이지 contactList.ejs

등록된 문의사항을 볼 수 있는 페이지를 만들어보자.

API에서 lists에담긴 데이터들은 forEach를 통해 테이블을 통해서 데이터들을 순회하면서 1개의 데이터(row)마다 tr태그를 생성하도록 설정한다. ejs 템플릿의 반복문 및 대입 문법인 <% … %>에서 forEach와 =대입연산자를 활용해야 한다.

서버를 실행하여 contactList 엔드포인트의 API로 요청하면 다음과 같이 데이터베이스의 자료를 조회한 데이터를 목록으로 볼 수 있다.

[Node.js] 7. CRUD-Read, Delete 기능 추가

데이터 요청의 body-parser 필요

우선 프론트엔드에서 문의하기 부분의 다음 코드로 기본적인 데이터 요청을 테스트하고자 한다.

contact.ejs

Frontend 커밋 이후 → master 체크아웃 → 현재까지 변동사항 master로 병합 (git merge Frontend)

또는 GUI로 Merge

이후 Backend는 커밋이 뒤처져있으므로 Backend 체크아웃 → 변동사항 적용 (git rebase master)

app.js에서 위 form의 요청을 받고 응답을 보낼 라우터를 아래와 같이 작성하고 서버를 실행해둔다.

위 작성된 문의하기 폼을 통해서 각 필드값들 form을 통해 post 요청할 수 있다.

[Node.js] 6. Bodyparser사용 및 MySQL2, dotenv 미들웨어로 DB연결하기(CRUD-Create 기능)

express에서 정적 파일 경로 지정

웹 페이지에서 정적 파일들을 불러와서 나타내야 할 경우가 있다. 이런 경우 아래처럼 index.ejs에서 img src 태그를 사용하는데 express에서는 단순히 불러와지지 않는다.

Express에서는 정적 파일을 제공하기 위해 express.static 미들웨어를 사용해야 한다.

express.static 사용하기

express에 내장된 static이라는 미들웨어를 통해서 정적 파일의 경로를 지정 할 수 있다. 기본값으로 public이란 명칭의 폴더를 사용한다. 위 코드를 작성하여 정적 파일을 사용 할 수 있도록 설정한다.

샘플 이미지 파일을 root/public/ 폴더로 이동시키고 로드해본다.

index.ejs에 작성한 태그를 통해 정상적으로 정적 이미지가 나타나는것을 확인 할 수 있다.

[Node.js] 5. express에서 정적(static) 파일 경로 지정

HTML 표준 레이아웃

여러 홈페이지들의 외관을 살펴보면 비슷한 레이아웃을 보여준다. 이런 모습들이 웹 표준을 따르기 위함이라고 볼 수 있다.

이를 통해 사용자들에게 익숙한 경험을 제공하면서 접근성을 높일 수 있는 방법론에서 시작하기도 한다. 개발자가 UX/UI 관점의 개발을 고려해야 하는 이유이다. 또한 재활용성, 유지보수성은 표준화, 규칙 들에서 관리되기 쉽다.

웹 표준

브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다.

물론 프로젝트마다 회사마다 그 스타일의 차이가 있지만 공통적으로 웹 표준을 지키려고 노력하고 있는것으로 보여진다. 이를 통해 소스를 살펴보더라도 개발자 입장에서도 해당 부분들의 코드 파악이 용이하다.

웹 표준의 장점

•

수정 및 운영관리 용이

•

접근성 향상

[Node.js] 4. 웹표준과 간단 레이아웃 구조화

View Template Engine이란?

웹 페이지를 구성하는 주된 마크업 언어(Markup Language)는 HTML이며, 이는 정적인 언어. 따라서, Javascript의 반복문을 사용하여 간단하게 처리할 수 있는 동적 연산을 HTML로 표현하려면 직접 코드를 작성해야 하는 불편함이 있다.

•

템플릿 엔진(Temlplate Engine)은 위에서 언급한 불편한 상황을 해소시키기 위한 도구

•

템플릿 프로세서를 이용하여 웹 페이지를 동적으로 구현할 수 있는 시스템

•

Node.js의 대표적인 템플릿 엔진으로는 Pug(Jade), EJS, Handlebars 등이 있음

•

템플릿 엔진은 웹 템플릿들과 웹 컨텐츠 정보를 처리하기 위해 설계된 소프트웨어

•

템플릿 엔진은 view code(html)와 data logic code(db connection)을 분리해주는 기능을 한다.

•

필요성

Express와 뷰 템플릿 엔진

Express에서의 뷰 템플릿 엔진 시작 공식문서에서는 기본적으로 Pug라는 뷰엔진을 사용하는 실습 코드를 제공하고 있다. 하지만 Pug라는 뷰 엔진에 대해서 처음 들어보았기 때문에 정보가 필요하다.

Java를 배우면서도 JSP, Thymeleaf, Mustache 등 여러 뷰 템플릿 엔진이 있었고 특히 문법들에 차이가 있을 수 있어서 뷰 템플릿 엔진도 그 부분을 먼저 살펴볼 필요가 있었다.

Express와 함께 템플리트 엔진 사용

https://expressjs.com/ko/guide/using-template-engines.html

[Node.js] 3. 뷰 템플릿 엔진비교와 EJS 사용

Express 첫 시작

npm 공식 홈페이지를 통해 다양한 Node.js 패키지들을 검색할 수 있다. 이중 Express라는 웹 프레임워크 패키지를 설치했었다.

npm: express

Fast, unopinionated, minimalist web framework. Latest version: 4.18.2, last published: a year ago. Start using express in your project by running `npm i express`. There are 75468 other projects in the npm registry using express.

https://www.npmjs.com/package/express

라우트 함수의 구조

라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정한다.

기본적인 라우트 함수의 구조는 아래와 같이 작성할 수 있다.

•

app은 express의 인스턴스

•

METHOD는 HTTP 요청 메소드 종류

•

PATH는 서버에서의 URL 경로(엔드포인트)

•

HANDLER는 라우트가 일치할 때 실행되는 함수

공식 문서에서 확인할 수 있는 CRUD에 필수적인 요청 샘플은 다음과 같다. 하지만 우선 Express를 통해 서버를 실행 시키는 부분을 확인해야 하므로 아래 부터 진행 하면서 아래 예제를 다뤄보고자 한다.

[Node.js] 2. Express의 HTTP 라우팅 함수 기초

Node.js란?

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.
-Node.js는 공식 홈페이지-

Node.js는 비동기 이벤트 기반 JavaScript 런타임이다.
- MDN

•

JavaScript는 HTML을 동적(Dynamic)하게 바꿔주는 기능을 하게 하는 스크립트이다.

•

2008년에 구글이 V8 엔진을 사용하여 크롬을 출시했는데, V8 엔진은 엄청 빨랐고, 오픈 소스로 코드도 공개되었. 그 기능을 좀 더 더해서 V8 엔진 기반에 노드 프로젝트를 시작했고, Node.js(V8)이 등장했다.

•

웹 서버와 같이 확장성 있는 네트워크 프로그램 제작을 위해 고안되었다.

쉽게 말해 JavaScript 기반 런타임 환경으로 브라우저 내에서 말고도 다른 환경에서 자바스크립트를 사용할 수 있게 해주는 실행환경이다.

Node.js가 자바스크립트를 컴퓨터에서 쉽게 실행시켜줬기 때문에 자바스크립트를 프로그래밍 언어처럼 사용하기 시작했다.

Node.js를 서버로 만드는 이유?

Node.js의 핵심은 크게 3가지이다.

Non-blocking I/O

[Node.js] 1. 기본 환경구축 및 Express 프레임워크 설치