// views 폴더 만들기 > 안에 index.html 만들기
//sendfile 로 html 파일을 보낼 수 있는데 단순히 html 만 보내게 됨
//그래서 view engine 이라는 걸 사용해야함.
//view engine= 사용자한테 간 맞춰라 / 노드js의 자체 내장이 아님.
// npm으로 설치ㅎㅐ야함 nunjucks?
nunjacks는 또 몰까 ? -> 아 위에 설명 해주셧네 html파일을 잘 보내기 위한 거 !
하루하루 모르는 단어들이 계쏙 몰려옴
터미널에 npm install nunjucks chokidar 입력 (nunjucks, chokidar 받기)
package.json 가서 내용 추가되었는지 확인
{
"name": "nodejs",
"version": "1.0.0",
"description": "",
"main": "practice.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"chokidar": "^3.5.1",
"express": "^4.17.1",
"nunjucks": "^3.2.3"
}
}
dependencies : install한 라이브러리 (?) 들을 알려주는 건가 보다
js 작성
const express = require('express');
const nunjucks = require('nunjucks'); // 1. 가져오기
const app = express();
// 2. setting 해주기
nunjucks.configure('views',{
express:app, //express는 어떤걸 쓸꺼냐
autoescape:true, // 보안문제인데 무조건 true래
});
app.set('view engine', 'html'); //3. view engine을 html로
app.get('/', (요청,응답)=>{
//응답.send('hello');
응답.render('index.html', {title:'good'}); // 응답을 render할거다.
});
app.listen(3000,()=>{
console.log('server start port : 3000');
});
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>
hello hello {{title}}
</body>
</html>
터미널에 node practice.js 입력
에러가 나옴 :
Error: listen EADDRINUSE: address already in use :::3000
3000 을 이미 사용하고 있다고 함.
아래처럼 강제 삭제하고 ㄱ ㄱ
server start port : 3000 이 된거래..
근데 어제는 연결한거 ->
server is listening at localhost 3000 으로 떠서 안된건줄..
요 두개 차이는 뭐지?? js 쓴게 달라서 그런가..???
-> 아하 js 에 이렇게 나오라고 나와있구나 ~~~
app.listen(3000,()=>{
console.log('server start port : 3000');
});
const express = require('express');
const nunjucks = require('nunjucks'); // 1. 가져오기
const app = express();
// 2. setting 해주기
nunjucks.configure('views',{
express:app, //express는 어떤걸 쓸꺼냐
autoescape:true, // 보안문제인데 무조건 true래
});
app.set('view engine', 'html'); //3. view engine을 html로
app.get('/', (요청,응답)=>{
//localhost:3000/?name=emily&id=gugugu&pw=1234
console.log(요청);
console.log(요청.query.name);
console.log(요청.query.id);
console.log(요청.query.pw);
//응답.send('hello');
응답.render('index.html', {title:'good'}); // 응답을 render할거다.
});
app.listen(3000,()=>{
console.log('server start port : 3000');
});
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>
hello hello {{title}} <br />
아이디 : {{user_id}}
패스워드 : {{user_pw}}
</body>
</html>js 수정
const express = require('express');
const nunjucks = require('nunjucks'); // 1. 가져오기
const app = express();
// 2. setting 해주기
nunjucks.configure('views',{
express:app, //express는 어떤걸 쓸꺼냐
autoescape:true, // 보안문제인데 무조건 true래
});
app.set('view engine', 'html'); //3. view engine을 html로
app.get('/', (요청,응답)=>{
//localhost:3000/?name=emily&id=gugugu&pw=1234
console.log(요청);
console.log(요청.query.name);
console.log(요청.query.id);
console.log(요청.query.pw);
//응답.send('hello');
응답.render('index.html', {
title:요청.query.name,
user_id:요청.query.id,
user_pw:요청.query.pw
}); // 응답을 render할거다.
});
app.listen(3000,()=>{
console.log('server start port : 3000');
});
const express = require('express');
const nunjucks = require('nunjucks'); // 1. 가져오기
const app = express();
// 2. setting 해주기
nunjucks.configure('views',{
express:app, //express는 어떤걸 쓸꺼냐
autoescape:true, // 보안문제인데 무조건 true래
});
app.engine('html',nunjucks.render);
app.set('view engine', 'html'); //3. view engine을 html로
//혹시 원래 3000쓰던 practice 3000을 강제종료해서 그럴까요???
app.get('/', (요청,응답)=>{
//localhost:3000/?name=emily&id=gugugu&pw=1234
//console.log(요청);
console.log(요청.query.name);
console.log(요청.query.id);
console.log(요청.query.pw);
//console.log(응답);
//응답.send('hello');
응답.render('index', {
title:요청.query.name,
user_id:요청.query.id,
user_pw:요청.query.pw
}); // 응답을 render할거다.
});
app.listen(3000,()=>{
console.log('server start port : 3000');
});
브라우저에 흰 화면만 나와서 교수님이 봐주셨는데 다른 분들한테 넘 죄송스럽다.. ㅠㅠㅠㅠㅠㅠㅠ ㅎ ㅏ
이번 오류는 node practice.js 를 안 누른거같은데 아니면 저장을 안했거나
교수님이 바꾼 내용은 없다고 했다. 그럼 나의 뭔 실수이다.........
오늘은 카오스다..
=====================================================================
//localhost:3000/?name=emily&id=gugugu&pw=1234
//queryString 이라고 함. -> url에 내용을 담는 것(변수)
//url구조
// [도메인] - >naver.com google.com
naver.com -> localhost:3000
? = queryString을 내가 시작하겠다 ! (? 이후를 queryString이라고 부름)
[도메인]?변수=값&변수=값&변수=값.....
& =구분값
똑똑한 express가
name=emily&id=gugugu&pw=1234 를 잘라서 Object 형태로 만들어줌
name:emily
id = gugugu
pw = 1234
요렇게 잘라서 요청에다가 줌. (예전엔 안그랫다고)
요청에서 query라는 곳에 내용을 담아줍니다
query{
name:emily
id = gugugu
pw = 1234
}
요로코롬
여태 queryString 을 해본거라고하는데
1도 모르겠다 ~~~~~~~~~악
* queryString 노가다 작업을 html으로 만들어 줄 수 있음.
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>
hello hello {{title}} <br />
아이디 : {{user_id}}
패스워드 : {{user_pw}}
<br />
<!-- -->
<form method="get" id ="" action="http://localhost:3000">
이름:<input type="text" name = "name"> <br />
아이디:<input type="text" name = "user_id"> <br />
패스워드:<input type="password" name="user_pw"> <br />
<input type="submit" value="버튼">
</form>
<!--
form 작동 시키는 방법 input
input type="submit" 을 쓰면 form 이 실행됨
input 안에 있던 내용들이 url로 올라감
-->
</body>
</html>
form 의 역할 - 안에 있는 input 내용을 action 쪽에다가 링크이동을 시킴
input의 내용은 이름, 아이디, 패스워드 까지 말함. (select box, radio box etc)
name 값에 담아서 보냄.
name = " 요기에 " emily 를 쓰면 emily 라고 나온대
form은 summit 버튼을 보내면 input 내용을 queryString으로 만들어
js modification
const express = require('express');
const nunjucks = require('nunjucks'); // 1. 가져오기
const app = express();
// 2. setting 해주기
nunjucks.configure('views',{
express:app, //express는 어떤걸 쓸꺼냐
autoescape:true, // 보안문제인데 무조건 true래
});
app.engine('html',nunjucks.render);
app.set('view engine', 'html'); //3. view engine을 html로
app.get('/', (요청,응답)=>{
//localhost:3000/?name=emily&id=gugugu&pw=1234
//queryString 이라고 함. -> url에 내용을 담는 것(변수)
//url구조
// [도메인]
//console.log(요청);
console.log(요청.query.name);
console.log(요청.query.id);
console.log(요청.query.pw);
//console.log(응답);
//응답.send('hello');
응답.render('index', {
title:요청.query.name,
user_id:요청.query.id,
user_pw:요청.query.pw
}); // 응답을 render할거다.
});
app.listen(3000,()=>{
console.log('server start port : 3000');
});
결과물
* 아이디랑 패스워드 안보이는 거 일부로 안되게 한 것이라고 함.
무언가 쳐서 버튼 누르면 위와 같은 내용이 나옴.
아이디, 패스워드 안나온 이유 :
요청에서 query.name, id, pw 가지고 오는 값
근데 지금 보내는 값은 user_id, user_pw 라서
이제 js 가서 쉬는시간
==========================혼돈의 4교시 =====================
url 치면
practice.js 파일을 먼저 열어
얘는 html 파일을 redering을 함.
rendering은 뭘까 - > 주다 제공하다 제시하다 만들게하다
최초 -> 서버가 실현됨 -> user에게 html page를 준다.
세호씨의 뚝배기.. 아니 주문하면 요리사가 요리를 줌.
세호님 : 브라우저
요리사 : 서버
요리 :html
form을 써서 우리는 요리사한테 다시 요청했어
'소금 좀 가져다 주세요 '
html이 서버와 상호작용을 하고 있다.
html 이 submit 버튼을 눌러서 reload 를 발생시킴 (요것이 action~ )
reload가 발생되었으니 -> server 로 감.
server가 다시 page를 바꿔서 html에게 줌.
html과 server와 상호 작용.. ...
//console.log(요청);
console.log(요청.query.name);
console.log(요청.query.user_id);
console.log(요청.query.user_pw);
//console.log(응답);
//응답.send('hello');
응답.render('index', {
title:요청.query.name,
user_id:요청.query.user_id,
user_pw:요청.query.user_pw
}); // 응답을 render할거다.
practice.js 에 user_id, user_pw 를 바꿔줌.
(or html을 바꿔주구나 )
html이 보인다는 것은 server를 무조건 거친다는 뜻
html에서 링크 이동 -> 무조건 다시 server로 갔다는 뜻
-> 그래서 server가 다시 해당html page를 만들어서 줌
위에 js 바꿔주고 다시
터미널에 node practice.js 눌러주고 (server start port : 3000) 나오고
다시 localhost:3000/?name=emily&id=gugugu&pw=1234 를 실행시켜서 이름, 아이디, 패스워드를 넣으면 뜸.
======================이제 배울 내용 post===========================
여태 get을 배웠다고 함.
(몰랐다)
post는 body 안의 내용을 담는 것. 내용이 deep해서 생략?
body라는 것은 무엇이냐
웹페이지 서로 주고 받을 때
crome 창 - server (made by Node.js)
crome 이 server한테 요청 보낼 때 (url 주소를 쳐서)
보내는 그 형식이html이랑 비슷 (눈으로 보이진않음)
header
body (
요롷게 브라우저가 문서로 만들어 보내줌
근데 요 body 부분에 post의 내용이 담겨져 있음.
-> 우리가 받아서 해석해서 ~~~~~~ 못들음
http 흐름 -> 검색해보자
post실행하는 방법
html에 post 로 바꾸고
<form method="post" id ="" action="http://localhost:3000">node practice.js 실행
확인
js 추가
app.post('/',(요청,응답)=>{
응답.send('post로 왔니?');
})전체js
const express = require('express');
const nunjucks = require('nunjucks'); // 1. 가져오기
const app = express();
// 2. setting 해주기
nunjucks.configure('views',{
express:app, //express는 어떤걸 쓸꺼냐
autoescape:true, // 보안문제인데 무조건 true래
});
app.engine('html',nunjucks.render);
app.set('view engine', 'html'); //3. view engine을 html로
app.get('/', (요청,응답)=>{
//localhost:3000/?name=emily&id=gugugu&pw=1234
//queryString 이라고 함. -> url에 내용을 담는 것(변수)
//url구조
// [도메인]
//console.log(요청);
console.log(요청.query.name);
console.log(요청.query.user_id);
console.log(요청.query.user_pw);
//console.log(응답);
//응답.send('hello');
응답.render('index', {
title:요청.query.name,
user_id:요청.query.user_id,
user_pw:요청.query.user_pw
}); // 응답을 render할거다.
});
app.listen(3000,()=>{
console.log('server start port : 3000');
});
app.post('/',(요청,응답)=>{
응답.send('post로 왔니?');
})
그리고 localhost:3000가서 이름,id,pw 적고
서버가 같은url이라도 get으로 왔을 땐 app.get(~) in JS 으로 처리하고
post로 왔을 땐 app.post()in JS 으로 값을 받는다.
터미널 내용을 찾으시는데 저게 뭘까
get 아까 내용이 안나오는 이유는 : get은 친절, post 를 내장함수를 담아서 실현시키는게 없음. 그래서 우리가 직접 담아서 구현해야함
html -> server (node.js는 내장함수로 처리를 몬함.)
(html-post로 내용주면 우리한테 준 문서를 가지고 있는데 그것을 바로 가져다 쓸 수 있는 형태가 아니야 그래서 우리는 저 문서를 해독해서 원하는 부분을 뽑아서 쓸 수 있도록 코딩해야한다)
-------------------------------------------------------------------------------------------------
body-parser 를 설치해야함
body에 있는걸 가져오는 것
터미널에 서버를 끄고 (Ctrl + C)
npm install body-parser 터미널에 입력
그럼 뭔가 쭈르르륵 설치됨.
그리고 설치하면 반드시 파일에 잘 들어왔는지 package.json 확인
{
"name": "nodejs",
"version": "1.0.0",
"description": "",
"main": "practice.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"chokidar": "^3.5.1",
"express": "^4.17.1",
"nunjucks": "^3.2.3"
}
}body-parser쪽 잘들어옴.
그리고 js 에 body관련 추가
const express = require('express');
const nunjucks = require('nunjucks'); // 1. 가져오기
const bodyParser = require('body-parser'); //여기 1111111111111~~~~~~~~BODYPARSER 추가분
const app = express();
// 2. setting 해주기
nunjucks.configure('views',{
express:app, //express는 어떤걸 쓸꺼냐
autoescape:true, // 보안문제인데 무조건 true래
});
app.use(bodyParser.urlencoded({extended:false})); // 2222222222~~~~bodyparser 이 내용을 실행시키겠따 . url을 인코딩하겟다.
app.engine('html',nunjucks.render);
app.set('view engine', 'html'); //3. view engine을 html로
app.get('/', (요청,응답)=>{
//localhost:3000/?name=emily&id=gugugu&pw=1234
//queryString 이라고 함. -> url에 내용을 담는 것(변수)
//url구조
// [도메인]
//console.log(요청);
console.log(요청.query.name);
console.log(요청.query.user_id);
console.log(요청.query.user_pw);
//console.log(응답);
//응답.send('hello');
응답.render('index', {
title:요청.query.name,
user_id:요청.query.user_id,
user_pw:요청.query.user_pw
}); // 응답을 render할거다.
});
app.listen(3000,()=>{
console.log('server start port : 3000');
});
app.post('/',(요청,응답)=>{
console.log(요청.body); ///33333333. ~~~~~~~~~~~여기서 body.parder 잘 되어있는지 콘솔로 확인하는듯
응답.send('post로 왔니?');
})요렇게
오늘 날씨 완전 좋다
그리고 post로 왔니? 나온 브라우져에 f12-> Network -> F5 -> localhost-> Headers를 쭉 ㅂ봐봐
방금 한게 나왔나봐
==================================점심먹고옴===============================
처음에 요청을 받는 것을get (무조건)
get.method로 들어옴 변수(?) 가 있던 없던
네트워크 가서 다시 localhost:3000 을 치면 맨 위General REquest Method:Get 이라고 나옴.
최초의 주문은 get이다.
(이유는 모르겠다. )
hs에 get 값이 없다면 화면 표출을 안해줌
localhost:3000 을 치면
Request Method : Get
안에 name, id, ps 를 입력하면
Request Method : Post 가 나옴
============================== 5,6,7교시는 각자 연습 시간 & 질문 시간 ================
내일 숙제
DBSM 중 아무거나
postgreSQL
MariaDB
Mysql (상업적일 때 유료)
Oracle (상업적일 때 유료)
마리아 db 를 설치 해서 database 생성까지 해보기가 숙제
마리아마리아
내일 목표
회 원 가 입
OAuth
OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다.[1] 이 매커니즘은 여러 기업들에 의해 사용되는데, 이를테면 아마존,[2] 구글, 페이스북, 마이크로소프트, 트위터가 있으며 사용자들이 타사 애플리케이션이나 웹사이트의 계정에 관한 정보를 공유할 수 있게 허용한다. 출처 : 위키백과
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [28일차]20210421 node.js mySQL dotenv 설치 연결 app.port app.get 등 (0) | 2021.04.21 |
|---|---|
| [27일차 복습] node.js 와 html연결하기 view engine 이용하여 html load /nunjucks chokidar body-parser post&get QuerySting이란? (0) | 2021.04.21 |
| [26일차 연습] node.js 란? 노드제이에스를 사용해 간단한 server 서버 구축해보기 node.js 다운로드 방법 node.js 장점 및 특징 (0) | 2021.04.20 |
| [26일차] 20210419 git branch 조금 + Node.js 찍먹 (0) | 2021.04.19 |
| console.log에 달력 출력하기 (0) | 2021.04.19 |
