출처 https://velog.io/@gidong_e/Node.js-Express

웹사이트의 동작원리

1. client(브라우저) (html, css, javascript / react, next)

에서 데이터를 서버쪽으로 전송((특정 요청도 함께)서버야 뭐 해줘!)
요청할때 어느정도 들을 규정 REST API
조회같은 요청 --> get 요청 이라고 하자
삭제같은 요청 --> delete 요청
추가같은 요청 --> post 요청
수정 요청 --> put 요청
요청에 대한 모양은 주소모양으로 하자
사용자 정보 조회는
    www.naver.com/user 로 get 요청
사용자 정보 수정
    www.naver.com/user put 요청 + April이라는 사용자를 나이 20으로
    www.naver.com/ get 요청

2. 서버는 client의 데이터와 요청의 정보를 받는다

app.get('/user', 함수);
app.put('/user', 함수);

"April" 데이터 받았고, 요청은 April의 신상정보 조회 요청이네
데이터베이스에서 April의 신상 정보 조회(SQL)
(SELECT age, salary, name FROM tbl_users WHERE name = 'April')
데이터베이스 속 데이터를 가져왔다
데이터베이스에서 받은 데이터를 client에게 다시 전송(응답)

3. client(브라우저)

서버로부터 받은 응답을 사용자에게 화면으로 보여주기
express.js 서버쪽에서 사용하는 프레임워크
프레임워크 : 공통적인 기능을 미리 구현해 놓은 일종의 반조리식품
서버에서 클라이언트쪽으로 데이터전송, 이미지파일, js파일, 보안기능, ...
서버로 활용하고 싶은 폴더를 생성하여
해당 폴더 안에서 npm init 을 실행하면 package.json(해당폴더에 대한 정보가 들어있는 파일)
이 자동으로 만들어 진다
entry point: (index.js) app.js (server.js 로 만드는 사람도 있음)

Express 설치

npm install express --save // 임시적으로 사용하려면 --save 빼도 된다

---

포트번호?

같은 컴퓨터 안에서 실행되고 있는 프로그램들을 구분하기 위한 번호

누구의 컴퓨터?

April의 컴퓨터
Kyle의 컴퓨터
컴퓨터를 구분하는 것은 ip주소 127.0.0.1

목표는 April의 컴퓨터

실행중인 프로그램이
LoL 3000
Zoom 3001
kakao talk 8080
... 3360

---

실행 명령어

node app

nodemon

express로 만든 프로그램이 실행중인 상태에서
코드를 수정하면 반영되지 않기 때문에 서버를 다시 껐다 켜줘야 한다
이때 nodemon을 사용하면 코드가 수정되면 알아서 서버를 껐다 켜준다

설치

npm install nodemon --save

전역설치(어떤 프로젝트 만들든 터미널에서 명령어 사용할수있도록)

npm install --global nodemon

실행

nodemon 파일이름

---

서버랑 DB 연결

npm install --save mysql2

mysql은 설치되면
따로 실행하지 않아도
프로그램이 실행됨 (컴퓨터켜지면)

react 3001 실행중
express가 3000번 실행중
mysql은 3306번 실행중

원리

1. 리액트가 요청(클라이언트)
   /user get 요청! 'April'
   (3000번에서 실행중인 express 한테)

2. express는
   'April'이라는 데이터를 받아서
   app.get('/user', 함수1);
   에 명시된 함수1을 실행함!
   함수1 내부적으로
   1. 3306번에 실행중인 mysql접속
   2. 'April' 데이터 SELECT
   3. 결과로 받아온 데이터 res.json 응답
   (다시 리액트에게 응답)

3. 리액트는 응답을 받아서 받아온 데이터를
   이쁘게 h1태그 쌓아서 보여줌

app.js

// 옛날 문법 commonjs 모듈
// 요즘 문법 es 모듈(express가 아직 es모듈로 작성했을때는 올바르게 동작하지 않는 경우가 있음)
// import styled from "@emotion/styled"
// import express from "express";
const express = require('express');
const mysql = require('mysql2');

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

// 앞에있는 req는 요청에대한 정보가 객체로 들어있다
// 뒤에있는 res는 응답에대한 정보가 객체로 들어있다
app.get('/', (req, res)=>{
    // 데이터베이스 가서 조회해줘
    // 데이터베이스에 가져온 데이터를 클라이언트로 보내야하네? 이때 사용하는 것이
    res.send('hello world')
    });

// /a 로 get 요청시 응답으로 age is 10 출력해줘
app.get('/a', (req, res)=>{
    let html = `
        <h1>메인페이지 입니다</h1>
        <p>안녕하세요</p>
    `;
    res.send(html); // 데이터 보내기 방법1
});

// JavaScript Object Notation(자바 스크립트 객체 표기법)
app.get('/b', (req, res)=>{
    res.json({age:10, name:'Jay'}); // 데이터 보내기 방법2
})
// 이미 실행 중인 포트였기때문에 실행 X
// Ctrl + c 눌러서 서버 끄고
// node app 다시 켜야한다

app.get('/c', (req, res)=>{
    console.log('삭제완료!'); // DELETE FROM USERS WHERE name='April';
    res.end(); // 데이터 보내기 방법3(보낼게 없을때)
});

// creating connection pool
const pool = mysql.createPool({
    host:'localhost', // '127.0.0.1' 로 써도 된다
    database:'board',
    user:'boarduser',
    password:'0000', // 안알랴줌~ㅎㅎㅎ
    port:3306
});


// mysql접속해서 사용자이름이 April인 사람의 데이터 조회
app.get('/d', (req, res)=>{

    pool.query('select * from tbl_a' , (err, results, fields)=>{
        console.log(err);
        console.log('res에는', results);
        console.log('fields에는',fields);
        res.json(results);
    });

});

app.listen(port, ()=>{console.log(`app listening on ${port}`)});
// listen 함수
// 1. 인자
//     두개 앞에는 숫자타입, 뒤에는 함수
// 2. 동작
//      해당 프로그램이 앞쪽에 전달받은 숫자 번 포트에서 동작하게 만드는 함수
//      뒤쪽에 인자로 전달한 콜백함수는 프로그램이 실행되었을 때 최초 한번 실행되는 함수이다
// 3. 결과값
//      생각X (실행중인 서버타입)