await
-
[고양이 사진 검색 사이트] 검색 페이지 - 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] 모던자바스크립트 딥 다이브 7일차 (완독)웹/JavaScript 2023. 1. 31. 09:11
42. 비동기 프로그래밍 실행 컨텍스트 스택 - 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이를 콜 스택 또는 실행 컨텍스트 스택이라고 부른다. - 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다. - 싱글 스레드 방식으로 동작하여 작업 시간이 걸리는 테스크를 실행할 경우 , 블로킹(작업 중단)이 발생한다. so, 동기 처리 단, 타이머 함수인 setTimeout과 setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다. 44. REST API REST API 구성 - 자원, 행위, 표현 (REsource, verb, represenTations)의 3가지 요소로 구성된다. - URI는..
-
[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..