DB port 건드려서 오류남.
같은 port3000번 이란 겹쳐서,,
DB 도 포트가잇군.. DB도 server 래 ! ㄷr른 ㅅ ㅓㅓ버
mysql - 기본 port 3306 번
오늘 배운거 저번주말 숙제에 합쳐봐ㅏ = 숙 ㅈ ㅔ
index.html 추가
<button id = "chatBtn">채팅</button>
<div id="chatRoom">
</div>
.. . . . .
</div>
// 여기에 JS 파일 따로 추가 -> 코드 깔끔하게
<script type="text/javascript" src="/js/chat.js">
</script>
</body>
</html>
server.js
app.get('/chat',(req,res)=>{
res.send('hhh')
})send : body 내용을 생성해서 줌
public- js - chat.js 파일 만들기
const chatBtn=document.querySelector('#chatBtn');
const chatRoom = document.querySelector('#chatRoom');
chatBtn.addEventListener('click',()=>{
chatRoom.innerHTML='hello chat <br/>';
})
fetch 써서 가져올거
chat.js
const chatBtn=document.querySelector('#chatBtn');
const chatRoom = document.querySelector('#chatRoom');
chatBtn.addEventListener('click',async ()=>{
let url = 'http://localhost:3000/chat'
let options = {
method:'GET'
}
let response = await fetch (url,options);
let result = await response.text();
chatRoom.innerHTML=result;
})
server.js - 이제 res.render로 하기
app.get('/chat',(req,res)=>{
res.render('chat.html')
})
views- chat.html파일 만들기
<div id ="chat">
<span class="me">안녕하세요</span> <!--내가 쓴글-->
<span class="you"> 네 안녕 </span><!--남이 쓴글-->
</div>
<div id="chatInputArea">
<input type="text" id="msg">
<button id="chatSend">전송</button>
</div>
server on - check
chat.html 전체 render 한걸 fetch result로 가져와서 이렇게 chatRoom 의 innerHTML로 넣음.
이런것도가능하구나 ,,,,,,,,,
console.log(response) -> 저 body: 값에 내용이 들어있음
console.log(result) -> body값 안의 내용만 빼내옴 / 이번에 .json()이 아닌이유는 json 형태가 아니어서인듯
FETCH 복습
fetch return Promise object
test.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>
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
</body>
</html>test.js
let myPromise = new Promise((resolve,reject)=>{
setTimeout(function(){
resolve("success!");
},250);
});
function example(){
this.name="ㅇㅇ";
}
//요 함수를 객체로 만들려면
// {name:'ㅇㅇ'}
function User(){
this.name='gg'
this.age=20
console.log(this) // this = 또 하나의 객체
}-> network 봐봐
Promise는 객체
Promise쓸 떄는 항상 new를 쓴다
new 는 함수를 객체로 변경해 주는 키워드
그럼 콜백은 또 무엇인고..
익명함수는 ()=>{} 함수명만 적었을 때와 똑같이 처리됨 = 소나타 (O) / 소나타() (X)
장점 : 인자값도 받을 수 있는데 함수명만 적었을 때와 똑같이 처리됨 (그래서 자주씀)
<- 요 코드와 아래 코드는 똑같이 실행
아반떼1(()=>{소나타1} ) 소나타1 인자값이 있는데 인자값도 받을 수 있고 함수 명만 적었을 때 실행할 수 있는 익명함수로 씀
그랜저1은 인자값이 없어서 그대로 (그랜저1) 로 가능
콜백헬 해결위해 -> promise탄생
const pr = new Promise((resolve,reject)=>{
resolve('안녕하세요');
})
pr.then((data)=>{
console.log(data)
}).catch((err)=>{
console.log(err)
})
아래 두개는 같음
function aa(){
const pr = new Promise((resolve,reject)=>{
reject('실패햇삳');
})
return pr;
}
aa();=
function aa(){
return new Promise((resolve,reject)=>{
reject('실패햇삳');
})
}
aa();
function aa(){
return new Promise((resolve,reject)=>{
reject('실패햇삳');
}).then((result)=>{
console.log(result)
}).catch((err)=>{
console.log(err)
})
}
aa()
function aa(){
return new Promise((resolve,reject)=>{
reject('실패햇삳');
})
}
aa().then((result)=>{
console.log(result)
}).catch((err)=>{
console.log(err)
})
.then.catch 가 너무 귀찮다 -> async await 탄생 (성공의 내용만 처리하겠다. 실패도 가능하긴함)
function aa(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('성공');
},2000)
})
}
function result(){
let rst = aa();
console.log(rst);
}
result();
function aa(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('성공');
},2000)
})
}
async function result(){
let rst = await aa();
console.log(rst);
}
result();await 을 쓰면 resolve (status) 안의 값을 출력
<- 두개는 똑같은 의미다
Promise 객체 안에 Promise 있는 경우
function aa(){
return new Promise((resolve,reject)=>{
resolve(new Promise((resolve,reject)=>{
resolve('???')
}))
})
}
async function result(){
let rst = await aa();
console.log(rst);
}
result();
여기서 '꺼내쥬' console에 나오게 만들기
function 제발() {
return new Promise((resolve, reject) => {
resolve(꺼내줘())
})
}
async function 꺼내줘() { //return obj // pr
let pr = await new Promise((resolve,reject)=>{
resolve('꺼내쥬')
})
const obj = {
text:function(){
return pr;
}
}
return obj;
}
