🐾 WEB의 동작 원리
1. client( 브라우저) (html,css,js/ react /next)
에서 데이터를 서버쪽으로 전송 (특정 요청도 함께) "서버야 뭐 해줘!"함.
요청할때 어느정도 틀을 규정
REST API
(post, get, put, delete, patch)
조회같은 요청👉 get 요청 이라고 하자
삭제같은 요청👉 delete 요청
추가같은 요청👉 post 요청
수정 요청👉 put 요청
요청에 대한 모양은 주소모양으로 하자
- 사용자 정보 조회는
👉 www.naver.com/user 로get 요청- 사용자 정보 수정
👉 www.naver.com/userput 요청+ suji이라는 사용자를 나이 10으로- 사이트페이지
👉 www.naver.com/get 요청
2. 서버는 client의 데이터와 요청의 정보를 받는다
app.get('/user', 함수);
app.put('/user', 함수);
"강수지" 데이터 받았고, 요청은 강수지의 신상정보 조회 요청이네,
데이터베이스에서 강수지의 신상 정보 조회(SQL)(SELECT age, salary, name FROM tbl_users WHERE name = '강수지')데이터베이스 속 데이터를 가져왔다
데이터베이스에서 받은 데이터를 client에게 다시 전송(응답)
3. client(브라우저)에게 응답을 보낸다
서버로부터 받은 응답을 사용자에게 화면으로 보여주기
📌 express.js 란 ❓
👉 서버쪽에서 사용하는
프레임워크
프레임워크란❓ : 공통적인 기능을 미리 구현해 놓은 일종의 반조리식품이라고 할수있다.📝 서버에서 클라이언트쪽으로 데이터전송, 이미지파일, js파일, 보안기능, ...
📍 서버로 활용하고 싶은 폴더를 생성하여
해당 폴더 안에서 🌟npm init을 실행하면package.json(해당폴더에 대한 정보가 들어있는 파일)이 자동으로 만들어 진다
entry point: (index.js) app.js (server.js 로 만드는 사람도 있음)
yes를하면 이제, package.json파일이 만들어짐 ❗️
- 추가나 설정변경 하고싶으면, 언제든지
package.json들어가서 변경,추가 가능.
📌 express 설치
https://expressjs.com/ko/starter/installing.html
$ npm install express --save
//Express를 임시로 설치하고 종속 항목 목록에 추가하지 않으려면, 다음과 같이 --save 옵션을 생략가능.package.json파일에서 main: app.js 이면 메인폴더 이름도 app.js (이름은 내 마음대로 가능)
app.js
//옛날 문법 commonjs 모듈
//요즘 문법 es 모듈 (성능차이), express가 아직 es모듈로 작성했을때는 올바르게 동작하지 않는 경우가 있음
//import express from 'express';
const express = require('express');
//require는 무슨타입? 함수
const app = express();
const mysql = require('mysql2');
const port = 3000;
// /는 경로를 의미
// 앞에있는 📝req 는 요청객체, res는 응답객체
// 뒤에있는 📝res 는 응답객체, send는 응답객체의 메소드
//🌟이름은 안중요, 순서는 중요❗️
app.get('/', (req, res) => {
//데이터베이스 가서 조회해줘
//데이터베이스에 가져온 데이터를 클라이언트에게 보내야하네? 이때 사용하는것이 🌟res 객체
res.send('Hello World!');
//res 객체 {
//응답상태:200,
//데이터:20,
//send:함수
//}
});
// /a로 get 요청시 응답으로 html 을 보내줌
app.get('/a', (req, res) => {
let html = `
<h1>main page</h1>
<p>hello</p>
`;
res.send(html);
});
app.get('/b', (req, res) => {
//10개 백개 여러가지를 보내려면?
res.json({
age: 10,
name: 'alice'
});
});
//1:21
app.get('/c', (req, res) => {
console.log('deleted'); //delete from users where name = 'alice';
res.end();
});
app.listen(port, () => {
console.log(`app listening at http://localhost:${port}`);
});
// listen 함수 실행
// 1.인자
// 두개 앞에는 숫자타입, 뒤에는 함수타입
// 2.동작
// 해당 프로그램이 앞쪽에 전달받은 숫자 번 포트에서 동작하게 만드는 함수. 뒤쪽에 인자로 전달한 함수는 프로그램이 실행되었을때 최초 한번 실행되는 함수
// 3. 결과값
// 생각 X (실행중인 서버타입)📝 포트번호?
같은 컴퓨터안에서 실행되고있는 서버(프로그램)들을 구분하기 위한 번호
📝 누구의 컴퓨터?
강수지의컴퓨터
김철수의컴퓨터
컴퓨터를 구분하는 것은 ip주소127.0.01
📝 목표는 강수지의 컴퓨터
실행중프로그램이
zoom 3000 kakao 3001 vscode 8080 chrome 3360 ...
🔎 앱실행 명령어 ❓
👉 node app파일이름이 app.js 이니까, 👉 node app 만약에 파일이름이 index.js면 👉 node index
🌟 nodemon
express 로 만든 프로그램이 실행중인 상태에서 코드를 수정하면 반명되지 않기 때문에 서버를 다시 껏다 켜야한다.
nodemon은 코드는 수정하면 자동으로 서버를 껏다 켜준다.
nodemon 설치하기 ❗️
전역설치(어떤 프로젝트 만들던 터미널에서 명령어 사용할수있도록)npm i --global nodemon
실행
nodemon (파일명)app
🔎 json ❓
JavaScript Object Notation
자바스크립트 객체 표기법
{
age: 20,
name: '강수지',
address: '서울시'
}🐾 서버랑 DB랑 연결하기
npm install --save mysql2설치후, 파일에 작성 👇
const mysql = require('mysql2');
📝 원리
1. 리액트가 요청(클라이언트)
/user get요청!'강수지'👉라는 데이터를 찾아줘
(3000번에서 실행중인express한테)
2.
express는
'강수지'이라는 데이터를 받아서
app.get('/user', 함수1);에 명시된 함수1을 실행함!
함수1 내부적으로 👇
📍1. 3306번에 실행중인mysql접속
📍2.'강수지'데이터SELECT
📍3. 결과로 받아온 데이터res.json응답
(다시 리액트에게 응답)
3. 리액트는
응답을 받아서받아온데이터를
이쁘게h1태그쌓아서 보여줌
공식문서로 확인 가능 ❗️
https://www.npmjs.com/package/mysql2
const mysql = require('mysql2');
const pool = mysql.createPool({
host: 'localhost',
database: 'board23',
user: 'board23user',
password: '1234',
port: 3306
});
//mysql 접속해서 사용자이름이 배상엽인 사람의 데이터 조회
app.get('/d', (req, res) => {
pool.query('select * from tbl_a', (err, results, fields) => {
console.log(err);
console.log(results);
console.log(fields);
res.json(results);//json으로 react로 보낸다
});
});이제 그다음 할일은 ❓
👉 리액트랑 익스프레스랑 연결하기 ❗️
to be continued... 🌟
