본문 바로가기

개발/자바스크립트 35

[자바스크립트] image, data를 Excel로 내보내기 ( feat.exceljs ) 들어가며 시각화 대시보드를 만드는 팀에 속해있는데, 새로운 기능 개발 요건이 들어왔습니다. 요구된 기능은 아래와 같습니다. 기능 목표 : 대시보드에 있는 차트와 테이블을 Excel 파일로 떨궈주세요. 세부 목표 : 차트와 테이블은 이미지로 넣되, 테이블의 경우 전체 데이터를 보여주세요 이번 글에서는 해당 기능을 위한 간단한 튜토리얼 겸 기능 검토에 대한 이야기입니다. 기능 목표 및 검토 Excel 라이브러리 확인 대시보드에서 차트와 데이블을 Excel로 떨구는 작업이 필요하다고 되어있습니다. 바로 인터넷을 찾아보니 필요한 기능들을 제공하는 라이브러리를 찾아봅니다. 이름 지원여부 주소 excellentexport xlsx, xlx, csv 가능 이미지 안됨 https://github.com/jmaister.. 2021. 3. 9.
[자바스크립트] 구조 분해 할당(destructuring assignment)에 대하여 Let's study Destructuring Assignment in JavaScript 앞써 자바스크립트스러운 코드 스타일에서 비구조화 할당에 대해 알아봤습니다. 2020/11/20 - [개발/자바스크립트] - [자바스크립트]JS다운 코드 스타일 #4. 비구조화 할당 우리가 알다시피 객체와 배열은 가장 많이 쓰이는 자료구조입니다. 과장을 보태자면 이 2가지만 제대로 활용할 줄 알면 자바스크립트의 자료구조는 더 이상 필요 없다고 봐도 될 정도입니다. 그만큼 많이 쓰입니다. 특히 함수에 파라미터로 전달하는 경우 대부분이 객체, 배열, 또는 원시값입니다. 원시값의 경우 하나의 값이라 상관이 없지만 객체, 배열일 경우 불필요하게 모든 데이터들이 넘어갑니다. 물론 코드를 깔끔하거 어썸하게 구현한다면 대부분 상.. 2021. 3. 7.
[자바스크립트] 정규표현식(regex)에 대하여 가끔씩 그럴 때가 있다. 특정 패턴을 지닌 문자열을 찾아내서 처리해야 하는 경우 let s = "my best stock is Apple"; s = s.replace("Apple","Tesla"); console.log(s) //my best stock is Tesla 근데 저렇게 정적인 문자열의 경우는 그냥 직접찾아서 바꾸면 되는데 만약 여러 종류라면 어찌할 건가? 이럴 경우에 필요한 것이 regular expression (regex)이다. 다음과 같이 전화번호들이 있다. let numberList = [ "02-820-1111", "010-1234-1234", "010 1234 1234", "010.1234.1234", "aaa-bbbb-cccc", "0-1-1" ] 근데 보고 있자니 전화번호라는 .. 2021. 3. 1.
[자바스크립트] null 병합 연산자(nullish coalescing operator) ??에 대하여 Let's study nullish coalescing operator(??) 기억하기론 ECMA2015인가 추가됐고, TypeScript에서는 엄청 최근에 추가된 Null 병합 연산자 ?? 에 대해 알아보고자 한다. ?? 연산자는 여러 피연산자들 중에 그 값이 '확정되어 있는 변수'를 찾을 수 있다. 코드로 예시를 보자. let test = undefined ?? null ?? "apple"; console.log(test); // apple let test2 = undefined || null || "amazon"; console.log(test2); // amazon ??연산자 뿐만 아니라 || 연산자 또한 마지막에 있는 apple, amazon를 가져온다. 이것만 보면 굳이 필요할까 싶지만 내가 .. 2021. 2. 28.