ky와 got으로 API 호출하기

ky는 브라우저, got은 node.js 환경에서 사용된다. axios에 비해서 가볍다. (다만, axios는 서버/클라이언트 모두 호환된다.) import React, {useEffect, useState} from 'react'; import ky from 'ky'; export default function App() { const [data, setData] = useState(null); useEffect(() => { ky.get('url 주소').then((response) => (setData(response))) }, []); return ( {JSON.stringify(data)} ); } React에서 ky를 사용하여 post 요청을 보낼 수 있다. json 객체 내부에 json 데이..

• format_list_bulleted JavaScript
• · 2022. 11. 15.
• textsms

HTML에 영상 삽입하기

영상을 삽입하기 위한 태그로 iframe이나 video를 사용할 수 있다. 유튜브 링크등 URL로 영상을 띄우기 위해서는 iframe을, 로컬의 영상을 사용하기 위해서는 video를 사용할 수 있다. video는 브라우저가 지원하는 여러 타입의 확장자를 지원하기 위해서 여러 옵션의 영상이 들어갈 수 있다. 지원되는 비디오가 없습니다. // iframe 전체 크기로 설정 const styleObj = { overflow: "hidden", overflowX: "hidden", overflowY: "hidden", height: "100%", width: "100%", position: "absolute", top: "0px", left: "0px", right: "0px", bottom: "0px" } ~..

• format_list_bulleted 기타
• · 2022. 10. 30.
• textsms

forEach와 async await (for of 사용하기)

🥝 forEach는 promises를 기다리지 않기에 async await 구문 역시 동작하지 않는다. const setTimeoutPlus = (num1, num2) => { return new Promise((resolve, reject) => { try { setTimeout(() => { resolve(num1 + num2); }, 3000); } catch (e) { reject("ERROR", e); } }) } const asyncForEachFuc = (data) => { let tmp = []; console.log("start", tmp); data.forEach(async function(element,index,array){ tmp.push(await setTimeoutPlus(el..

• format_list_bulleted JavaScript
• · 2022. 10. 29.
• textsms

FormData 객체, Blob 객체

FormData 객체는 서버로 바이너리 데이터를 전달할 때 사용될 수 있다. Blob 객체는 파일 데이터를 저장할 수 있다. 클라이언트에 바이너리 데이터를 저장할 때, blob 객체에 저장할 수 있다. 서버에서 바이너리 데이터를 받기 위해서는 responseType을 blob으로 설정할 필요가 있다. const obj = {hello: 'world'}; const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'}); const url = window.URL.createObjectURL(blob); // 파일을 다운로드하는 url 서버에서 blob 타입으로 파일을 받아 해당 파일을 다운로드하는 URL을 생성할 수도 있다...

• format_list_bulleted JavaScript
• · 2022. 10. 26.
• textsms

자바스크립트 깊은 복사 structuredClone()

Object.assign()과 spread operator, slice()를 사용한 복사는 얕은 복사이다. 깊은 복사를 위해서 JSON.parse, JSON.stringify를 사용할 수 있으나 한게점이 있다. JSON.parse, JSON.stringify를 사용하면, 객체 내부의 함수 등 일부 타입의 데이터가 소실될 수 있다. 이런 문제점을 해결하는 새로운 문법이 structuredClone이다. const a = [1, 2, 3]; const b = [...a]; console.log(a, b); // [1, 2, 3] [1, 2, 3] const c = {a: "a", b: "b", c: "c"}; const d = {...c}; console.log(c, d); // { a: "a", b: "b..

• format_list_bulleted JavaScript
• · 2022. 10. 25.
• textsms