async
-
[고양이 사진 검색 사이트] 검색 페이지 - autofocus, Loading, api 연결, try & catch, async, await,img titleReact/과제 테스트 2023. 8. 7. 13:21
프로그래머스 과제 테스트 준비 프로그래머스는 html,css, javaScript이기 때문에 실질적으로 도움이 될 만한 React로 준비했다. 테스팅에 목적이 아닌 학습을 위한 구현자료로써, 디자인은 하지 않았고 기능에 초점을 두었다. 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🐇 검색 페이지 🥕 페이지 진입 시 검색창(input)에 focus처리 ※ autofocus autoFocus속성은 일반 HTML에서와 같은 방식으로 작동합니다. css에는 input autofocus가 있다. 하지만, 입력이 여러 개인 경우autoFocus한 페이지에autoF..
-
[Javascript] HTML에 js 로드, querySelector, window.onload(),async, defer웹/JavaScript 2023. 1. 14. 15:27
index.html 제대로 파는 자바스크립트 변경 전... // 콘솔에서 실행한 뒤 결과 확인 document.querySelector('span').innerText = '텍스트 변경됨'; 이 스크립트를 위의 HTML 파일에 로드하여 사용하는 방법 1. 헤드에 스크립트로 로드 index.html 제대로 파는 자바스크립트 변경 전... script.js document.querySelector('span').innerText = '텍스트 변경됨'; 스크립트 동작하지 않음 - 스크립트 로드 시점에는 body 요소가 로드되지 않았음 스크립트의 크기가 클 경우 그 아래 요소들의 로드가 지연됨 - 동기적 로드 2. body 요소들 아래에 로드 index.html 제대로 파는 자바스크립트 변경 전... scrip..
-
[Javascript] 비동기 프로그래밍, fetch, await, async웹/JavaScript 2023. 1. 14. 15:15
🌐 예제용 서버 요청 경기 결과 https://showcases.yalco.kr/javascript/mockserver/race-result 각 선수들 정보 https://showcases.yalco.kr/javascript/mockserver/runners/{1~5} 학교 정보 https://showcases.yalco.kr/javascript/mockserver/schools/{1~3} Fetch API Web API에서 제공하는 기능 - 즉 브라우저에서 제공 네트워크로부터 리소스를 받아오기 위한 다양하고 강력한 기능들 제공 👉 MDN 문서 보기 보다 오래된 방법: 🔗 XMLHttpRequest fetch 메서드 네트워크 통신으로 원격에 요청을 보내고 답을 받아오는 프로미스를 반환 👉 MDN 문서 보..
-
[Javascript] async & await웹/JavaScript 2023. 1. 14. 14:33
async 함수 프로미스를 기반으로 동작 마치 동기 코드처럼 직관적으로 코딩을 할 수 있음 👉 MDN 문서 보기 function getMult10Promise (number) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(number * 10); }, 1000); }); } async function doAsyncWorks () { const result1 = await getMult10Promise(1); console.log(result1); const result2 = await getMult10Promise(2); console.log(result2); const result3 = await getMult10P..