다음 포스팅이 동기/비동기(Sync, Async)에 대한 것인데... 이를 이해하기 위해서는 자바스크립트의 작동 방식이 어떠한지를 먼저 알아야 한다고 생각했다. 그걸 안다고 해도 지금 내 머리 속에 둥둥 떠다니는 비동기 처리와 콜백, promise, resolve, reject 등이 한 번에 이해되고 그러진 않겠지만... 열심히 하는 거 같은데 남는 게 없는 느낌이라 뭔가 좀 허하다. 그래도 정진 해야겠지. 자바스크립트의 동작 원리 우선 JavaScript는 동기식 언어이다. 즉, 한 번에 하나의 작업을 실행하는데 그 작업이 실행되는 동안 다른 작업은 수행되지 않는다. JavaScript는 single threaded 언어로 한 번에 코드 하나밖에 실행하지 못한다. setTimeout 같은 코드는 바로 ..
javascript
Document Object Model (이하DOM)은 문서객체모델을 뜻하는 말로, html요소를 javascript를 이용해 제어하기 위해 사용한다. 아래는 문서객체모델의 메서드들, 특히 좌표와 관련된 것들이다. 1 2 자세한 건 mdn 문서를 참조하자. https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 developer.mozilla.org
Document Object Model (이하DOM)은 문서객체모델을 뜻하는 말로, html요소를 javascript를 이용해 제어하기 위해 사용한다. 아래는 문서객체모델의 메서드들이다. 1 2 자세한 것은 mdn 문서를 살펴보자. 완벽히 담고 싶었지만 부족하다... https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 developer.mozilla.org
Document Object Model (이하DOM)은 문서객체모델을 뜻하는 말로, html요소를 javascript를 이용해 제어하기 위해 사용한다. 아래는 문서객체모델의 메서드들이다. 1 2 더 많은 건 mdn 문서를 참조하자. 지난번에도 말했지만 공식문서 같은 것들이 최고인 것 같다... https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 developer..
Document Object Model (이하DOM)은 문서객체모델을 뜻하는 말로, html요소를 javascript를 이용해 제어하기 위해 사용한다. 아래는 문서객체모델의 메서드들이다. Hello World 1 텍스트1 2 텍스트2 3 택스트3 4 택스트4 자세한 건 mdn 문서를 참조하자. https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 developer..
모듈은 필요한 걸 가져다 쓰기만 하면 되는 거 같기도 하고, 깊게 파면 내 생각보다 복잡한 거 같아서 미뤄왔다. 그래도 아무 생각 없이 중괄호 쓰고 그냥 가져오고 하는 것보다 알고 쓰는 게 좋을 거 같아서 정리했다. // 모듈(Module)이란 특정 데이터들의 집합(파일) // 모듈 가져오기(import), 모듈 내보내기(export) // 가져오기(import) 선언은 모듈의 최상위 수준에서만 사용 가능 export const hello = function () { console.log('Hello world!'); } // import { hello } from './module.js'; // 기본 내보내기, 이름이 지정되어 있지 않으므로 임의의 이름을 지어 가져올 수 있음 export default..
JSON은 JavaScript Object Notaion을 줄인 말이다. package.json, package-lock.json에서 흔히 볼 수 있는 확장자이다. package.json: 개발자가 배포한 패키지에 대해 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서 자신의 프로젝트가 의존하는 패키지의 리스트 자신의 프로젝트의 버전을 명시 다른 환경에서도 빌드를 재생 가능하게 만들어, 다른 개발자가 쉽게 사용할 수 있도록 한다. package-lock.json: 버전을 확인하기 위해 만든 부가적인 문서, 그래서 그런지 엄청 길다... // JSON (JavaScript Object Notation) // 데이터 전달을 위한 표준 포맷! // 문자, 숫자, 불린, Null, 객체, 배열만 사용 // ..
표준내장객체 (standard built-in object) Object에 관한 것을 정리했다. 이는 일부일 뿐이니 자세한 내용은 mdn 문서를 참조하자. // Object.assign() // 하나 이상의 출처(Source) 객체로부터 대상(Target) 객체로 속성을 복사하고 대상 객체를 반환 const target = {a:1, b:2}; const source1 = {b:3, c:4}; const source2 = {c:5, d:6}; const result = Object.assign(target, source1, source2); const result2 = Object.assign({}, target, source1, source2); const result3 = { ...target, ....
표준내장객체 (standard built-in object) Array에 관한 것을 정리했다. 이는 일부일 뿐이니 자세한 내용은 mdn 문서를 참조하자. // length, 배열의 길이를 반환 const arr = [1, 2, 3]; console.log(arr.length); // 3 // at(), 대상 배열을 인덱싱 console.log(arr[0]); // 1 console.log(arr.at(0)); // 1 console.log(arr[arr.length -1]); // 3 console.log(arr.at(-1)); // 3 // concat(), 대상 배열과 주어진 배열을 병합해 새로운 배열을 반환 const arr1 = ['a', 'b', 'c']; const arr2 = ['d', 'e..
표준내장객체 (standard built-in object) Math에 관한 것을 정리했다. 이는 일부일 뿐이니 자세한 내용은 mdn 문서를 참조하자. //Math 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장객체 // Math.abs(), 주어진 숫자의 절댓값을 반환 console.log(Math.abs(2)); // 2 console.log(Math.abs(-2)); // 2 // Math.ceil(), 주어진 숫자를 올림해 정수를 반환 console.log(Math.ceil(3.141592)) // 4 // Math.floor(), 주어진 숫자를 내림해 정수를 반환 console.log(Math.floor(3.141592)); // 3 // Math.max(), 주어진 숫자 중 가장 큰 숫..
