언어 (21) 썸네일형 리스트형 Document Document Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다. DOM 트리는 와 및 여러 다른 요소를 포함합니다. Document는 페이지의 URL을 얻거나 문서에 새로운 요소를 생성하는 등의 기능을 전역적으로 제공합니다. Document 인터페이스는 모든 종류의 문서에 대한 공통의 속성과 메서드를 묘사합니다. 문서의 유형(HTML, XML, SVG 등)에 따라서 더 다양한 API가 존재합니다. 메서드 Document.createAttribute() 새로운 Attr 객체를 생성하고 반환합니다. Document.createElement() 주어진 태그명을 사용해 새로운 요소를 생성합니다. Document.createEvent(.. Node.js로 입력값 받기 Readline readline 모듈은 process.stdin 등의 읽을 수 있는 스트림으로부터 데이터를 읽는데 필요한 인터페이스를 제공한다. 다음을 사용함으로써 접근할 수 있다. const readline = require('readline'); 다음은 기본적인 사용 예시이다. const readline = require('readline'); const rl = redline.createInterface({ input: process.stdin, output: process.stdout }); rl.question('What do you think of Node.js? ', (answer) => { // TODO: Log the answer in a database console.log(`Thank.. Array.from() MDN Web Docs를 그대로 필사한 포스팅입니다. Array. from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만듭니다. console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], x => x + x)); // expected output: Array [2, 4, 6] 구문 Array.from(arrayLike[, mapFn[, thisArg]]) 매개변수 arrayLike 배열로 변환하고자 하는 유사배열 객체나 반복 가능한 객체 mapFn [Optional.. 맵과 셋 모던자바스크립트(ko.javascript.info/map-set)을 필사한 내용입니다. 맵 맵(Map)은 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다. 다만, 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있습니다. 맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다. new Map() - 맵을 만듭니다. map.set(key, value) - key를 이용해 value를 저장합니다. map.get(key) - key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다. map.has(key) - key가 존재하면 true, 존재하지 않으면 false를 반환합니다. map.delete(key) - key에 해당하는 값을 삭제합니다. map.clear() .. Map MDN Web Docs를 필사한 포스팅입니다. Map Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다. 아무 값(객체와 원시 값)이라도 키와 값으로 사용할 수 있습니다. Map 객체는 요소의 삽입 순서대로 원소를 순회합니다. for...of 반복문은 각 순회에서 [key, value]로 이루어진 배열을 반환합니다. 키 동일성 키 동일성은 sameValueZero 알고리즘에 기반합니다. NaN !== NaN 이지만, 그럼에도 NaN은 NaN과 일치한다고 간주하며, 다른 모든 값은 === 연산자의 결과를 따릅니다. 현 ECMAScript 명세는 -0과 +0을 같은 값으로 처리하지만 초기 명세에서는 그렇지 않았습니다. 브라우저 호환성의 "Key equality for -0 and.. 정규표현식 사용하기 정규식 사용하기 정규식은 RegExp, test, exec, String, match, replace, search, split 메소드와 함께 쓰입니다. 이 메소드는 JavaScript reference에서 잘 설명되어 있습니다. Method Description exec 대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다. test 대응되는 문자열이 있는지 검사하는 RegExp 메소드입니다. true나 false를 반환합니다. match 대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 -1을 반환합니다. search 대응되는 문자열이 있는지.. 정규표현식 정규표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드, 그리고 String의 match 메소드, replace 메소드, search 메소드, split 메소드와 함께 쓰입니다. 이 장에서는 자바스크립트의 정규식에 대하여 설명합니다. 정규표현식 만들기 정규식을 만드는 방법에는 두 가지가 있습니다. 정규식 리터럴(슬래쉬"/"로 감싸는 패턴)을 사용하는 방법은 다음과 같습니다. var re = /ab+c/; 정규식 리터럴은 스크립트가 불러와질 때 컴파일됩니다. 만약 정규식이 상수라면, 이렇게 사용하는 것이 성능을 향상시킬 수 있습니다. 다른 방법으로는 RegExp 객체의 .. [React] Effect Hook 사용하기 Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다. import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // componentDidMount, componentDidUpdate와 같은 방식으로 useEffect(() => { // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다. document.title = `You clicked ${count} times`; }); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 위의 코드는 이.. 이전 1 2 3 다음
