본문 바로가기
SMALL

JavaScript135

Javascript) async & await (await fetch, 랜덤 강아지/고양이 사진 추출) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. async - ES2017에 추가된 일반 함수의 프라미스화를 지원하는 문법 HTML 코드 async Javascript 코드 Promise화 하는 방법 ① new Promise 객체 반환 btn1.addEventListener('click', () => { zoo() .then((value) => console.log(value)) }); const zoo = () => new Promise((resolve) => resolve(10)); Promise 객체를 반환하고 then에서 콜백함수를 실행해주어 10을 출력해줍니다. ② Promise.resolve() 이용 btn1.addEventL.. 2022. 6. 10.
Javascript) axios (랜덤 강아지/고양이 사진 추출) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. axios - 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 https://cdnjs.com/libraries/axios axios - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Promise based HTTP client for the browser and node.js - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open.. 2022. 6. 10.
fetch) fetch란? (Response.json(), 정보 추출하기) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. fetch - XMLHttpRequest의 callback 방식을 개선해 Promise를 통한 then절에서 응답 결과를 처리할 수 있음 HTML 코드 fetch 기본 Javascript 코드 btn1.onclick = () => { console.log( fetch(USER_URL) ) }; Promise 객체가 출력되는 것을 확인할 수 있으며, Response를 리턴하므로 then절로 callback을 전달하게 되면 Response가 출력될 것입니다. btn1.onclick = () => { console.log( fetch(USER_URL) .then((response) => { co.. 2022. 6. 10.
Javascript) Promise (기본, setTimeout, Promise chain) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. Promise - 기존 callback 함수를 통한 비동기처리를 개선하기 위한 문법 - producer/consumer 코드를 연결 * producer (비동기처리가 포함된 코드) * consumer (비동기 완료 후 실행할 코드) 속성 - status - pending → fulfilled (이행) / rejected (거부) - result - undefined → value (이행 시) / error 객체 (거부 시) Promise 기본 HTML 코드 basics Javascript 코드 - resolve : 이행(정상처리) 시 호출할 콜백함수 → then에서 전달 - reject :.. 2022. 6. 3.
Javascript) 동기식 / 비동기식 - Timer API, DOM 관련 이벤트 처리, DOM 연속 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 동기 (synchronous) / 비동기 (asynchronous) 비동기 - Javascript는 싱글 쓰레드로 진행 - 비동기처리함수(Timer API, DOM 관련 이벤트 처리, Ajax 요청) 호출 시, 바로 처리되는 것이 아닌 백 그라운드에 처리 위임 - 동기함수의 모든 처리가 끝나면 (call stack이 비워지면), 실행 * heap : 객체 저장 공간 * call stack : 함수 실행 스택 * Web APIs * Callback Queue * Event Loop 실행 과정 눈으로 보기 http://latentflip.com/loupe/?code=CgoKCgokLm9uKCd.. 2022. 6. 2.
Javascript) 정규표현식(4) - 수량자(*, +, ?, {}), Look Around, 비밀번호 유효성 검사 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 수량자 (Quantifier) - * + ? HTML 코드 수량자 * + ? 수량자 {} Javascript 코드 a* - a가 0개 이상 const SUBSTITUETE = "$&"; btn10.onclick = () => { const str = "aabc abc bc"; area10.innerHTML = `${str.replace(/a*b/g, SUBSTITUETE)} `; }; a가 0개 이상 뒤에 b가 나오는 단어들을 매칭하였으므로 a가 2개인 'aab', a가 1개인 'ab', a가 0개인 'b'가 마킹처리 되었습니다. a+ - a가 한 개 이상 일 때 const SUBSTITU.. 2022. 5. 31.
LIST

티스토리툴바