[7] node.js - CRUD 개발환경 구축하기 [+ mySQL]

백 개발자가 되기 위해서 CRUD는 가장 기본이라고 생각한다.

하지만 첫 발을 내 딛는 사람들은 시작부터 어려울 것이다. 그래서 한 페이지에 한번 정리를 해봐야겠다는 생각을 하였다.

 

1. node.js

: JavaScript 런타임 (실행할 수 있는 환경)을 말한다. 아래 링크를 참고하면 된다.

https://jh-healing-place.tistory.com/73

[1] node.js 란 무엇인가 (+ node.js 장단점 / 논블로킹 모델 / runtime?)

---

2. 서버 구축 준비

• 서버 : 클라이언트의 요청에 대한 응답을 해주는 장치 [literally server]
• localhost : 현재 컴퓨터의 내부 주소 -> 서버 개발 시 테스트 용으로 사용한다..
• port : 서버 내의 프로세스 번호 - 서버에서는 다양한 일을 멀티 프로세스로 수행하기 때문에, 포트 번호가 필요하다.

2-1. Dbeaver 사용

: 브라우저로 접근하면 서버의 일부분에만 접근할 수 있기 때문에 dbeaver를 설치해서 사용한다. (아래 링크 참조)

https://daslyee.tistory.com/112

DBeaver(디비버)에서 MySql 연결하기

 

2-2. API Client [ Thunder Client 설치 ]

: 개발단계에서 우리가 작성한 API의 요청을 확인하거나 테스팅 할 때 도움을 주는 툴이다. API Client를 사용함으로 개발 속도를 높이거나 치명적인 에러를 예방하는데 도움을 받을 수 있다.

 

[설치방법]

- vscode extension에서 thunder Client를 검색하면 제일 위에 나오는 아이콘을 눌러서 설치를 진행하면 된다.

설치가 완료되면 이런 번개모양 아이콘이 생기는데 이렇게 되면 설치완료!

( 사용법은 아래서 자세하게 설명 예정 )

 

2-3. vscode에 mySQL 플러그인 설치해주기

---

3. Express / mySQL ( with Sequlize )

3-1. npm (node package manager)

: node.js로 이미 만들어놓은 패키지를 사용하기 위해서, 패키지를 설치하고 관리하기 위한 Tool..!

( 패키지 중에는 서로 의존성을 가진 것도 있고.. 버전마다 기능이 다를 수 있기 때문에 package.json을 통해 버전 / 의존성을 고려하여 관리해주면 된다 )

 

3-2. 본격적인 환경 세팅 순서

#1 app.js

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(port, '포트가 열렸습니다~^^');
});

가장 먼저 app.js 파일을 만들어주고 터미널 창을 열어준다.

 

#2 npm init

 

#3 npm i express

 

#4 npm install express sequelize mysql2

 

#5 npm install -g sequelize -cli

 

후에 터미널 창에 node app.js 라고 치면 서버가 열릴 것이다. 브라우저 주소창에 localhost:3000을 입력하면 hello world를 확인 할 수 있다.

 

 

-- 본격적으로 mySQL 세팅 시작!

+ 키를 누르고 host, root, pw를 차례로 입력해주면 된다

#6 npx sequelize init

: 위의 과정을 모두 마친 후에 위 명령어를 입력하면 자동으로 파일을 생성해준다. ( mysql 파일 만들기 )

 

#7 migrations 생성 및 수정
npx sequelize model:generate --name User --attributes column:type,...

#8 DB 생성 및 Migrations에 정의된 테이블 MySQL에 생성
npx sequelize db:create
npx sequelize db:migrate

#9 model 폴더 내부 파일 세팅
users.js => 1:1(hasone.) , userInfos => 1:1(belongsTo) ... 1:N(hasmany) ...

 

#10 API 작성

 

---

4. Thunder Client로 웹 서버 응답 확인하기

1. 가장 먼저 Thunder Client 아이콘을 클릭 한 후 New Request 버튼을 눌러준다.

 

2. 위와 같은 화면이 나오면, 맨 위의 URI 입력하는 곳에 웹 서버 API의 HTTP Method인 GET으로 설정해 준 뒤, http://localhost:3000/ 를 입력하고 Send 버튼을 눌러준다.

 

3. 이전에 브라우저에서 보았던 "hello world"가 나오면 성공!

 

---

이렇게 하면 visual studio를 사용해서 작업할 준비가 끝난 것이다.

즐거운 코딩 생활 되세요😀