citeFred’s Blog

/

/

citeFred’s Blog

/

/

Share

🏷️

Node.js

# of Posts

13

1 more property

Gallery

Search

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

1. MVC 디자인 패턴

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

1. 플러그인 설치

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

SQLTools

@tag:sqltools-driver

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

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

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

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

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

Ajax → Fetch API

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

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

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

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

[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 메서드를 사용하는 것이 관례적이다.

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

테이블 수정

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

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

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

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

조회 READ(select문) 기능

app.js의 조회 API 작성

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

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

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

데이터 요청의 body-parser 필요

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

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

또는 GUI로 Merge

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

express에서 정적 파일 경로 지정

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

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

express.static 사용하기

[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 등이 있음

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

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

Express 첫 시작

npm 공식 홈페이지를 통해 다양한 Node.js 패키지들을 검색할 수 있다. 이중 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 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정한다.

[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)이 등장했다.

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

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