본문 바로가기

전체 글

 (381)
프로미스(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가 나와야 합니다. 그래야만 브라우저가 코드를 읽고 화면을 그릴수 있는 것..
JS 유용한 배열 메서드 정리. forEach, map, reduce, find, filter 등등 // forEach는 map과는 다르게 반환값이 없음. 따라서 return해도 undefined가 나옴. let answer=[3,2,1,4]; let attempt=[1,2,3,4]; let strike=0; let ball=0; for(let i=0;i-1){ if(idx==i){ strike+=1; continue; } ball+=1; } } attempt.forEach((value, idx)=>{ let index=answer.indexOf(value); if(index>-1){ if(idx==index){ strike+=1; } else{ ball+=1; } } }); let arr2=[1,2,3,4,5]; /* 아래 세 표현식은 모두 같은 표현식이다. 주의할 것은 중괄호와 return문이 붙어..
Node.js) BOJ 20040번 : 사이클게임 https://www.acmicpc.net/problem/20040 const fs=require('fs'); const filepath=process.platform==='linux'?'dev/stdin':'./input.txt'; const input = fs.readFileSync(filepath).toString().trim().split("\n"); input[0]=input[0].split(" ").map(n=>+n); const node=input[0][0]; const times=input[0][1]; class Edge{ constructor(from, to){ this.from=from; this.to=to; } } class UnionFind{ constructor(n){ this.p..

티스토리툴바