IT/JavaScript

[ESLint] import/order 규칙으로 import 순서 미세 조정하기

eslint-plugin-import를 활용하면 아래와 같은 import문들의 순서를 직접 조정할 수 있다. 먼저 eslintrc 파일의 plugins 배열에 "import"를 추가하거나 또는 extends 배열에 "plugin:import/recommended"를 추가해야 한다. (plugins와 extends 모두 위 문자열을 추가하면 rules에서 규칙을 직접 수정할 수 있게 되며, extends의 경우에는 권장되는 기본 설정이 추가된다. extends에 추가하고 rules를 수정하면 기본 설정 위에 덮어씌우게 된다.) { "plugins": ["import"] } { "extends": ["plugin:import/recommended"] } 이제 rules에서 "import/order" 규칙을 ..

[JS] 자바스크립트로 엑셀 파일(xlsx) 만들어서 다운받기

엑셀 파일을 만들어주는 라이브러리에는 SheetJS, ExcelJS 등이 있는데, 그 중에서 비교적 엑셀 파일의 커스텀이 자유로운 ExcelJS에 대해서 다루도록 하겠다. 기본 형식 import ExcelJS from 'exceljs'; // workbook(엑셀 파일 하나를 구성하는 여러 시트로 이루어진 단위) 생성 const workbook = new ExcelJS.Workbook(); // sheet 생성 const worksheet = workbook.addWorksheet('시트 이름'); workbook은 하나의 파일을 나타내고, 하나의 workbook은 여러 개의 worksheet를 가질 수 있다. 데이터 입력 방식 ExcelJS에서는 다양한 방법으로 데이터를 입력할 수 있다. workshe..

[JS] Invalid regular expression: invalid group specifier name

Safari에서는 정규표현식의 후방탐색(lookbehind, ?Invalid regular expression: invalid group specifier name가 뜨며 에러가 발생한다. 정규표현식에서 후방탐색을 대체하는 방법은 상황에 따라 다르겠지만 capturing group을 활용하면 아래와 같은 정규표현식에서 후방탐색을 대체할 수 있다. const str = 'string.001'; const number = str.match(/(?

[JS] Selection API로 선택된 텍스트 정보 가져오기

Selection API Selection API는 웹 브라우저에서 현재 선택된 텍스트 또는 커서의 위치에 관련된 정보 제공 및 선택된 텍스트와 커서의 위치를 조작할 수 있는 메서드들을 제공하는 Web API다. 2022년 현재 거의 대부분의 브라우저에서 지원하고 있다. 가나다라마바사 window.getSelection(); window.getSelection()은 현재 선택된 범위에 대한 Selection 객체를 반환한다. Selection 객체의 프로퍼티에 대해 알아보자. anchorNode / focusNode anchorNode와 focusNode는 각각 선택이 시작된 노드와 선택이 끝난 노드를 나타낸다. 위 예제에서 선택이 시작된 노드와 선택이 끝난 노드는 각각 "다"의 앞부분과 "마"의 뒷부분..

[JS] 자바스크립트의 배열 생성 방법

자바스크립트에서 배열은 배열 리터럴, Array 생성자 함수, Array.of 메서드, Array.from 메서드를 통해 생성할 수 있다. 배열을 생성하는 방법이 4가지나 있기 때문에 각각의 생성 방식과 특징을 제대로 이해해야 목적에 맞는 방법을 선택할 수 있을 것이다. 이 외에도 String.prototype.split 메서드처럼 배열을 반환하는 빌트인 객체의 메서드들도 있다. 각각의 배열 생성 방식의 특성을 살펴보고, 몇 가지 기본적이면서도 자주 쓸 수 있는 배열 생성 방법에 대해 알아보자. 1. 배열 리터럴 가장 단순하고 직관적인 배열 생성 방식이다. 거의 대부분의 브라우저에서 가장 성능이 좋은 배열 생성 방법이다. const a = []; const b = [1, 2, 3]; 배열 리터럴 내부에서..

[JS] 함수의 매개변수와 RangeError

함수가 호출되면 함수의 매개변수, 반환 주소값, 지역 변수 등의 스택 프레임(Stack Frame)이 호출 스택(Call Stack)에 쌓이게 된다. 재귀함수나 콜백함수에 의해서 함수가 종료되지 않고 너무 많이 호출되면 이러한 스택 프레임들이 호출 스택의 메모리를 초과하게 되면 스택 오버플로우(Stack Overflow)가 발생한다. 함수의 호출이 너무 많아서 스택 오버플로우가 일어날 수도 있지만, 함수를 한 번만 호출했는데 매개변수가 너무 많아서 스택 오버플로우가 발생할 수도 있다. 함수의 매개변수도 호출 스택에 쌓이기 때문이다. const arr = new Array(1000000); const arr2 = [...arr]; 위의 코드에서 length가 1000000인 배열 arr를 스프레드 연산자(..

Node.js로 백준(BOJ) 문제 풀 때 유의할 점들

백준에서 Node.js로 입력을 받는 방법은 크게 두 가지가 있다. 첫 번째는 readline 모듈을 사용하는 것이고, 두 번째는 fs 모듈을 사용하는 것이다. (이 글에서는 fs 모듈에 대해서만 다루겠다.) Python으로 백준 문제를 풀 때 시간 초과가 나는 것을 막기 위해 input() 대신 sys.stdin.readline()을 쓰는 것처럼, Node.js도 readline보다 fs모듈을 사용하는 것이 더 빠르다. var fs = require('fs'); var input = fs.readFileSync('/dev/stdin').toString().split(' '); var a = parseInt(input[0]); var b = parseInt(input[1]); console.log(a+b..