목록프론트엔드/javascript (10)
빵 입니다.
📌 모듈 시스템◾ 자바스크립트에서 모듈 시스템은 코드를 효율적으로 분리하고 재사용 가능하게 만드는 역할을 한다.◾ CommonJS와 ESM은 모듈화를 지원하는 두 가지 방식이다. 📌 CommonJS🧿 Node.js 환경에서 사용 - Node.js 초기 설계 단계에서 채택된 모듈 시스템🧿 require() 함수로 모듈을 가져오고, module.exports로 내보낸다.// math.jsmodule.exports = { add: (a, b) => a + b, subtract: (a, b) => a - b,};// app.jsconst math = require('./math');console.log(math.add(2, 3)); // 5 🧿 동기적 모듈을 로딩- 동기적으로 모듈을 로드하기 때문에..
📌 중괄호 {}를 생략한 경우괄호 {}를 생략하면 화살표 함수가 단일 표현식을 암시적으로 return한다.단일 표현식을 암시적으로 반환// const fn = () => expression;const add = (a, b) => a + b; 📌 중괄호 {}를 사용한 경우중괄호 {}를 사용하면 화살표 함수 내부에서 명시적으로 return 키워드를 사용해야 한다.중괄호 {}와 return을 명시적으로 사용// const fn = () => {// return expression;// };const add = (a, b) => { return a + b; // 명시적으로 반환};
Performance.now() 메서드는 고해상도 타임스탬프를 밀리초(천 분의 1초) 단위로 반환한다. (1000 밀리초 = 1 초) Performance.timeOrigin(윈도우 컨텍스트에서 탐색이 시작된 시간 또는 Worker 및 ServiceWorker 컨텍스트에서 Worker가 실행되는 시간) 이후 경과된 시간을 나타낸다. Date.now와 달리 performance.now()로 반환되는 타임스탬프는 1밀리초 해상도로 제한되지 않는다. 대신 시간을 최대 마이크로초 정밀도로 부동 소수점 숫자로 나타낸다. 또한 Date.now()는 유닉스 에포크(1970-01-01T00:00:00Z)에 상대적이고 시스템 클럭에 의존하기 때문에 시스템 및 사용자 클럭 조정, 클럭 스큐 등의 영향을 받았을 수 있다. ..
정처기 공부할 때 ~ 연산자를 본 적 있다. 그저 공식을 외워 계산하기 바빴다. 알고리즘을 공부하며 또 다시 만난 ~ 물.결 구박사님을 통해 검색을 해보니 이름은 하난데 별명은 서너개~ 틸트 연산자? 틸데 연산자? mdn에 tilt, tilde 둘 다 검색해도 안나온다... 찾다보니~~~ 비트 NOT 연산자를 찾았다! 정확한 명칭은 "비트 NOT 연산자"이다. (Bitwise NOT Operator) 물결로 표기하기 때문에 영단어 tilde(물결)를 써서 tilde 연산자라고 사용하는 것 같다. 틸트는 어디서 나온 말이지 -.- 틸데를 틸드로 읽은 게 구전되어 틸트가 된 게 아닐까 추측 ^^!... 사용법을 알아보자! 비트가 0일 경우엔 1로, 1일 경우엔 0으로 비트를 뒤집는다. 피연산자는 32비트 부..
S2020에서 새로 나온 문법. 구식 브라우저는 폴리필이 필요. 옵셔널 체이닝 연산자 ?. 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. 참조가 * nullish라면, 에러 발생하지 않고 undefined를 반환한다. 함수가 존재하지 않는다면 undefined를 반환한다. 선언되지 않은 루트 객체에 사용할 수 없다. 정의되지 않은 루트 객체에 사용할 수 있다. * nullish : nullish 값은 null이나 undefined이다. 항상 false. 문법 obj?.prop obj?.[expr] arr?.[index] func?.(args) 예시 중첩된 구조를 가진 객체에서 obj가 있다. optional chaining이 없이..
📌 TL;DR 자바스크립트 프로그래밍 => 자바스크립트 엔진과 웹 브라우저에서 제공하는 API 메소드로 프로그래밍을 하는 것이다. * 크롬 웹 브라우저는 V8 엔진이 탑제된 자바스크립트 런타임이다. 자바스크립트 엔진은 메모리 힙과 콜 스택으로 구성되어 있다. 자바스크립트는 싱글 스레드이기 때문에 한 번에 한 가지 일만 처리할 수 있지만, 비동기를 이용하면 하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 실행할 수 있다. Web APIs, Message Queue(= Event Queue)와 Event Loop가 비동기 처리를 해준다. Web API로 Callback 함수를 만들고, Queue 대기열에 넣어뒀다가 Call Stack이 빈 상태가 되면 Event Loop가 Callback 함수..
W3Schools 번역과 MDN 번역 및 검색을 통해 알게 된 점 위주의 정리 https://www.w3schools.com/js/js_arrays.asp https://msdn.microsoft.com/ko-kr/library/ccktxahf(v=vs.100).aspx https://msdn.microsoft.com/ko-kr/library/jj155291(v=vs.94).aspx 1. AJAX IntroAjax를 사용할 때의 장점 - 페이지가 로드 된 후에 웹 서버로부터 데이터를 읽을 수 있다. - 페이지를 다시 로드 할 필요 없이 웹 페이지를 업데이트 할 수 있다. - 백그라운드 상태로 웹 서버에 데이터를 보낼 수 있다.AJAX는 다음과 같이 결합하여 사용한다. - 웹 서버로부터 데이터를 요청하기 ..
W3Schools 번역과 MDN 번역 및 검색을 통해 알게 된 점 위주의 정리 https://www.w3schools.com/js/js_arrays.asp https://msdn.microsoft.com/ko-kr/library/ccktxahf(v=vs.100).aspx https://msdn.microsoft.com/ko-kr/library/jj155291(v=vs.94).aspx concat() 2개 이상의 배열은 연결하고, 연결된 배열을 반환. array1.concat(array2, array3, ..., arrayX) copyWithin() 배열의 지정한 위치 안에 있는 요소들을 복사. array.copyWithin(target, start, end) every() 배열 안의 모든 요소들이 설정한..
W3Schools 번역과 MDN 번역 및 검색을 통해 알게 된 점 위주의 정리 https://www.w3schools.com/js/js_arrays.asp https://msdn.microsoft.com/ko-kr/library/ccktxahf(v=vs.100).aspxhttps://msdn.microsoft.com/ko-kr/library/ccktxahf(v=vs.100).aspx https://msdn.microsoft.com/ko-kr/library/jj155291(v=vs.94).aspxhttps://msdn.microsoft.com/ko-kr/library/jj155291(v=vs.94).aspxconstructor, length, prototype은 다른 객체에서도 사용할 수 있음. 이 페이지..
W3Schools 번역 및 검색을 통해 알게 된 점 위주의 정리 https://www.w3schools.com/js/js_arrays.asp 1. 하나의 이름으로 여러 값을 가질 수 있다. 1) var array_name = [item1, item2, ...]; → Literal 방식 (권장) var fruit1 = "apple"; var fruit2 = "banana"; var fruit3 = "orange"; → var fruit = ["apple", "banana", "orange"]; → var fruit = [ "apple", "banana", "orange" ]; 마지막 요소 뒤에 콤마(,)를 넣으면 IE8 이하 버전에서 오류 발생2) new 생성자를 이용해 배열을 만들 수 있다. var ca..