(3) Asynchronous JavaScript - 비동기 함수들의 예시

비동기 함수 복습 - setTimeout()setTimeout(callback, delay); setTimeout() 함수의 동작은 다음과 같다.setTimeout() 이전에 있는 코드 실행setTimeout() 함수 실행: delay 만큼 기다리는 타이머를 시작setTimeout() 이후에 있는 코드 실행delay가 지나면 callback 실행자바스크립트에서 많이 사용되는비동기 함수 4가지(setInterval,addEventListener,useEffect,get() 함수가 있다.useEffect,get()를 제외한어떤식으로 비동기적으로 작동하는지 확인해보자setInterval() 함수setInterval(callback, interval)setTimeout() 함수와 비슷하며 시간 간격을 두고콜백을..

• format_list_bulleted JS
• · 2024. 12. 31.
• textsms

(2) Asynchronous JavaScript - 콜백(callback)과 비동기 함수(async function)

■ 비동기 함수 (async function)비동기 함수란 함수의 내용을 끝까지 쭉 실행하지 않고 중간에 다른 작업을 처리하다가 다시 돌아와서 마무리하는 함수를 뜻한다. 콜백은 비동기 프로그램이에 유용하게 쓰이며 이 두 프로그램의 연관성에 대해 알아보자비동기 프로그램 - setTimeout 함수자바스크립트에는 특정 시간이 지난 다음에 어떤 함수를 실행해 주는 setTimeout 이라는 함수가 있으며다음과 같이 사용한다.setTimeout(()=> console.log('hello'),3000);첫 번째 아규먼트로 콜백을 받는 상황에서 setTimeout 함수는 3000ms 이며3초가 지나면 콜백을 실행해주는 코드이다.실제로 실행해보면 아무 동작도 없다가 3초 후에 'hello'가 출력되는 것을 확인할 수..

• format_list_bulleted JS
• · 2024. 12. 30.
• textsms

(1) Asynchronous JavaScript - 비동기 자바스크립트의 콜백(callback)

코드 중에서 실행하는 데 비교적 오래 걸리는 것들이 존재할 수 있다.예를 들어 코드로 웹 리퀘스트(Web Request)를 보낼 수 있는데response = sendRequest('https://www.naver.com')이 작업이 완료되려면 인터넷을 통해 리퀘스트(Request)가 서버까지 전달되어야 하고서버가 리퀘스트를 처리하고, response가 다시 컴퓨터까지 전달되어야 한다. 물론 요즘 인터넷 속도도 빠르고 대체로 컴퓨터 따른 성능도 높지만 단순한 연산을 하는 것에 비교하면 몇천 배 또는 그 이상의 시간이 걸린다.그런데 코드로 리퀘스트를 보내고 리스폰스를 기다리는 동안에는 컴퓨터가 따로 하는 일 없이 리스폰스를 기다리기만 하는데,기다리는 시간 동안 수천 개의 연산을 할 수 있을 텐데 마냥 기다리..

• format_list_bulleted JS
• · 2024. 12. 27.
• textsms

(9) JavaScript Module - 유용한 npm 커맨드

npm install (npm i)@version특정 버전을 설치하고 싶다면 @를 사용한다.# 커맨드npm install ThirdPartyModule@version# 예시npm install date-fns@2.29.0 --global (-g)패키지 중에서는 import하지 않고 커맨드 라인에서 사용하는 것들이 있는데이런 패키지들은 보통 --global 옵션으로 설치한다.# 커맨드npm install ThirdPartyModule --global# 예시npm install date-fns --global 'global'은 '전역' 이라는 뜻을 가지고 있으며 --global 옵션을 이용해서 설치한 패키지는꼭 패키지를 설치한 디렉토리가 아니여도 어디서든지 사용할 수 있다. --save-dev (-D)특정 ..

• format_list_bulleted JS
• · 2024. 12. 26.
• textsms

(8) JavaScript Module - package-lock.json

date-fns 설치후 생성되는 파일중 package-lock.json 파일이 있는데열어보면 packages 필드가 존재한다.{ "name": "04.npm", "lockfileVersion": 3, "requires": true, "packages": { "": { "dependencies": { "date-fns": "^4.1.0" } }, "node_modules/date-fns": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", "integrity": "sha512-Ukq0owbQXxa/U3EGtsd..

• format_list_bulleted JS
• · 2024. 12. 25.
• textsms

(7) JavaScript Module - Semantic Version (시멘틱 버전)

이전 글에서 package.json 파일의 각 필드를 다시 살펴보면..{ "dependencies": { "date-fns": "^4.1.0" }, "type": "module", "scripts": { "start": "node main.js", "test": "node test.js" }}dependencies 필드의 4.1.0 이라는 것을 Semantic Version (시멘틱 버전)이라고 하는데정확히 무슨 의미인지 알아보자. Semantic Version우리말로 해석하면 '의미론적 버전' 이라고 볼 수 있는데시멘틱 버전은 위 코드에 보이는 것처럼 세 개의 숫자로 이루어진 버전이다.이떄 이것을 x.y.z 형태로 구성되는데X를 메이저 버전(major)Y를 마이너 버전(mino..

• format_list_bulleted JS
• · 2024. 12. 25.
• textsms