Blog
//
Blog
About Me
//

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

Category
Author
citeFred
citeFred
PinOnMain
1 more property
VSCode DB 플러그인
Table of Content

1. 플러그인 설치

Marketplace에서 아래 키워드로 검색하여 각각 설치한다.
•
SQLTools
•
@tag:sqltools-driver

2. 설치 후 커넥션 추가

•
좌측 하단 원통형 DB 아이콘이 생성되고 Add New Connection으로 DB와 연결해야 한다.
•
드라이버 플러그인도 설치가 정상적으로 되었다면 아래와 같이 아이콘이 나타난다. MySQL 선택
•
데이터베이스 연결을 위한 정보를 입력해준다.
◦
Connection name은 이 연결 정보의 이름으로 크게 신경쓰지 않아도 됨, Local_DB 로 입력
◦
Database 는 nodejs_legacy 입력, (이 부분은 MySQL 접속 후 use database …로 DB를 선택하는 것)
◦
Username 은 MySQL 설치 시 사용자 계정 root (사용자 설정계정 사용시 계정이름 입력)
◦
Password mode에서 plaintext로 아래 Password 입력 1234 등 설치 시 지정한 패스워드 입력
◦
저장 전에 TEST CONNECTION으로 이상이 없는지 확인 후 SAVE CONNECTION
저장되면 좌측 탭에서 DB를 네비게이션으로 살펴 볼 수 있고, 중앙 빈 스크립트 창에서 쿼리문을 작성 할 수 있음, Run on active connection에서 쿼리를 실행하여 우측 결과도 확인 가능
Search

1. MVC 디자인 패턴

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

1. 플러그인 설치

Marketplace에서 아래 키워드로 검색하여 각각 설치한다.
•
SQLTools
•
@tag:sqltools-driver

2. 설치 후 커넥션 추가

•
좌측 하단 원통형 DB 아이콘이 생성되고 Add New Connection으로 DB와 연결해야 한다.
•
드라이버 플러그인도 설치가 정상적으로 되었다면 아래와 같이 아이콘이 나타난다. MySQL 선택
•
데이터베이스 연결을 위한 정보를 입력해준다.
◦
Connection name은 이 연결 정보의 이름으로 크게 신경쓰지 않아도 됨, Local_DB 로 입력
◦
Database 는 nodejs_legacy 입력, (이 부분은 MySQL 접속 후 use database …로 DB를 선택하는 것)
◦
Username 은 MySQL 설치 시 사용자 계정 root (사용자 설정계정 사용시 계정이름 입력)
◦
Password mode에서 plaintext로 아래 Password 입력 1234 등 설치 시 지정한 패스워드 입력
◦
저장 전에 TEST CONNECTION으로 이상이 없는지 확인 후 SAVE CONNECTION
저장되면 좌측 탭에서 DB를 네비게이션으로 살펴 볼 수 있고, 중앙 빈 스크립트 창에서 쿼리문을 작성 할 수 있음, Run on active connection에서 쿼리를 실행하여 우측 결과도 확인 가능
[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. 웹표준과 간단 레이아웃 구조화
Load more
　｜　Main Page　｜　Category　｜　 Tags　｜　About Me　｜　Contact　｜　Portfolio