자바스크립트
Javascript, storage에서 payload 값 가져오기
가져오고 싶은 값 가져올 때 쓰인 js 코드 // payload를 모두 문자열로 가져오기 let storage = localStorage.getItem('payload'); // 가져온 paylad(JSON 문자열)를 객체, 배열로 변환 const personObj = JSON.parse(storage); console.log(personObj); // username 키의 값만 가져오기 username = personObj['username']; console.log(username); 가져온 결과값 참고자료 https://velog.io/@grinding_hannah/JavaScript-Local-Storage-사용하기 https://hianna.tistory.com/697
Javascript, cookie에서 csrftoken 값 가져오기
// csrftoken 가져와 콘솔창에서 보여주기 let csrftoken = getCookie('csrftoken'); if (csrftoken != '') { console.log('csrf값은 : ' + csrftoken); } // csrftoken 가져오기 function getCookie(cname) { var name = cname + '='; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1); if (c.indexOf(name) == 0) return c.substring(name.length, c...
frontend, pipe에러 해결
django로 8000포트에 백엔드 서버를 돌리고 frontend 단에서 live server로 프론트 서버를 돌렸는데 pipe 에러가 발생했다. 찾아보니 제대로 연결이 마무리되지 않아서 라는 에러메세지였다. 백엔드에서 발생한 에러메세지 [25/Jul/2022 07:24:55,184] - Broken pipe from ('127.0.0.1', 58237) 프론트엔드서버에서 발생한 에러메시지 해결방법은 form 태그를 지우는 것이었다. get에서 사용했던 form태그를 post에 그대로 붙여넣어 생긴 문제였다. post 를 get이라고 form태그를 잘못 써두어서 닉네임 참고자료 https://superbono-2020.tistory.com/m/192
Javascript, fetch FormData
FormData HTML의 form 태그 내의 form 필드(키)와 그 값을 나타내는 키-값 쌍을 쉽게 생성할 수 있게 해주는 객체이다. 텍스트데이터, 파일을 서버로 전송하게 해준다. 1개의 파일과 텍스트데이터를 서버로 전송할 때 2개 이상의 다중 파일을 서버로 전송할 때 참고자료 javascript-project [도서] - 바닐라 자바스크립트
Javascript, fetch PUT
PUT //PUT - 데이터 수정 fetch("https://jsonplaceholder.typicode.com/posts/1", { method: "PUT", body: JSON.stringify({ id: 1, title: "foo", body: "bar", userId: 1, }), headers: { "Content-type": "application/json; charset=UTF-8", }, }) .then((response) => response.json()) .then((json) => console.log(json)); 참고자료 javascript-project [도서] - 바닐라 자바스크립트
Javascript, fetch POST
POST HTTP 요청 방법은 method에, 전송할 데이터는 body에, 헤더 값은 headers에 정의한다. //POST - 데이터 생성 fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", //HTTP 요청 방법 body: JSON.stringify({ //전송할 데이터 title: "foo", body: "bar", userId: 1, }), headers: { //헤더 값 정의 "content-type": "application/json; charset=UTF-8", //content-type 정의 }, }) .then((response) => response.json()) .then((json) => console.log(..
Javascript, fetch GET
GET XMLHttpRequest에 비해 코드가 간결하다. GET의 경우 따로 HTTP 요청 방법을 명시하지 않아도 된다. fetch() 함수로 데이터를 요청하고, then() 함수로 응답결과를 인수로 전달받게 된다. //id가 1인 데이터 조회 fetch("https://jsonplaceholder.typicode.com/posts/1") //서버 요청에 대한 응답이 왔을때 실행, 응답받은 데이터 : 문자열, response.json() : 문자열을 json으로 변환 .then((response) => response.json()) //변환된 json 데이터를 매개변수로 전달 .then((json) => console.log(json)); 참고자료 javascript-project [도서] - 바닐라 ..