728x90

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

상태관리 라이브러리 Redux

Redux는 자바스크립트 어플리케이션에서 예측 가능한 상태의 관리를 해주는 container이다. 상태 관리를 위한 전역 상태의 저장소를 제공한다. Redux는 react의 하위 라이브러리가 아니고, 자바스크립트 어플리케이션이라면 사용이 가능하다. 컴포넌트간의 정보 공유가 필요할 때, 복잡성을 줄이기 위해서 상태관리 라이브러리인 redux를 사용한다. // NPM 으로 설치 npm install redux // Yarn 으로 설치 yarn add redux 참고 자료 : https://ko.redux.js.org/introduction/getting-started Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org Redux의 세 가지..

  • format_list_bulleted JavaScript
  • · 2022. 11. 12.
  • textsms
text-shadow 적용하기

text-shadow 적용하기

html의 텍스트를 강조하기 위한 스타일로 text-shadow를 사용할 수 있다. text-shadow : none | text-shadow : text-shadow : hi // css .hi { text-shadow: 1px 1px 5px red; } 참고 자료 : https://developer.mozilla.org/ko/docs/Web/CSS/text-shadow text-shadow - CSS: Cascading Style Sheets | MDN text-shadow CSS 속성은 텍스트에 그림자(shadow)를 추가합니다. 텍스트와 그 장식에 적용 할 쉼표로 구분 된 그림자 목록을 허용합니다. 각 그림자는 요소, 흐림 반경 및 색상의 X 및 Y 오프셋 조합으로 developer.mozilla..

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

간단한 calc() 사용하는 법

calc는 css함수로 css 속성값에 계산식을 지정할 수 있게 해준다. 더하기, 빼기, 곱하기, 나누기 연산이 가능하다. 연산자 좌우에 공백이 필요하다. 0으로 나누면 HTML 구문분석기에서 오류가 발생한다. 곱셈과 나눗셈에는 피연산자에 하나 이상의 숫자가 있어야 한다. 중첩해서 사용할 시 내부의 calc()은 ()로 취급된다. width: calc(50% - 8px); scss에서 calc 내부에 변수를 넣고 싶다면, #을 사용해야 한다. $len: 8px; width: calc(50% - #{$len});

  • format_list_bulleted JavaScript
  • · 2022. 11. 1.
  • 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
728x90