JS20 [JavaScript] fetch() fetch() 함수란? HTTP 요청 전송 기능을 제공하는 Web API 입니다. 데이터를 받아오는 경우에 사용 됩니다. fetch("https://jsonplaceholder.typicode.com/posts/1") .then((response) => response.json()) .then((data) => console.log(data)) fetch('URL')은 웹 브라우저에 'URL요청' 이라는 의미이고, .then은 '요청이 끝나고나서 실행' 이라는 의미 입니다. 2023. 8. 1. [JavaScript] Promise Promise란? Promise는 자바스크립트 비동기 처리에 사용되는 객체입니다. 비동기 처리란 예를 들어 서버에 데이터를 요청했는데 해당 데이터가 오기도 전에 화면에 데이터를 표시하는것 입니다. 이런 문제점을 해결하기 위한 방법 중 하나가 Promise입니다. Promise 코드 아래는 ajax 코드입니다. function getData(callbackFunc) { $.get('url 주소/products/1', function(response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function(tableData) { console.log(tableData); // $.get()의.. 2023. 8. 1. [JavaScript] 비동기와 콜백 함수 비동기 처리란? javascript의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성입니다. 비동기 처리의 예시 (1) setTimeout() setTimeout()은 Web API의 한 종류로 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행합니다. // #1 console.log('Hello'); // #2 setTimeout(function() { console.log('Bye'); }, 3000); // #3 console.log('Hello Again'); /* 실행결과 */ Hello Hello Again Bye setTimeout()은 비동기 방식으로 실행되기 때문에 3초를 기다렸다가 다음 코드를 수행하는.. 2023. 8. 1. [JavaScript] async & await async & await 함수란? 비동기 처리 방식인 콜백 함수와 Promise의 단점을 보완하는 함수 async function 함수명() { await 비동기_처리_메서드_명(); } async는 function 앞에 위치합니다. 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다. async async function f() { return 1; } f().then(alert); // 1 function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환합니다. Promise가 아닌 값을 반환하더라도 이행 상태(resovled)의 Promise 로 값을 감싸 반환합니다. 명시적으로 Promise를 반환하는것도 동일합니다. async function f.. 2023. 8. 1. [React] Hooks - useContext 정의 useContext는 컴포넌트에서 context를 읽고 구독할 수 있게 해주는 훅 const value = useContext(SomeContext) Reference useContext (SomeContext) 컴포넌트의 최상위 레벨에서 useContext를 호출하여 context를 읽고 구독합니다. import { useContext } from 'react'; function MyComponent() { const theme = useContext(ThemeContext); // ... Parameters SomeContext : context자체는 정보를 보유하지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류 Returns useContext는 호출하는 컴포넌트에 대한 conte.. 2023. 7. 31. [JS] wScratchPad.js 사용하기 📢 wScratchPad.js 플러그인 wScratchPad.js 는 스크래치 카드 효과를 나타낼 수 있는 플러그인 입니다. 바로 적용 가능한 CDN링크를 찾지 못해 아래 wScratchPad.js GitHub에서 플러그인 파일을 다운받아 사용하는걸 추천합니다. https://github.com/websanova/wScratchPad GitHub - websanova/wScratchPad: jQuery Scratch Pad Plugin jQuery Scratch Pad Plugin. Contribute to websanova/wScratchPad development by creating an account on GitHub. github.com 📢 사용법 및 옵션 See the Pen Untitled .. 2023. 7. 11. 이전 1 2 3 4 다음
