FrontEnd (96) 썸네일형 리스트형 async, await 2 참고: https://www.youtube.com/watch?v=Uh8u20MD978&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=17 const f1=()=>{ return new Promise((resolve, reject)=>{ setTimeout(() => { resolve("1st order is completed"); }, 1000); }); } const f2=(message)=>{ console.log(message); return new Promise((resolve, reject)=>{ setTimeout(() => { resolve("2nd order is completed"); // reject(new Error("Error occurred ba.. async, await 참고: https://www.youtube.com/watch?v=Uh8u20MD978&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=17 async, await 를 사용하면 promise의 then메서드를 체인형식으로 사용하는 것보다 가독성이 좋아짐. 기본적으로 함수선언문 앞에 async를 붙여주면 promise를 반환함(단, 물론 반환값이 없으면 아무것도 반환하지 않음). await 키워드는 반드시 async 함수 안에서만 사용할 수 있음. 일반함수에서 사용하면 에러 발생함. await키워드 다음에는 Promise객체가 옴. 그 Promise가 처리 될때까지 기다림(기다린다는 것은 setTimeout과 같은 딜레이 함수가 종료될때까지 기다린다는 것을 의미). asyn.. 프로미스(Promise)2 https://www.youtube.com/watch?v=3Ao3OroqQLQ&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=16 const f1=(callback)=>{ setTimeout(() => { console.log("1st order is completed"); callback(); }, 1000); }; const f2=(callback)=>{ setTimeout(() => { console.log("2nd order is completed"); callback(); }, 3000); } const f3=(callback)=>{ setTimeout(() => { console.log("3rd order is completed") callback(); },.. Java와 JS의 동기적 비동기 구현방식 참고: https://velog.io/@pllap/Java%EC%97%90%EC%84%9C%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D 간단히 요약하면 비동기 구현을 한다고 말로는 표현하지만 두 언어 모두 그 안에는 동기함수인 콜벡함수가 공통적으로 쓰인다. 다만 문법의 이름이 다르다는 것이다. JS는 Promise, async, await라는 문법이 있고 Java에는 Thread, ExecutorService, CompletionHandler등등이 있는 것이다. 비동기 처리한다고 하여 순수히 비동기로 구성하는 것이 아니다. 글에서 나와 있다시피 비동기로 작동하는 코드 사이에 동기 함수를 끼워넣어서 코드.. 프로미스(promise) https://www.youtube.com/watch?v=3Ao3OroqQLQ&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=16 콜백함수란(callback)? 어떤 일이 완료된 후 실행되는 함수(=어떤 행위에 뒤이어 연이어 실행되는 함수). 즉, resolve는 성공한 후 실행되는 함수이므로 콜백함수이고 reject역시 실패한 후에 실행되는 함수이므로 콜벡함수이다. 여태까지한 코드(위의 것들)는 판매자의 코드임. =========================================================================================== 지금부터는 소비자의 코드. const pt=new Promise((resolve, reject.. JSX문법에 대한 몇가지 주의 사항 아래 문법사항은 C:\FrequentlyUsedFiles\ReactProjects\react-webgame 구구단 파일에서 가져온 것임 반드시 기억할 것이 우리가 만든 컴포넌트(예를들면 위의 LikeButton)는 반드시 첫문자를 대문자로 기록하고 기본적으로 제공되는 엘러먼트는 반드시 소문자로 해준다. html 같은 경우 대문자도 되지만 xml은 html의 조상격으로 html보다 까다롭다. 이렇게 까다로움에서 생긴 문법이 또 하나 있는데 input 태그에서 반드시 닫는 열린태그 맨 뒤에 닫는 태그의 의미로 /를 꼬옥~ 기입해 주어야 함. 안 붙이면 에러남. 그리고 js코드 부분은 반드시 중괄호로 감싸야한다!!!!!!! 따라서 {this.setState({liked: true});}} obj={a:'b',.. <button>에 함수를 적용하는 두 가지 방법 자바스크립트에는 동일한 작업을 수행하는 여러 가지 방법이 있다. 여기서는 html의 button태그에 함수를 적용시키는 각기 다른 방법에 대해 살펴보고자 한다. 1. html 문법내에 JS코드를 넣어서 함수를 적용하는 방법 shinyks Change to Blue const $name=document.querySelector(".name"); function changeColor(){ $name.style.color="blue"; } 2.순수 html을 사용하여 html안에는 js코드에 사용되지 않게 하는 방법 shinyks Change to Blue const $name=document.querySelector(".name"); const $button=document.querySelector("but.. React launch! (매우중요) 참고: https://www.youtube.com/watch?v=6GECT2Jrr_g&t=572s https://www.youtube.com/watch?v=5lgITNI0ZJo&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=3 리엑트는 특별한 존재가 아닙니다. 웹브라우저가 이해할 수 있는 언어는 결국 HTML, CSS, JS뿐입니다. 화면을 구성하는 것은 HTML, CSS일 뿐이고 그에 대한 동작은 자바스크립가 해주는 것입니다. React는 결국 자바스크립트일 뿐입니다. React는 JS로 HTML, CSS를 만들어 내는 존재일 뿐입니다. React로 작업해도 그 결과물은 html, css, JS가 나와야 합니다. 그래야만 브라우저가 코드를 읽고 화면을 그릴수 있는 것.. 이전 1 ··· 6 7 8 9 10 11 12 다음
