괘종소리 세기

프로젝트 중 반복문을 돌면서 비동기 요청을 해야 하는 상황이 있어서 찾아보았습니다.타입을 작성하는 게 이해가 쉬울 것 같아서 TypeScript로 작성하였습니다.  1. forEach무조건 비동기적으로 처리됨.const nums: number[] = [1, 2, 3];nums.forEach(num => { axios.get(`127.0.0.1:8080/${num}`) .then(() => console.log(num));});요청 순서는 1, 2, 3의 순서지만 비동기적이므로 응답이 먼저 오는 순서대로 로그가 찍힌다.async나 await로도 동기 처리가 되지 않는다.   2. for 또는 for-ofasync와 await을 사용함으로써 순서대로 처리가 가능함. 아래 코드에서는 for-of 문..

클로저(Closure)를 응용하여 반복되는 사전작업(변수 정의)을 피하는 방법을 사용해 본다.// 함수 호출 시마다 a, b라는 변수가 계속 정의된다.const compare = (x) => { const a = 10; const b = 20; return x > a && x > b ? "bigger" : "smaller"}console.log(compare(30));console.log(compare(5));↓// 클로저를 이용한다.// a와 b의 값은 compare 내부 스코프에 한 번 저장된다.// 그러면 return 안의 anonymous 함수에서 compare의 렉시컬 환경에서 a, b의 값을 참조해 온다.const compare = (x) => { const a = 10;..

이전에 React의 setInterval을 사용하면서 발생한 문제와 그 해결법에 대해 포스팅을 했었습니다. (아래 포스트 참고) [React/TypeScript] setInterval 안에서 state가 변경되지 않을 때 (useInterval 사용법) // Timer.tsx const [currentSeconds, setCurrentSeconds] = useState(0); const [isReverse, setIsReverse] = useState(false); useEffect(() => { setInterval(() => { if (!isReverse) { setCurrentSeconds(prevState => prevState + 1); } else { setCurrentSeconds(prevS..

자바스크립트는 위에서부터 아래로 순차적으로 코드를 해석하는 인터프리터(Interpreter) 언어입니다. 하지만 모든 코드가 순차적으로 동작하는 건 아닌데요, 그 이유는 호이스팅(Hoisting) 이라는 알고리즘이 정의된 함수와 변수들을 모두 찾아서 먼저 선언시키기 때문입니다. (※ 코드 위치 자체가 끌어올려지는 건 아니며, 렉시컬 환경(Lexical Environment)에 등록되는 것입니다. 렉시컬 환경에는 어떤 스코프 범위에서 사용될 변수와 함수들이 저장되며, 스코프의 개수만큼 생성됩니다. 예를 들어, 함수가 하나 있다면 그 함수 내부의 렉시컬 환경, 그리고 함수 밖의 전역 렉시컬 환경까지 총 두 개가 생깁니다.) 아래의 코드에서는 함수 선언문으로 greet()라는 함수를 만들었습니다. greet(..

ES6이란 ECMAScript의 버전 중 가장 최신 버전을 말합니다. ES1이 제일 초기 버전이고 지금은 ES6까지 나온 상태죠. 제가 개발을 시작한 건 ES6이 상용화된 이후라서 어? 이게 ES6에 추가된 문법이었구나 하고 알아가는 시간이 되었습니다. JavaScript Versions W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 위 링크에 들어가시면 ES6에는 어떤..

함수 a()의 파라미터로 b()라는 함수를 줄 때 b()를 콜백 함수라고 한다. 콜백 함수는 보통 비동기 작업 시 함수의 실행 순서를 지정해주기 위해 사용한다. 그런데 비동기 작업이 여러 개일 때 이들의 순서를 모두 콜백 함수로 지정하려고 한다면 계속 중첩되어, 코드가 알아보기 힘들어질 것이다. function test(message, callback) { axios.get("http://127.0.0.1:8080").then((response) => { callback(message); }); } test("1", function(result) { console.log(result); test("2", function(result) { console.log(result); test("3", functi..