1. Mariadb 설치 방법
Windows 10에 MariaDB 설치하기
개발용으로 Windows 10 PC에 MariaDB 를 설치해 봅니다. 1. http://mariadb.org/ 에 접속하여 다운로드 페이지로 들어갑니다. 2. 실제 다운로드 URL은 https://downloads.mariadb.org/ 입니다. 현재 안정 버전은..
offbyone.tistory.com
Maria DB 다운 주소
https://downloads.mariadb.org/
-------------------------------------------------------------------------------------------------------------
Server (Http) DBMS
B B B
기본적인 웹서버 http -> 브라우저가 먼저 요청해야 요청한 사람에게 답을 줌 (우리는 어제 이걸 express로 만듬)
오늘은 서버랑 서버 연결하는걸 배울 것이야 dbms관련 데이터를 어떻게 뽑아내서 어떻게 ?? 할지 배울것
DBMS (다른말로 서버 = DB서버 ) - 얘도 http(express서버) 가 요청을 해야 응답을 함.
1. client -> server
2. server -> dbms
3. dbms -> server
4. server -> client
gui ? command 둘 중 먼저 command를 보는게 나중에 공부할 때 좋다.
DBMS 란 ? DataBase Management System
여러가지 엑셀 파일을 담고 있는 것
DBMS란?
DBMS란?? 1. DBMS 란 - DataBase Management System의 약자로 데이터베이스 관리 시스템을 뜻...
blog.naver.com
엑셀
table라는게 존재
필드를 정할 수 있음
한 row 씩 데이터를 추가할수있음
아이디값만 저장한 곳 = 필드 (노란색)
한 데이터의 값 = 레코드 (검정)
이 파일이 데이터베이스
sheet1 = table
sheet2 밑에 만들면 = table2 만든거
table2는 게시판으로 만들기
이제 마리아 cmd(?) 검은창 꺼내기 CRI mode
maria db를 설치했다면 window에 maria 검색하면 MySQL Client 가 나옴 (cmd같이 생김)
Enter password:
파일 설치했을 떄 설정한 비번 쳐야함.
현재 접속 상태임
1. show databases; 입력 (databases! s 까지 )
안에 infor~ 요런건 다 엑셀 파일들
use ingoo; 입력
(database changed) = 인구라는 엑셀파일을 킨다. 라는 뜻
show tables; 입력
인구(파일)라는 데이터베이스 안에 테이블이 있다. (테이블 = sheet)
지금 실제 데이터베이스는 (cmd창) 1번밖에 없는 거 (in sheet 1)
select * from user 입력
user = table 명
질문 : * 전체의미면 왜 다 안나왔을까?? 엑셀파일과 dbsm가 연결 안된 상태인듯? -> 맞
레코드 한개 나옴.
Select문
select * from user
select from 이 한 문구
select *(필드) from 난 *이라는 필드를 찾는다.
ex) css *{margin:0; padding:0;} 처럼
* = 모든 필드 (아이디, 이름, 패스워드)
select * from = 모든 필드를 보여줘 라
띄어쓰기 + 테이블 명
응용 select userid from user; 입력
select name from user; 입력
레코드 추가
sample 길동이 1234를 나의 데이터베이스에 추가해보기
insert into [테이블명] (필드1,필드2..) values(값1,값2...);
insert into user (user id,name,password) values('test',' test', 1234); 입력
select * from user; 입력 (결과물 확인)
엑셀로 치자면 다음 내용을 다음row에 쭉 치는거
방금 넣은 그 row 지우기
delete from [테이블명] where [필드] ='값';
delete from user where name='test'; 입력
select * from user; 입력 -> 다시 출력물 확인 하기
===========================배고픈 2교시===========================
실제같이 ingoo 데이터베이스와 user라는 테이블을 만드는 과정
데이터베이스 삭제 (폴더라고 보면 파일이 삭제되는거)
drop database ingoo; 입력 show databases; 로 확인
데이터베이스(파일) 생성
create database ingoo; (s 없다 )
인구라는 데이터베이스 실행 (열기) 파일 만들기
use ingoo 입력
show tables; 입력(아직 테이블도 아무것도 없음)
테이블부터 만들기
입력 :
create table user(
-> userid varchar(50),
-> userpw varchar(50),
-> username varchar(50)
-> );
여기서 user라는 table을 만들거다. 라고 말하는거? ㅇㅇ웅 여기서 table 이름을 내가 정해주면 됨
엑셀에 숫자, 글자 다 넣을 수 있지만 데이터베이스는 문자 or 숫자 or 최대길이 등을 다 정해줘야함
varchar - 글자를 50만큼 넣을 수 있다. (특정 바이트) 글자의 사이즈
show tables; 테이블 잘 만들어 졌는지 로 확인
user라는 table에 어떤 필드값이 있는가 알아보는 명령어
필드 = 컬럼
필드값을 한 줄로 보기
desc user; 입력
필드가 3개가 있다.
지금 테이블은 존재하지만 레코드는 존재하지 않음
select문을 사용해 레코드 존재 확인
select * from user; 입력
insert into user(userid, userpw, username) values('comon', '1234', '피카츄');
테이블 만들 때 String으로 만들것이야 라고 했기때문에 숫자 1234는 안될것.. 혼자 할 때 연습해보자
select * from user; 입력해서 내용 추가된거 확인
--------- 실 습 ★ ---------
insert into user (userid, userpw, username) values ('hello', '1234', '말포이');
select * from user; 반복
여기서 user( or values( 이렇게 띄어쓰기를 안해서 에러가 뜸
delete 해보기
delete from [테이블명] where [필드] ='값';
where 잘 못 쓰면 다 지워짐
where userid = 'test'
필터를 거는거임. (userid 값이 test인것만)
delete from user where username = '말포이';
delete from user where username = "피카츄";
'' = "" 같구나 * where userpw = "1234"; 하면 다 지워짐
select * from user;
뭔가 재밌다..근데 아직 데이터베이스가 뭔지 잘 모르겟다
데이터베이스
데이터베이스란 일반적으로 컴퓨터 시스템에 전자 방식으로 저장된 구조화된 정보 또는 데이터의 체계적인 집합을 의미합니다. 데이터베이스는 보통 데이터베이스 관리 시스템(DBMS)에 의해 제어됩니다. 데이터와 DBMS는 연관된 어플리케이션들과 함께 '데이터베이스 시스템'으로 일컬어지며, 더 짧게는 '데이터베이스'라고 통칭되기도 합니다.
오늘날 운용되는 가장 공통적인 유형의 데이터베이스 내 데이터는 일반적으로 일련의 표 안에 행과 열로 모델링되며, 이는 프로세싱과 데이터 쿼리 작업을 더 효율적으로 실행하기 위함입니다. 이로써 데이터는 쉽게 액세스, 관리, 수정, 업데이트, 제어, 체계화될 수 있습니다. 대부분의 데이터베이스는 데이터 작성 및 쿼리 작업에 구조화 질의 언어(SQL)를 사용합니다.
참고 : 여기 읽어보기 !!!
www.oracle.com/kr/database/what-is-database/
=============================3교시=============================
pk 로 123456 numbering 하는 듯? ?
특정 필드값으로 오름차순, 내림차순 으로 만들기
select * from user order by userid asc; (from a to z )
select * from user order by userid desc; (z to a )
update set 한 필드를 선택해서 그 내용만 바꾸기 (레코드값 수정)
update user set username='피카츄' where username='라이츄';
라이츄라는 username 이 있는 곳의 username을 피카츄로 바꾸겠다.
위의 내용 정리 & mariaDB 정리
[28일차 복습] mariaDB 다운로드 및 설치 / Mariadb 명령어 정리 / nunjucks .env (보안위해) mysql (DB 내용
mariaDB 다운로드 및 설치 Mariadb 설치 방법 offbyone.tistory.com/199 Windows 10에 MariaDB 설치하기 개발용으로 Windows 10 PC에 MariaDB 를 설치해 봅니다. 1. http://mariadb.org/ 에 접속하여 다운로드 페..
blckchainetc.tistory.com
============================데이터베이스 시스템 기초 끗 ==========================
이제 node.js에서 데이터베이스로 가져오기
npm install express
npm install nunjucks
npm install chokidar
다 다운 받아진 상태 준비
1. js 입력 및 저장 (저장 또 까먹음)
const express = require('express');
const app = express();
app.get('/', (req,res)=>{
res.send('Good day');
});
app.listen(3000,()=>{
console.log('server start port : 3000');
});터미널에 node server.js 입력 (서버 키기)
브라우저에 localhost:3000 입력
2. nunjucks 연결
1. js 수정 및 추가
const express = require('express');
const nunjucks = require('nunjucks');
const app = express();
nunjucks.configure('views', { //views폴더 안에 들어가서
express:app,
autoescape:true,
});
app.set('view engine', 'html'); //view engine을 html로 바꿔주기
app.get('/',(req,res)=>{
res.render('index.html',{
name:'ingoo',
});
});
app.listen(3000,()=>{
console.log('server start port : 3000')
});
2. html 만들기 (views 라는 폴더 생성 + index.html 파일 만들어 아래 내용 입력 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
It's lunch time soon {{title}}
</body>
</html>
저장 후 node server.js 입력 -> 브라우저 확인
db정보를 안에 넣어야 하는데 보안에 대한 취약점때문에 다른파일에 저장해서 불러오는 방식 취함.
package를 다운받아 설정해야함 그게 바로
3. npm install dotenv
Dotenv is a zero-dependency module that loads environment variables from a `.env` file into [`process.env`]
다운 받았으니 package.json 과 파일 안 확인 (2가지 항상 쳌)
env 에 대한 내용
As early as possible in your application, require and configure dotenv.
```javascript
require('dotenv').config()
```
Create a `.env` file in the root directory of your project. Add
environment-specific variables on new lines in the form of `NAME=VALUE`.
For example:
```dosini
DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
```
4. .env 파일 만들어서 내용 추가
함수라 대문자로 쓰면 좋다고 함
5. JS 수정
require('dotenv').config();
const express = require('express');
const nunjucks = require('nunjucks');
const app = express();
const port = process.env.SERVER_PORT;
console.log(port);
nunjucks.configure('views', { //views폴더 안에 들어가서
express:app,
autoescape:true,
});
app.set('view engine', 'html'); //view engine을 html로 바꿔주기
app.get('/',(req,res)=>{
res.render('index.html',{
name:'ingoo',
});
});
app.listen(3000,()=>{
console.log('server start port : 3000')
});
서버 키면
우리가 접속할 내용?서버들을env에 넣을거야 나중에
6. js port 재 수정
require('dotenv').config();
const express = require('express');
const nunjucks = require('nunjucks');
const app = express();
const port = process.env.SERVER_PORT;
nunjucks.configure('views', { //views폴더 안에 들어가서
express:app,
autoescape:true,
});
app.set('view engine', 'html'); //view engine을 html로 바꿔주기
app.get('/',(req,res)=>{
res.render('index.html',{
name:'ingoo',
});
});
app.listen(port,()=>{
console.log(`server start port : ${port}`)
});
다시 서버 켜서 console.log 보면 3000 나옴.
mysql 연결 작업 시작
mariadb 내용 다운 받아야함
maridb도 mysql도 됨.
역사에 대해..
mysql원래 무료 -> 오라클 이 인수하면서 유료 -> mariadb 를 개발자(mysql을 만든 )가 나와서 비슷하게 거의 만듬
7. npm install mysql 설치
8. JS mysql 추가 입력
require('dotenv').config();
const express = require('express');
const nunjucks = require('nunjucks');
const mysql = require('mysql'); //입력1
const app = express();
const port = process.env.SERVER_PORT;
nunjucks.configure('views', {
express:app,
autoescape:true,
});
let connection = mysql.createConnection({
host:'localhost', //서버 주소
user:'root',//user id 넣음
password:'1234',
database:'ingoo',
}); //()함수형태를 쓰고 {} 객체형태로 바꾸기 //입력 2
// mysql = 서버야 -> 실행되는 상태라면 host(너의 서버 주소가 뭐야? 물어보는거)
//localhost - 127.0.0.1
//user password 입력햇던 란 위에 root, 루트 라는 슈퍼관리자이름 있었음.
//너의 데이터베이스가 뭐야 라고 물어보기 만들었던 엑셀 파일 'ingoo'
//접속할 정보를 connection이라는 변수에 담을게 나한테 줘~
// 아직 실질적으로 넘겨진건아님. 데이터 부분만 받은 상태임
// 이걸 connection 변수 안에 넣은 상태
connection.connect();
//connection 안의 connect라는 method를 호출할거야
//여기까지 치면 database를 연결 한다. 라는 뜻
app.set('view engine', 'html');
app.get('/',(req,res)=>{
res.render('index.html',{
name:'ingoo',
});
});
app.listen(port,()=>{
console.log(`server start port : ${port}`)
});
turn on the server and check
-----------------------------------실질적으로 데이터 쓰기 공부 시작 ---------------------------------------
9. ingoo 데이터를 실질적으로 쓰기 위한 js 수정
require('dotenv').config();
const express = require('express');
const nunjucks = require('nunjucks');
const mysql = require('mysql'); //입력1
const app = express();
const port = process.env.SERVER_PORT;
nunjucks.configure('views', {
express:app,
autoescape:true,
});
let connection = mysql.createConnection({
host:'localhost', //서버 주소
user:'root',//user id 넣음
password:'1234',
database:'ingoo',
}); //()함수형태를 쓰고 {} 객체형태로 바꾸기 //입력 2
// mysql = 서버야 -> 실행되는 상태라면 host(너의 서버 주소가 뭐야? 물어보는거)
//localhost - 127.0.0.1
//user password 입력햇던 란 위에 root, 루트 라는 슈퍼관리자이름 있었음.
//너의 데이터베이스가 뭐야 라고 물어보기 만들었던 엑셀 파일 'ingoo'
//접속할 정보를 connection이라는 변수에 담을게 나한테 줘~
// 아직 실질적으로 넘겨진건아님. 데이터 부분만 받은 상태임
// 이걸 connection 변수 안에 넣은 상태
connection.connect();
//connection 안의 connect라는 method를 호출할거야
//여기까지 치면 database를 연결 한다. 라는 뜻
app.set('view engine', 'html');
app.get('/',(req,res)=>{
// query문 = slect, update, delet, insert문 사용 가능
connection.query("select * from user"),(error, results)=>{
if(error){//error뜨면 이 코드를 실행해라
console.log(error);
}else{ // error 안나면 아래 코드를 실행해라.
console.log(results);
}
};
//두번째 인자값인 익명함수에 반환 ()=>{}요기
//익명함수 안 인자값 2개 쓰게
//error 나면 error 안에 데이터 쌓이고 그게 아니면 results안에 데이터 쌓이게
res.render('index.html',{
name:'ingoo',
});
});
app.listen(port,()=>{
console.log(`server start port : ${port}`)
});
js 수정
require('dotenv').config();
const express = require('express');
const nunjucks = require('nunjucks');
const mysql = require('mysql'); //입력1
const app = express();
const port = process.env.SERVER_PORT;
nunjucks.configure('views', {
express:app,
autoescape:true,
});
let connection = mysql.createConnection({
host:'localhost', //서버 주소
user:'root',//user id 넣음
password:'1234',
database:'ingoo',
}); //()함수형태를 쓰고 {} 객체형태로 바꾸기 //입력 2
// mysql = 서버야 -> 실행되는 상태라면 host(너의 서버 주소가 뭐야? 물어보는거)
//localhost - 127.0.0.1
//user password 입력햇던 란 위에 root, 루트 라는 슈퍼관리자이름 있었음.
//너의 데이터베이스가 뭐야 라고 물어보기 만들었던 엑셀 파일 'ingoo'
//접속할 정보를 connection이라는 변수에 담을게 나한테 줘~
// 아직 실질적으로 넘겨진건아님. 데이터 부분만 받은 상태임
// 이걸 connection 변수 안에 넣은 상태
connection.connect();
//connection 안의 connect라는 method를 호출할거야
//여기까지 치면 database를 연결 한다. 라는 뜻
app.set('view engine', 'html');
app.get('/',(req,res)=>{
// query문 = slect, update, delet, insert문 사용 가능
connection.query("select * from user",(error, results)=>{
if(error){//error뜨면 이 코드를 실행해라
console.log(error);
}else{ // error 안나면 아래 코드를 실행해라.
console.log(results);
results.forEach(ele=>{
console.log(ele.userid,ele.userpw,ele.username);
});
} //결과값 : 배열 형태 (안의 값들은 객체로 되어있음)
//[{userid:'피카츄'},{...},{}]
});
//두번째 인자값인 익명함수에 반환 ()=>{}요기
//익명함수 안 인자값 2개 쓰게
//error 나면 error 안에 데이터 쌓이고 그게 아니면 results안에 데이터 쌓이게
res.render('index.html',{
name:'ingoo',
});
});
app.listen(port,()=>{
console.log(`server start port : ${port}`)
});
reopen browser and check terminal
점심 이후 nunjucks 넘겨보는 것 까지 한대
==============================점심 한강에서 샌드위치==============================
진짜 덥다.............................
목표 : 회원가입 만들기 였는데 줄여짐. -> html post로 값을 보내서 이것을 server에서 받아서 db에 넣기 (insert)
post
html 수정 (form 추가)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
It's lunch time soon {{title}}
<!--
form 태그 만들어서
내용 입력 후 , 아래 유알엘에 접속하면
url을 localhost:3000/join
post로 userid, userpw, username을 서버에 넘겨주기까지만
console.log찍어보기
-->
<form method="post" id ="" action="./join">
이름:<input type="text" name="userid" placeholder="아이디"> <br />
아이디:<input type="text" name="userpw" placeholder="패스워드"> <br />
패스워드 : <input type="text" name="username" placeholder="이름"> <br />
<input type="submit" value="회원가입">
</form>
</body>
</html>action : 어디로 보낼꺼야
method : 어떻게 보낼꺼야 - post로 보낼거야
name = "userid" -> name 은 무적권 name으로 써야 해
js수정 (post 추가)
require('dotenv').config();
const express = require('express');
const nunjucks = require('nunjucks');
const mysql = require('mysql'); //입력1
const bodyParser = require('body-parser');
const app = express();
const port = process.env.SERVER_PORT || 3000;
app.use(bodyParser.urlencoded({extended:false}));
nunjucks.configure('views', {
express:app,
autoescape:true,
});
let connection = mysql.createConnection({
host:'localhost', //서버 주소
user:'root',//user id 넣음
password:'1234',
database:'ingoo',
}); //()함수형태를 쓰고 {} 객체형태로 바꾸기 //입력 2
// mysql = 서버야 -> 실행되는 상태라면 host(너의 서버 주소가 뭐야? 물어보는거)
//localhost - 127.0.0.1
//user password 입력햇던 란 위에 root, 루트 라는 슈퍼관리자이름 있었음.
//너의 데이터베이스가 뭐야 라고 물어보기 만들었던 엑셀 파일 'ingoo'
//접속할 정보를 connection이라는 변수에 담을게 나한테 줘~
// 아직 실질적으로 넘겨진건아님. 데이터 부분만 받은 상태임
// 이걸 connection 변수 안에 넣은 상태
connection.connect();
//connection 안의 connect라는 method를 호출할거야
//여기까지 치면 database를 연결 한다. 라는 뜻
app.set('view engine', 'html'); //여기서의 html 은 view engine의 확장자를 정해줌. 되는ㄷ게 html 이랑 nunjucks의 확장자 뭐가 잇대
app.get('/',(req,res)=>{
// query문 = slect, update, delet, insert문 사용 가능
console.log(req.query.username);
console.log(req.query.userid);
console.log(req.query.userpw);
connection.query("select * from user",(error, results)=>{
if(error){//error뜨면 이 코드를 실행해라
console.log(error);
}else{ // error 안나면 아래 코드를 실행해라.
console.log(results);
results.forEach(ele=>{
console.log(ele.userid,ele.userpw,ele.username);
});
} //결과값 : 배열 형태 (안의 값들은 객체로 되어있음)
//[{userid:'피카츄'},{...},{}]
});
//두번째 인자값인 익명함수에 반환 ()=>{}요기
//익명함수 안 인자값 2개 쓰게
//error 나면 error 안에 데이터 쌓이고 그게 아니면 results안에 데이터 쌓이게
res.render('index.html',{ //String형태로 send
name:'ingoo',
});
});
app.listen(port,()=>{
console.log(`server start port : ${port}`)
});
app.post('/join',(req,res)=>{
console.log(req.body);
res.send('post로 오셧군요!');
}); //body를 사용하려면
서버 키고 브라우저에 아이디, 비번, 이름을 적고 버튼을 누르면 app.post('/join',(req,res)=>{res.send('post로 오셨군요!');} 가 나옴
req.body는 body-parser를 사용하기 전에는 디폴트 값으로 Undefined이 설정되기 때문
404 - 내용이 없다. 라는 뜻
서버에서 받는거 하는게
1. body-parser 다운
2. js 에 3개 추가
* const bodyParser= require('body-parser);
* app.use(bodyParser.urlencoded({extended:false})); 추가
* app.post('/join',(req,res)=>{
console.log(req.body);
res.send('post로 오셧군요!');
}); //body를 사용하려면
데이터베이스에 데이터를 넣자
1. req.body에 있는 내용들을 하나씩 가져와보기
2. query문을 작성해보기 (sql 문 작성 insert into user... 요런거~)
html 그대로
js 추가
require('dotenv').config();
const express = require('express');
const nunjucks = require('nunjucks');
const mysql = require('mysql'); //입력1
const bodyParser = require('body-parser');
const app = express();
const port = process.env.SERVER_PORT || 3000;
app.use(bodyParser.urlencoded({extended:false}));
nunjucks.configure('views', {
express:app,
autoescape:true,
});
let connection = mysql.createConnection({
host:'localhost', //서버 주소
user:'root',//user id 넣음
password:'1234',
database:'ingoo',
}); //()함수형태를 쓰고 {} 객체형태로 바꾸기 //입력 2
// mysql = 서버야 -> 실행되는 상태라면 host(너의 서버 주소가 뭐야? 물어보는거)
//localhost - 127.0.0.1
//user password 입력햇던 란 위에 root, 루트 라는 슈퍼관리자이름 있었음.
//너의 데이터베이스가 뭐야 라고 물어보기 만들었던 엑셀 파일 'ingoo'
//접속할 정보를 connection이라는 변수에 담을게 나한테 줘~
// 아직 실질적으로 넘겨진건아님. 데이터 부분만 받은 상태임
// 이걸 connection 변수 안에 넣은 상태
connection.connect();
//connection 안의 connect라는 method를 호출할거야
//여기까지 치면 database를 연결 한다. 라는 뜻
app.set('view engine', 'html'); //여기서의 html 은 view engine의 확장자를 정해줌. 되는ㄷ게 html 이랑 nunjucks의 확장자 뭐가 잇대
app.get('/',(req,res)=>{ //localhost:3000일 때 아래 내용을 수행해라
// query문 = slect, update, delet, insert문 사용 가능
connection.query("select * from user",(error, results)=>{
if(error){//error뜨면 이 코드를 실행해라
console.log(error);
}else{ // error 안나면 아래 코드를 실행해라.
console.log(results);
results.forEach(ele=>{
console.log(ele.userid,ele.userpw,ele.username);
});
} //결과값 : 배열 형태 (안의 값들은 객체로 되어있음)
//[{userid:'피카츄'},{...},{}]
});
//두번째 인자값인 익명함수에 반환 ()=>{}요기
//익명함수 안 인자값 2개 쓰게
//error 나면 error 안에 데이터 쌓이고 그게 아니면 results안에 데이터 쌓이게
res.render('index.html',{ //String형태로 send
name:'ingoo',
});
});
app.listen(port,()=>{
console.log(`server start port : ${port}`)
});
app.post('/join',(req,res)=>{
console.log(req.body);
//res.send('post로 오셧군요!');
let id = req.body.userid;
let pw = req.body.userpw;
let name = req.body.username;
let sql = `insert into user (userid, userpw, username) values ('${id}','${pw}','${name}')`;//query문 작성
console.log(sql);
}); //body를 사용하려면
new 목표:
1. 실제로 query 실행시키기
-> connection.query 였음 in js
sql구문을 실행시키기, arrow 함수 익명 쓰기
인자값 error, results
app.post('/join',(req,res)=>{
console.log(req.body);
//res.send('post로 오셧군요!');
let id = req.body.userid;
let pw = req.body.userpw;
let name = req.body.username;
let sql = `insert into user (userid, userpw, username) values ('${id}','${pw}','${name}')`;//query문 작성
console.log(sql);
connection.query(sql,(error, results)=>{
if(error){
console.log(error);
}else{
console.log(results);
}
});
}); //body를 사용하려면
-> 브라우저에서 아이디, 비번, 네임을 넣으면 cmd (?) 창에 select * from user; 를 쓰면 검은 창에 추가가 되어 있어야함.
앗 그런데 위치가 ....
<form method="post" id ="" action="./join">
ID:<input type="text" name="userid" placeholder="아이디"> <br />
Password:<input type="text" name="userpw" placeholder="패스워드"> <br />
Your name: <input type="text" name="username" placeholder="이름"> <br />
<input type="submit" value="회원가입">
</form>id, password, your name으로 바꿈 (이걸 어제껄로 적어서 달랐다. )
다시 localhost:3000 하고 입력 후 cmd check
delete from user where username="1234"; 으로 1234 username가진 emilyyyy 2개를 한번에 지움
2. join.html을 실행시켜보자. 그 안에 id, pw, name을 보내서 실행시켜보쟈
join.html을 새로 만들어서 새로운join.html으로 '회원가입'버튼을 눌렀을 때 이동되게 .
파일 새로 만들 때 views 폴더 안에서 만들어야함 밖에서 만드니 안되었음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>welcome onboard! </h2>
{{name}}님 환영합니다. <br />
{{name}}님의 아이디는 : {{id}} <br />
{{name}}님의 패스워드는 : {{pw}}입니다. <br />
무 ~ ㅇ ㅑ ~ 호 ~ <br /><br />
<br />
<a href="/">메인으로 돌아가기</a>
</body>
js 수정 & 추가
require('dotenv').config();
const express = require('express');
const nunjucks = require('nunjucks');
const mysql = require('mysql'); //입력1
const bodyParser = require('body-parser');
const app = express();
const port = process.env.SERVER_PORT || 3000;
app.use(bodyParser.urlencoded({extended:false}));
nunjucks.configure('views', {
express:app,
autoescape:true,
});
let connection = mysql.createConnection({
host:'localhost', //서버 주소
user:'root',//user id 넣음
password:'1234',
database:'ingoo',
}); //()함수형태를 쓰고 {} 객체형태로 바꾸기 //입력 2
// mysql = 서버야 -> 실행되는 상태라면 host(너의 서버 주소가 뭐야? 물어보는거)
//localhost - 127.0.0.1
//user password 입력햇던 란 위에 root, 루트 라는 슈퍼관리자이름 있었음.
//너의 데이터베이스가 뭐야 라고 물어보기 만들었던 엑셀 파일 'ingoo'
//접속할 정보를 connection이라는 변수에 담을게 나한테 줘~
// 아직 실질적으로 넘겨진건아님. 데이터 부분만 받은 상태임
// 이걸 connection 변수 안에 넣은 상태
connection.connect();
//connection 안의 connect라는 method를 호출할거야
//여기까지 치면 database를 연결 한다. 라는 뜻
app.set('view engine', 'html'); //여기서의 html 은 view engine의 확장자를 정해줌. 되는ㄷ게 html 이랑 nunjucks의 확장자 뭐가 잇대
app.get('/',(req,res)=>{ //localhost:3000일 때 아래 내용을 수행해라
// query문 = slect, update, delet, insert문 사용 가능
connection.query("select * from user",(error, results)=>{
if(error){//error뜨면 이 코드를 실행해라
console.log(error);
}else{ // error 안나면 아래 코드를 실행해라.
console.log(results);
results.forEach(ele=>{
console.log(ele.userid,ele.userpw,ele.username);
});
} //결과값 : 배열 형태 (안의 값들은 객체로 되어있음)
//[{userid:'피카츄'},{...},{}]
});
//두번째 인자값인 익명함수에 반환 ()=>{}요기
//익명함수 안 인자값 2개 쓰게
//error 나면 error 안에 데이터 쌓이고 그게 아니면 results안에 데이터 쌓이게
res.render('index.html',{ //String형태로 send
name:'ingoo',
});
});
app.listen(port,()=>{
console.log(`server start port : ${port}`)
});
app.post('/join',(req,res)=>{
console.log(req.body);
//res.send('post로 오셧군요!');
let id = req.body.userid;
let pw = req.body.userpw;
let name = req.body.username;
let sql = `insert into user (userid, userpw, username) values ('${id}','${pw}','${name}')`;//query문 작성
console.log(sql);
connection.query(sql,(error, results)=>{
if(error){
console.log(error);
}else{
console.log(results);
res.render('join.html',{//응답에 대해 보내주기
id:id,
pw:pw,
name:name,
})
}
});
}); //body를 사용하려면
id, pw, name 다 누르고 회원가입하면 join.html 이 나옴
s DB
b b b b
브라우저(b)가 먼저 server에게 요청을 보냄
localhost:3000라고 하자
server는 -> html page를 render to browser
b라는 애가 또 상호작용 index 페이지보고 submit -> post로 받음 query문 작성 -> db 연결 및 보내기 (by insert into..) -> db는 그 구문을 실행, 자신만의 data를 쌓아 return to server (결과치) 에러가 났는지 안났는지. 에러 없으니 server -> join.html 만들어서 b 에게 줌. -> 사용자가 a 버튼 누르면 -> 또 s에게 요청 -> s는 또 render sth to client
sth은 뭘까
중요한 것 변수의 이동 **
post로 값을 넘겼을 때 어떤 변수를 썼고
server는 어떻게 받고, query문에서는 어떤거 썻는지 등등 같은 값을 browser, server, db 등 변수가 계속 바뀌니깐 이 점을 잘 분석해서 공부하자.
-----------------------------------------------------------------------------------------------------------------------------------
최종 js
require('dotenv').config(); // db정보를 다른 파일에 저장해 불러오는 package
const express = require('express'); // express 라이브러리 가져와~
const nunjucks = require('nunjucks'); //nunjucks 라이브러리 가져와 ~
const mysql = require('mysql'); //입력1 //mysql 라이브러리 가져와 (mysql - mariadb 내용 다운 받아야함. )
const bodyParser = require('body-parser'); // html -> server가주는 body부분을 form형식으로 정리해서 보내주기 위한 라이브러리
const app = express(); //express쓸 때 세트
const port = process.env.SERVER_PORT || 3000; // process.env.SERVER_PORT 이 값이 없으면 3000이다~
app.use(bodyParser.urlencoded({extended:false}));// bodyparser로 가져온거 encoding하기 (?)
nunjucks.configure('views', { //nunjucks의 환경설정 'views <- view engine을 말하는걸까 views 폴더를 말하는 걸까 - 폴더명 말하는거
express:app, // 변수값이 app이다.
autoescape:true, //보안관련으로 항상true
});
let connection = mysql.createConnection({ //mysql dbms의 정보를 connection 변수에 담을게? 실질적으로 받아진게 아니고 데이터만 담은 상태 어떤걸 넣는지 객체 형태 (json 형태)로 담고잇음
host:'localhost', //서버 주소
user:'root',//user id 넣음 root 라는 개념이 컴터에서 최상위
password:'1234',
database:'ingoo', //엑셀 명
});
//()함수형태를 쓰고 {} 객체형태로 바꾸기 //입력 2
// mysql = 서버야 -> 실행되는 상태라면 host(너의 서버 주소가 뭐야? 물어보는거)
//localhost = 127.0.0.1
//user password 입력햇던 란 위에 root, 루트 라는 슈퍼관리자이름 있었음.
//너의 데이터베이스가 뭐야 라고 물어보기/ 만들었던 엑셀 파일 'ingoo'
//접속할 정보를 connection이라는 변수에 담을게 나한테 줘~
// 아직 실질적으로 넘겨진건아님. 데이터 부분만 받은 상태임
// 이걸 connection 변수 안에 넣은 상태
connection.connect(); // 담은 정보가 틀리면 여기서 오류남 // 요거 실행하면 저 node.js와 db랑 항상 접속 중
//connection 안의 connect라는 method를 호출할거야
//여기까지 치면 database를 연결 한다. 라는 뜻
app.set('view engine', 'html'); //여기서의 html 은 view engine의 확장자를 정해줌. 되는ㄷ게 html 이랑 nunjucks의 확장자 뭐가 잇대 //nunjucks의 모든 확장자를 html으로 하겠다.
app.get('/',(req,res)=>{ //localhost:3000일 때 아래 내용을 수행해라
// query문 = slect, update, delet, insert문 사용 가능
connection.query("select * from user",(error, results)=>{ //error인지 어떻게 알지?
if(error){//error뜨면 이 코드를 실행해라
console.log(error);
}else{ // error 안나면 아래 코드를 실행해라.
console.log(results);
results.forEach(ele=>{
console.log(ele.userid,ele.userpw,ele.username);
});
} //결과값 : 배열 형태 (안의 값들은 객체로 되어있음)
//[{userid:'피카츄'},{...},{}]
});
//두번째 인자값인 익명함수에 반환 ()=>{}요기
//익명함수 안 인자값 2개 쓰게
//error 나면 error 안에 데이터 쌓이고 그게 아니면 results안에 데이터 쌓이게
res.render('index.html',{ //index.html 을 보낼 때 json 데이터를 같이 보내줌 .name이라는 변수에 ingoo를 담는다
name:'ingoo', // json형태를 만들어서 같이 넣어준거 응답 안에 있는 render를 실행할 때 'ingoo'에 아무거나 넣어도 됨. name 도 아무거나 해도 됨. 대신nunjucks에서 받을 때는 여기에 쓴 변수 , 이름으로
}); //json 에 대해 찾아보자 - 객체할 때
});
app.listen(port,()=>{ //port라는 변수에 env server : 3000 이 있음. env 사용이유 : 보안 취약점 방어위해 다른 파일에 저장해서 불러오는 식
//3000에 연결되면 ()=>{}를 실행해라 ? (listen)
console.log(`server start port : ${port}`)
});
app.post('/join',(req,res)=>{ //url/join 이 입력되면 이 post를 실행한다.
console.log(req.body); //res의 body부분을 console.log에 나타내라
//res.send('post로 오셧군요!');
let id = req.body.userid; //id변수에 req.body.userid를 넣는다.
let pw = req.body.userpw;
let name = req.body.username;
let sql = `insert into user (userid, userpw, username) values ('${id}','${pw}','${name}')`;//query문 작성 //sql이라는 변수에 ``를 넣어라.
console.log(sql);
connection.query(sql,(error, results)=>{ //connection 이라는 변수에 mySQL의 정보가 담겨져 있음. 요 변수의 모루ㅡ겠ㅇ다. // ingoo 파일에 들어온 상태로 대기 중 -=> sql 을 입력해라 query(안에 직접 써도 됨)
if(error){
console.log(error);
}else{
console.log(results);
res.render('join.html',{//응답에 대해 보내주기
id:id,
pw:pw,
name:name
})
}
});
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
It's lunch time soon {{title}}
<!--
form 태그 만들어서
내용 입력 후 , 아래 유알엘에 접속하면
url을 localhost:3000/join
post로 userid, userpw, username을 서버에 넘겨주기까지만
console.log찍어보기
-->
<form method="post" id ="" action="./join">
ID:<input type="text" name="userid" placeholder="아이디"> <br />
Password:<input type="text" name="userpw" placeholder="패스워드"> <br />
Your name: <input type="text" name="username" placeholder="이름"> <br />
<input type="submit" value="회원가입">
</form>
</body>
</html>
join.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>welcome onboard! </h2>
{{name}}님 환영합니다. <br />
{{name}}님의 아이디는 : {{id}} <br />
{{name}}님의 패스워드는 : {{pw}}입니다. <br />
무 ~ ㅇ ㅑ ~ 호 ~ <br /><br />
<br />
<a href="/">메인으로 돌아가기</a>
<!-- / 요기로 간다는 것은 app.get('/',(req,res)=>{}) 요 코드가 실행된다는 것
링크의 이동.
왜 하필 get이냐
url 을 직접 입력하는 것은 다get
form 으로 입력하는 것은 post
a tag로 이동하는 것은 다 get -->
</body>
</html>
=========================오늘 수업진도는 여기 까지...=====================
라우터, 겟 구문 등등 인터넷에 돌아다니는 어려운 것들을 일단 빼고 오늘까지 공부함. 다음 시간부터 하나하나 공부해나가면서 마스터 ㄱㄱ ㄱ 지금까지 배운 내용을 정확하게 잘 이해하고 있어야 한다고 함 ! js, html 외우기
|
숙 제 쪼아 ( 아래 찾고 공부 숙달해오기 ) |
|
0. 오늘 공부한거 복습 & 외우기 2. alter table 명령어 조사 3. select문 option값 4. limit 기능 알아오기 |
1. Primary Key (PK), 기본키
- 해당 테이블에서 가 ~ 장 기본적인 값 (행을 고유하게 구분해 주는 최소의 정보)
- 단일값(Unique) ex)주민등록증처럼
- 하나 이상의 컬럼이 그룹화되어 기본키로 쓰일 수 있음 (그 column, 여러개의 컬럼들의 그룹을 *candidate key 라고 함. )
- 한 테이블에 세 개의 candidate key(회원번호, 주민번호,
- 기본키는 null 상태가 될 수 없다.
- 모든 테이블에는 PK가 반드시 존재해야하며 단 1개만 존재해야 한다.
- 관계형 db상 모든 테이블은 반드시 하나의 기본 키를 가져야함. (최선)
- 관례상 테이블의 첫 번째 컬럼을 pk로 하지만 반드시는 아님.
- create table 명령어 사용할 때 꼭 잊지말자. pk만들기-> constraint 절을 사용하여 pk를 정의함.
* candidate .…할[될] 가능성이 큰 사람[집단], 후보자, 후보집단.
여기서의 candidate은 != primary key
candidates 중 오직 하나만 primary key 로 선택받음. (뽑히지 못한 candidates 는 alternate key로 됨)
Primary Key 를 제대로 정의하는 것은 데이터베이스 디자인에 있어서 매우 중요한 출발점.
Primary Key 유무에 따라 성능이 현저하게 향상됨. -> 이는 primary key를 정의하면 물리적으로 uniqueness를 보장하기 위해 unique index가 만들어지기 때문 primary key를 기준으로 데이터를 select 등등 속도, 성능 향상됨.
출처: linuxism.ustd.ip.or.kr/503
기본키(Primary Key) 의미
기본키 또는 Primary Key라고 부르는 이 값의 정체는? DB에서 테이블을 생성할 때 하나 또는 그 이상의 항목을 기본키(Primary Key)로 설정할 수 있습니다. 기본키는 해당 테이블에서 가장 기본적인 값
linuxism.ustd.ip.or.kr
2. alter table 명령어 조사
3. select문 option값
4. limit 기능 알아오기
5. not null -> null 값 비허용한다.
null -> 아무값이 없는 상태
6. type에 대해 (varchar, int, date(?) ect. )
7. auto increment
8. % 의 기능
질문 Ctrl + C 누르면 안에 쓴 내용들 다 삭제됨?
