json

React : AJAX로 서버와 통신하기 (post, 동시에 요청 여러개 날리기, fetch)

POST 요청 하는 법 서버에 데이터를 보내기 위해서는 아래처럼 작성하면 된다. axios.post('URL', {name : 'kim'}) 동시에 AJAX 요청 여러개 날리기 동시에 여러 url로 ajax 요청을 날리려면 아래처럼 작성하면 된다. 그 아래 then()을 붙이면 둘 다 완료되었을 시 코드를 실행한다. Promise.all( [axios.get('URL1'), axios.get('URL2')] ) .then(()=>{}) fetch axios 라이브러리를 사용하면 자동으로 JSON을 object/array 형태로 변환해주지만, 그냥 fetch를 쓰면 변환해줘야 한다. fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )..

Level 3 : 9 장바구니버튼 구현하기(localStorage, array, forEach, JSON)

9. 장바구니 기능 만들기 조건 장바구니 버튼을 누르면 localStorage에 배열 형태로 상품이름이 담기고, cart.html을 따로 만들어 해당 html에 상품이 뿌려지도록 만들기 풀이 상품리스트 // 여러개의 장바구니 버튼들을 buttonCarts 변수로 선언 let buttonCarts = document.querySelectorAll('.btn-cart'); // buttonCarts 안의 각각의 buttonCart elements들에게 함수를 실행 buttonCarts.forEach(function(buttonCart){ // buttonCart를 클릭하면.. buttonCart.addEventListener('click', function(){ // localStorage의 cart를 ke..

Level 3 : 5~8 (ajax, json, array, sort)

5. 카드레이아웃에 데이터를 불러와 카드 3개 생성하기 원시자바스크립트버전 let cardWrap = document.querySelector('.row'); let products = [ { id : 0, price : 70000, title : 'Blossom Dress' }, { id : 1, price : 50000, title : 'Springfield Shirt' }, { id : 2, price : 60000, title : 'Black Monastery' } ]; products.forEach(function(a, i){ let card = ` ${products[i]['title']} ${products[i]['price']} ` cardWrap.insertAdjacentHTML('bef..

[드림코딩] JSON to Object (parse)

JSON to Object parse(json) const coder = { name: 'Noran', language: 'Javascript', height: null, birthDate: new Date(), sayhi: () => { console.log(`Hello, I'm ${name}!`); }, }; json = JSON.stringify(coder); const obj = JSON.parse(json); console.log(obj); //{name: 'Noran', language: 'Javascript', height: null, birthDate: '2022-07-12T03:03:18.870Z'}birthDate: "2022-07-12T03:03:18.870Z"height: nulll..

[드림코딩] Object to JSON (stringify)

Object to JSON stringify(obj) stringify는 데이터를 string타입으로 변환한다. let json = JSON.stringify(true); console.log(json); //"true" let json = JSON.stringify(['Noran','Paran']); console.log(json); //["Noran","Paran"] 한개의 single quote가 아닌 double quote로 바뀐 것을 볼 수 있다. 이것이 JSON의 규격사항이다. 또한 아래처럼 함수나 javascript에만 자체적으로 들어있는 데이터도 JSON에 포함되지 않는다. const coder = { name: 'Noran', language: 'Javascript', height: nu..

[드림코딩] JSON이란?

JSON JavaScript Object Notation JSON의 Object 또한 javascript처럼 {key: value}로 이루어져 있다. 데이터를 주고받을 때 쓸 수 있는 가장 간단한 format이다. C,C++,C#,JAVA,Python,PHP 등의 거의 대부분의 언어들은 모두 JSON으로 serialization(직렬화)된 object를 다시 그 언어에 맞게 object로 변환 및 다시 JSON으로 serialization(직렬화)할 수 있다. 출처 : 드림코딩 https://www.youtube.com/@dream-coding / MDN https://developer.mozilla.org/ko