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

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

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)특정 ..

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..

이전 글에서 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..

▼ mjs 파일더보기// main.mjsimport { format } from 'date-fns'const dateString = format(new Date(2024,12,24), 'MM/dd/yyyy')console.log(dateString);//calculator.mjsexport const PI = 3.14;export function add (a,b) { return a + b;}export function subtract (a,b) { return a - b;}export function multiply (a,b) { return a * b;}export function divide (a,b) { return a / b;}const calculator = { PI, add, ..

Node.js는 다른 개발자나 회사들이 만들어 놓은 모듈이 정말 많은데이러한 모듈을 서드파티 모듈이라고 했을 때,서드파티 모듈은 npm(node package manager) registry라는 곳에 모여 있으며즉 npm으로 서드파티 모듈을 설치할 수 있다. npm install우선 터미널에서 npm intall date-fns을 입력하는데여기서 npm install 뒤에는 설치할 서드파티 모듈 이름을 적는 곳이다.서드파티 모듈의 date-fns는 이미 만들어져있는 모듈이며 날짜를 다를 때 쓰이는 모듈이다. 설치가 완료되면 기존의 mjs파일 말고 다음과 같이 파일들이 생성되는데우선 node_modules 디렉토리를 먼저 살펴보자.node_modules는 방금 설치한 date-fns 모듈이 저장되는 곳이다..

▼ mjs 파일더보기//calculator.mjsconst PI = 3.14;function add (a,b) { return a + b;}function subtract (a,b) { return a - b;}function multiply (a,b) { return a + b;}function divide (a,b) { return a + b;}  언제 named export를 사용하고 또 언제 default export를 사용하는지 정리해보자named export vs default export사실 꼭 정해진 것은 없지만보통 파일에서 여러 함수와 변수를 export 하고 싶을 때는 named export,파일에서 하나의 메인 함수나 변수를 export 하고 싶을 때는 default expor..

▼ mjs 파일더보기//calculator.mjsexport const PI = 3.14;export function add(a, b) { return a + b;}// main.mjsimport { PI, add } from './calculator.mjs';console.log(PI);console.log(add(1, 2));default export는 생각보다 간단한데그냥 단순히 export 옆에 default라고 추가만 해주면 된다. default exportdefault는 기본, 기본값을 의미하며자바스크립트에서의 default export는 조금 더 편리하게 import 할 수 있게 도와준다. calculator와 main 파일을 다음과 같이 수정해보자.//calculator.mjsexport..

모듈의 핵심 기능은 코드를 파일 단위로 나눠놓고필요할 때마다 불러와서 사용하는 것이라고 했을 때,직접 불러오기를 해보기위해 calculator.mjs 파일에 있는 것들을main.mjs 파일에서 가져와서 사용해보자.여기서 자주 사용했던 js 확장자가 아닌 mjs 확장자를 사용했는데그 이유는 모듈 문법을 사용하기 위해서는 mjs 확장자를 사용해야 하기 때문이다.하지만 모듈 문법을 사용할 수 있다는 것 외에는 전혀 차이가 없으므로일반 자바스크립트라고 봐도 된다.import , export다음과 같이 calculator 파일에 작성한 코드를 main파일로 export(내보내다) 하고자 할 때,// calculator.mjsconst PI = 3.14;function add(a, b) { return a + b..