브라우저5 [220307] 서로 다른 서버끼리 통신하기(CORS, Access-Control-Allow시리즈) 브라우저의 보안을 지켜주는 동일 출처 정책 SOP 기본적으로는 다른 서버끼리는 서로 통신하지 못한다. 4001번 포트로 연결되어있는 서버에서 3001포트로 연결하려고하면 에러가 뜬다. 같은 출처끼리만 리소스 공유나 접근을 허용해주는 동일 출처 정책 때문이다. //localhost:4001에 연결되어있는 서버 const btn = document.querySelector('#btn') btn.addEventListener('click',async ()=>{ alert('버튼클릭') let response = await axios.get('http://localhost:3001') console.log(response.data) }) 출처(Origin)란? http://127.0.0.1:5500/index... 2022. 3. 14. [220208] 세션의 정의, 세션 구조 구현하기, 세션과 쿠키🍪의 관계 목차 1. 세션이 생겨난 이유 2. 세션 구현하기 3. 쿠키를 생성해서 서버에 저장하기 세션을 만든 이유 : 보안성을 위해. 이처럼 브라우저에 쿠키가 없으면 웹서버에 요청을 하며, 웹서버는 응답을 하며 🍪쿠키를 준다. 그 이후부터 브라우저는 쿠키를 같이 붙여서 웹서버에 요청을 하고, 웹서버는 쿠키를 붙여서 응답한다. 즉, 웹서버는 기본적으로 항상 쿠키를 받는다. 다만 문제가 있다면, 브라우저에 저장을 하다보니 다른 사람이 접근하기도 쉬워진다. pc방을 예로 들어보자. A가 이용을 끝낸 후, B가 브라우저를 열어 쿠키를 확인하면 로그인정보가 고스란히 남아있다. 그걸 보고 게임머니나 각종 개인정보를 털어갈 수 도 있다. 이를 방지하기 위해, 쿠키를 서버에 저장하게 하는것이 세션이다. 구현할 기능 청사진 청사.. 2022. 2. 9. [220207] 쿠키 / http 요청, 응답, 브라우저, 특징 [목록] 사전지식 : 응답헤더에 임의로 값을 추가하기 브라우저의 저장소 중 하나인 쿠키 사용자마다 다른 정보를 브라우저에 저장하는 쿠키값 쿠키 사용 설명서 코드의 실행흐름 쿠키에 저장한 내용을 다루기 쿠기의 유효기간, 접근권한 사전지식 : 응답헤더에 임의로 값을 추가하기 이전수업까지는 body 내용만 작성해서 보냈지 header부분은 작성해서 보낸적이 없다. express가 header부분을 작성해주던 긴 텍스트. 오늘은 express가 만들어주는 헤더에다가 우리가 임의로 추가해서 넣을것이다. 응답을 줄때 헤더에 내용을 추가할거니까 다음 코드를 작성한다. res.Header('headerKey','headerValue') : 둘다 string인 인자값을 가짐 app.get('/',(req,res)=>{ .. 2022. 2. 7. [211230] 자바스크립트 / 변수, 예약어, 연산자, if문, for문 목차 1. 자바스크립트 2. 컴퓨터의 간단한 구조 3. 저장단위 4. 예약어 5. 연산자 6. 조건문 자바스크립트가 나타난 배경 최초의 브라우저 넷스케이프 (jsc는 없었음) -> 10일만에 jsc 쨔잔! 만들어냄. 그러니까 저급한 단어란걸 인식하고있자. -> 윈도우 마소가 넷스케이프 카피캣을 해서 익스플로러를 만들어냄 -> 문제는 서로 약간씩 다르게 기능을 하게 만듬 = 코드를 다르게 읽는거지(크로스 브라우징을 하게 만든 원흉) 파이어폭스 등장 플래시(액션 스크립트)를 자바스크립트 대신해서 적용함. -> 익스플로러, 파이어폭스, 다른 브라우저 다 다르게 함 대환장 파티 구글이 만든 크롬(2007) 등장 자바스크립트를 해석해주는 v8 엔진 기능이 매우 좋았고, 넷스케이프의 표준 문법을 지키는 브라우저.-.. 2021. 12. 30. [211220] 브라우저의 구성과 html 기초 목차 1. 브라우저의 구성 2. html의 기초 3. 엘리먼트의 속성과 작성법 4. 엘리먼트의 종류 1. 브라우저의 구성 1-1. 프론트, 백엔드, css 1-2. 인터넷 창을 구성하는 2가지 네트워크(주소창) 화면을 구성하는 렌더링 1-3. 그렇다면 화면은 어떻게 만드는 것일까? 3가지로 이루어진 렌더링 : html, css, 자바스크립트 브라우저별로 개별적으로 다른 렌더링. 개발자 도구(F12) -> html을 볼 수 있음, 볼 수 있는 위치 지정 가능, 화살표를 누르면 항목별로 알 수 있음. 2. html의 기초 2-1. visual studio 작업 환경 만들기 visual studio 프로그램 설치 -> 확장 탭에서 korean 설치, live server 설치 visual studio code.. 2021. 12. 20. 이전 1 다음
