[Javascript] - 자바스크립트에서의 비동기 처리

# JavaScript의 비동기 내장함수 종류 자바스크립트는 단일 스레드(Single-threaded)언어임에도 불구하고, 시간이 오래 걸리는 작업들을 효율적으로 처리하기 위해서 다양한 비동기 처리를 지원하는 내장함수를 가지고 있다. 1. Callback 함수 : setTimeout(callback, delay), setInterval(callback, interval) function delay(callback) { setTimeout(function() { console.log('2초 후 실행'); callback(); }, 2000); } console.log('시작'); delay(function() { console.log('종료'); }); console.log("1초지남"); Callback..

• format_list_bulleted JavaScript
• · 2023. 11. 12.
• textsms

javascript - ... (스프레드) 연산자와 _ (언더스코어)변수

import React, {useState} from 'react'; import "./Pagination.css" function Pagination({buttonRange, totalCount, setPage}) { const [selectedPage, setSelectedPage] = useState(1); const handleClick = (pageNum) => { setPage(pageNum); setSelectedPage(pageNum); } return ( {/* 이전페이지 버튼 */} {buttonRange[0] > 1 && ( setPage(buttonRange[0] - 1)}>Previous)} {/* 숫자버튼 생성 */} { [...Array(buttonRange[1] - butto..

• format_list_bulleted JavaScript
• · 2023. 10. 3.
• textsms

Node.js로 js파일 실행시키기

본인이 작업하는 환경에 node.js가 설치되어있다면 굳이 크롬, 엣지 등과 같은 브라우저의 도움없이도 js파일을 실행시킬 수 있다. 아래와 같은 javascipt파일이 있다. 간단한 생성자 함수 예제 코드로 실행되면 mike, jane, tom이 console로 출력되어야한다. 위와같이 node 실행시킬js파일명.js 으로 실행시켜서 확인해볼 수 있다.

• format_list_bulleted JavaScript
• · 2023. 8. 25.
• textsms

JS - not 연산 or 연산을 통한 null 값 체크

개발을 하면서 데이터를 다루다보면 null값을 체크해야하는 상황이 정말 잦다. 그런데 회사제품의 JS 코드를 보면서 not 연산자와 or 연산자로 null값을 체크하고 있는 것을 보았다. 짧고 깔끔하게 작성되는 것을 보고 글을 이것을 정리해보고자 남긴다. 코드를 통해 살펴보자. 1. not 연산 let other = new Array(10); let temp1 = null; let temp2 = 10; other.push(!temp1 ? 0 : temp1); other.push(!temp2 ? 0 : temp2); console.log(other); temp1은 null 값인데, JS에서는 null값은 false로 취급한다. 다만 부정연산자가 앞에 붙어있으니 !temp1 true를 반환한다. temp1은..

• format_list_bulleted JavaScript
• · 2022. 5. 18.
• textsms

JS - 다운로드 버튼을 만드는 방법

1. a 태그 사용 이 방법은 가장 간단하며, HTML의 태그에 href 속성으로 다운로드할 파일의 경로를 지정하고, download 속성을 추가하여 구현할 수 있다. 보통 정적 파일을 다운로드하는 경우에 적합하다. $("#btn_SaveExcel").on('click', function(e) { var a = document.createElement('a'); a.href = uri + base64(format(template, ctx)); a.download = "test(" + document.querySelector("#report_period_text").innerHTML + ")"; a.click(); //just in case, prevent default behaviour e.prevent..

• format_list_bulleted JavaScript
• · 2022. 5. 2.
• textsms

JS - Call Stack

Call Stack은 자바스크립트가 함수 실행을 핸들링하는 방법 중 하나이다. 자바스크립트는 실행해햐하는 함수들을 Stack 위에 올린다. 자바스크립트는 함수를 스택위에 올려놓고 합수가 실행이 끝나면 스택에서 제거한다. 이를 간단한 예제를 통해서 확인하면 다음과 같다. function three() { console.log("i love js"); } function two() { three(); } function one() { two(); } function zero() { one(); } zero(); 위 코드를 실행한 뒤 크롬 개발자 도구를 통해서 call stack을 하나하나 따라가보도록하자. 먼저 가장먼저 실행되는 zero() 함수가 callStack에 들어가 있다. 그다음 zero()에서 호..

• format_list_bulleted JavaScript
• · 2022. 4. 30.
• textsms