본문 바로가기

Lecture

(86)
HTTP 비동기 통신 2021.05.25 - [Lecture] - HTTP 동기 통신 저번글은 HTTP 통신중 동기 통신에 대해서 다뤘다. 동기통신은 요청 하나 => 응답 하나 이런 식으로 http프로토콜을 따른다 그래서 버튼을 눌렀을때 새로운 페이지가 로딩되면서 정보값을 주고 받는다 하지만 만약 내가 현재 있는 페이지에서 페이지 로딩 없이 계속해서 요청과 응답을 주고 받고 싶다면 비동기 통신을 이용해야 한다. 비동기 통신의 방법 중에 axios를 사용할 수 도 있지만 이번에는 fetch를 사용했다. 전체 코드 더보기 HTML 비동기 활용하기 GET 통신하기 비동기 활용하기 POST 통신하기 JAVASCRIPT const express = require('express'); const nunjucks = require('nu..
HTTP 동기 통신 HTTP 통신의 형태는 크게 4파트로 구성되어있다. 1. start-line 2. Headers 3. empty line 4. body 이렇게 4파트의 형식을 가진 REQUEST 와 RESPONSES가 서로 통신을 주고 받는걸 HTTP 통신이라고 하는데 각각 어떤 내용을 담고 있는지 확인해 보자 REQUEST 1. start line => request method(GET or POST) 현재 URL HTTP버전 예시) GET http://localhost:3000 HTTP/1.1 2.headers 헤더는 화면에 꾸며지지 않는 정보들을 담고 있다. 몇가지만 살펴보자 host: 사이트의 도메인 주소(ex: 네이버, 구글) user-agent: 사이트를 사용하고 있는 user의 정보 content-type:..
미들웨어로 로그인 확인하기 GOAL : 로그인을 하지 않은 상태로 이동할때 제한을 두고 싶다. if문으로 하나하나 설정해줄 수도 있지만 같은 내용의 반복이기 때문에 하나의 미들웨어로 검사 해보자. const authMiddleware = (req,res,next)=>{ const {session} = req; } 일단 미들웨어 함수를 만들어주고 받아온 request값에 session값만 받아온다. 여기서 if문 처리를 해준다. const authMiddleware = (req,res,next)=>{ const {session} = req; if(session.authData == undefined){ console.log('NO LOGIN INFORMATION'); res.redirect('/?msg=NO LOGIN INFORMA..
자바스크립트 Switch문 사용 switch문은 if문과 같은 기능을 가지고 있다. 하지만 조건값이 여러개일 경우 switch문을 사용하는게 가독성면에서 더 유리하다. switch문 연습. let fruit = 'banana'; fruit이라는 변수가 있다 그 안에 banana라는 데이터가 들어가있다. 이때 fruit변수에 과일이름이 데이터값으로 들어가면 그 데이터값 (과일이름)의 색상을 표시하고 싶다. switch(fruit){ case 'banana': console.log('yellow') break; case '참외': console.log('yellow') break; case 'apple': console.log('red') break; case 'kiwi': console.log('green') break; case 'wa..
자바스크립트 비구조할당문 배열에서 각각의 수 를 가지고 올때 원래 쓰던 방법 let arr = [1,2,3,4,5,6,7,8,9]; let a = arr[0]; let b = arr[1]; let c = arr[2]; 이런식으로 가지고 왔다. 콘솔로 각 a,b,c를 찍어보면 1,2,3이 나올 것 이다. 비구조할당문을 이용해서 배열 안에서 특정 값만 변수로 설정해주고 나머지는 last라는 변수에 담을 수 있다. 또한 속성값의 이름을 바꿀 수도 있다. 비구조 할당문을 통해 arr 배열안에 1,2,3만 변수로 설정해주고 나머지는 last안에 묶어 저장해보자 let arr = [1,2,3,4,5,6,7,8,9]; let [a,b,c, ...last] = arr; console.log(a); console.log(b); console.l..
PASSPORT 서버란? client >> server (request) server >> client (respond) 비동기 = 질문 여러개를 한꺼번에 처리 할 수 있다 http 통신? web 소켓 cookie session login >> SNS부터 : facebook google naver kakao local server facebook server ==> how to share session? local session facebook session ==> 'oAuth 2.0' oAuth 2.0 > 기술 X 개념 O 1. local server ask(req) to ==> facebook 2. facebook check local server 3. after check, facebook issues 'key'(..
회원가입 공백 유효성 GOAL : 회원가입을 할때 image를 제외한 나머지 input칸이 비어있는 상태에서 join버튼을 누를때 알림창을 띄워준다. * 이미 PASSWORD칸에서 확인되는 PASSWORD CHECK나 checked가 되어있는 GENDER도 조건에 포함하지 않아도 됨 HTML 더보기 JOIN PAGE ID PASSWORD 8~20자 이내의 특수기호,숫자를 포함한 비밀번호를 입력하세요 PASSWORD CHECK NAME GENDER MALE FEMALE IMAGE 1. 조건에 걸려야할 칸들을 모두 불러와서 변수에 담아준다. const mustFill = document.querySelectorAll('.must_fill'); 2. 각각의 개체들과 그 value값을 가지고 오기위해 for문을 작성한다. for(i..
회원가입 NAME/PW 조건걸기 회원가입 유효성 설정 GOAL : user name은 4~12자 안에서 영문 대소문자, 숫자만 가능. 비밀번호는 8~12자 안에서 특수기호와 숫자를 포함해야한다. 현재 HTML 더보기 JOIN PAGE ID PASSWORD 8~20자 이내의 특수기호,숫자를 포함한 비밀번호를 입력하세요 PASSWORD CHECK NAME GENDER MALE FEMALE IMAGE NAME 유효성 1. HTML에서 name input 박스와 알림을 줄 message 공간을 가지고 온다. const username = document.querySelector('#username'); const username_msg = document.querySelector('#username_msg'); 2. 정규표현식을 사용해서 mi..