Promise 언젠가 해결할 것이라는 약속 /* new Promise ((resolve, reject) => {}) Resolve -> 해결, 성공 - > then Reject - 거절, 실패 -> catch */ function sayHello2(name){ return new Promise((resolve,reject)=>{//이건 안 바꾸는게 좋음 setTimeout(()=>{ console.log(name+"님 안녕하세요") resolve("서울") },3000) }) } sayHello2("Frank") .then((seoul)=>console.log(seoul+" 로 안녕히가세요")) //resolve의 output을 받아서 input으로 쓸 수 있다. /* 실행결과 Frank님 안녕하세요 서..

비동기성 실행 결과를 순서대로 처리하지 않음 setTimeout(()=> {console.log("안녕하세요")},2000); console.log("안녕히 가세요");-> 안녕세요가 먼저 나온다. 2초 기다리지 않음. 리액트가 비동기성이 필요한 이유는 리액트가 다음과 같은 특성을 갖기 때문 인터넷 속도 의존 유저 인터랙션 속도가 느려도 인터랙션은 되어야 한다. 하지만 결과 순서가 뒤죽 박죽임. 이를 해결하기 위한 게 바로 콜백 결과가 끝난 후 호출되는 함수 function sayHello(name,byeCallback){ setTimeout(()=>{ console.log(name+" 안녕하세요.") byeCallback() },2000); } sayHello("Mike",()=>console.log(..

background-image 위에 div를 한겹 올려준다는 느낌으로 코딩하면 된다. 예시) https://academy.nomadcoders.co/ background-image 원본은 이렇게 밝다. css의 z-index와 html의 div를 이용해 이미지를 어둡게 만들 수 있다. Learn to code by cloning real services Over 6,000+ students are cloning Instagram, Bitcoin, Netflix, Uber, and More! Start Coding Like a Boss .bg{ background-color:rgba(0, 0, 0, 0.5); /*살짝 투명한 검정으로 배경색*/ width:100%; height:550px; position..

어느 사이트든 흔히 볼 수 있는 구성이지만 , css 초심자들이 많이 헤매는 부분이기도 하다. 한번 알아놓으면 써먹기 좋다. 예시) https://academy.nomadcoders.co/ 이대로 똑같이 html과 css로 만들어보면 코드는 아래와 같다. All Courses EN Reviews login Sign up *{ padding:0px; margin:0px; } a{ text-decoration: none; color:#ffffff; } .btn{ background-color: #2359a5; border-radius:30px; padding:7px 20px; } img{ float:left; width:200px; margin-left:20px; margin-top:5px; } nav{ b..