5.24
(1교시)
카카오톡 로그인
const {session,query} = req;// req라는 변수에 query라는 객체를 넣고
//속성값과 변수값의 밸류가 같을때(?) 하나로 표현 가능req.session.authData 같은거 그냥 session.authData 라고 표현 가능이라는데 왜인지 못알아듣겠음.
*비구조할당문
ex1)
let arr = [1,2,3,4,5,6,7,8,9];
let [a,b,c, ...last] = arr;
console.log(a); //1
console.log(b); //2
console.log(c); //3
console.log(last); // [4,5,6,7,8,9]배열 arr이 있다고 했을때
let [a,b,c, ...last] = arr; 로 담으면 0번째 arr 부터 순서대로 변수에 담깁니다.
이 상태에서 a.b.c를 따로 console.log에 찍어주고 나머지를 한꺼번에 찍어줄 수 있습니다.
(콘솔 결과창)
ex2)
let obj = {a:10 , b:20 , c:30 , d:40};이러한 배열 obj가 있다고 했을때, 여기에서 만약에 a빼고 나머지만 따로 담고 싶다고 가정해봅니다.
그런 경우에는 a만 따로 변수에 담아줍니다. 그 상태에서 콘솔을 찍어보면,
let obj = {a:10 , b:20 , c:30 , d:40};
let {a:a2, ...last2} = obj;
console.log(a2); //10
console.log(last2); // {b:20 , c:30 , d:40}이렇게 나옵니다.
비구조 할당문의 장점은 속성값을 내가 원하는 이름대로 바꿀 수 있다는 점입니다.
ex3)
위와 같은 obj 객체의 속성을 각각 변수에 담아주면
let obj = {a:10 , b:20 , c:30 , d:40};
let {a:name, b:age , c: key, d:weight} = obj;
console.log(name); //10
console.log(age); //20
console.log(key); //30
console.log(weight); //40이렇게 나옵니다.
그럼 그냥 배열을 통째로 변수에 담으면 되는데, 왜 굳이 비구조 할당문을 쓸까?
ex4)
let arr2 = [1,2,3];
let copy = arr2;
let copy2 = [...arr2];
console.log(copy); // [1,2,3]
console.log(copy2); //[1,2,3]위에서 보이듯이, 그냥 console.log에 찍어보면
변수에 통째로 담은 copy랑 비구조 할당문을 쓴 copy2랑 다를게 없어보입니다.
만약 위의 배열의 첫번째값을 바꾸고 콘솔값이 어떻게 되는지 봅니니다.
let arr2 = [1,2,3];
let copy = arr2;
let copy2 = [...arr2];
arr2[0] = 'ingoo';
console.log(copy); // ['ingoo',2,3]
console.log(copy2); //[1,2,3] 이렇게 그냥 변수에 담으면 바뀐 값으로 결과값이 나오지만 , 비구조 할당문을 쓰면 원래 값이 나옵니다.
copy는 변수값을 가져온것이고 copy2는 해당 1,2,3이라는 값을 가져온것입니다.
copy를 얇은 복사 / copy2를 (비구조 할당문)- 깊은 복사라고 합니다.
이렇게 변수값이 바뀌더라도 내가 복사한 그 시점의 값만 사용하고 싶다고 할 때 비구조할당문을 사용합니다.
(2교시)
provider 조건을 걸어야하는데 switch문을 사용한다고 합니다. if문보다 가독성이 좋고 ,
boolean 타입이 아닌 값으로 설정해줄 수 있어서 왠만하면 switch문을 사용하는게 좋다고 합니다.
*switch문
switch(proVider){
case "kakao":
userinfo = {
userid:req.session.authData[proVider].properties.nickname,
}
break;
-> 만약 (provider) 가 "kakao" 이면 : userinfo 실행해라
switch문 ex1)
//예시 1) 과일의 색상을 표현해주는 코드
let 과일 = "바나나"; //주의주의 switch문 위에다가 정의를 해줘야 함미다
switch(과일){
case"바나나":
console.log('노랑')
break;
case"사과":
console.log('빨강')
break
case"참외":
console.log("노랑")
break;
case "키위":
console.log('초록')
break;
case "수박":
console.log('초록')
break;
case "포도":
console.log('보라')
break;
}
결과는
이렇게 노랑이라고 나옵미다..
switch문에서 break를 만나기 전까지는 끝나지 않는대요. 이걸 이용해서 종류가 같은 case는
하나의 break로 묶어서 써줄 수 있슴미다.
switch(과일){
case"바나나":
case"참외":
console.log('노랑')
break;
case"사과":
console.log('빨강')
break
case "키위":
case "수박":
console.log('초록')
break;
case "포도":
console.log('보라')
break;
default:
console.log("입력되지않은 과일입니다.")
//default는 if문으로 치면 else 같은것
}요렇게 써주면 됨미다.!
※오류오류 비상비상
회원가입이랑 유저인포 둘다 페이지가 안넘어가는거임.
let user;
try{
user = await axios({
method: 'GET',
url:'https://kapi.kakao.com/v2/user/me',
headers:{
Authorization:`Bearer ${token.data.access_token}`
}
})여기 url을 htttp라고 잘못 넣어줘서 유저정보가 안넘어간거였움.!!!!
(3교시)
계정 탈퇴 할거래요
인덱스에 계정 탈퇴 링크 걸어주고 app.get으로 서버에서 받아주기기기기
axios로 요청해줄거라서 async 써야함
이거는 회원탈퇴 넌작스구문
(5교시)
클라이언트랑 서버랑 요청응답 주고 받고합니다.
서버에 작성한 콘솔로그랑 html 페이지에서 작성한 콘솔로그랑 다름. 서버에서 직은 콘솔은 터미너렝 뜨고 html에 찍은건 브라우저에 표현됨.
요청의 헤더를 보고있는겁니다. 그 코드부분이 바로 (콘솔창) 부분입니다. 내용을 보면 post라는 속성값에 localhost:3000들어가있고요 어쩌구 저쩌구 들어가있어요. 즉 이 헤더라는 ㅈ ㅓㅇ보에 어떠한 브라우저의요청이 있는지를 보여주는겁니ㅏㄷ. 그리고 쿠키값이 존재합니다. connection.어쩌구~ 들어가있다고 -> 헤더가 보여주고있습니ㅏㄷ.
그럼 실제로 저런 쿠키가 존재하는지 브라우저에서 확인해보면 진짜 있습니당.
응답쪽을 보면 서버에 send를 하면서 응답을 보내줍니다. html 에 찍혀있는 콘솔이 응답인것
html fetch
헤더의 정보를 임의대로 추가해서 원하는 정보를 담기
app.get('/login2',(req,res)=>{
console.log(req.headers);
console.log(req.get('user-agent')); // 내 컴퓨터의 시스템이나 버전정보등을 헤더에 담아준대요
res.set('token','ingoo')
res.json({text: 'ok'});
});
+ res.set('Authorization',`Bearer dafsfdfsfsdf`) 이런 식으로 쓴다고 하면
이런식으로 내용이 생김미다.
만약에 이거를 get으로 안받고 post로 받으면 어케 될까요
이상태에서 body 내용에 값을 넣어보겠습니다.
요청하는 사람의 header와 body를 수정할 수 있는 공간이래요.
이 다음에 뭘 하시는데 갑자기 에러떠서 길을 잃으심..
.
.
.
보낼때 header의 content-type이랑 body내용이
이런식으로 변한대요.
