범데이의 개발노트 📄

오늘은 JavaScript의 getMonth() 메서드로 달을 구할 시 왜 실제 달보다 1이 적은 값이 반환되는 지에 대해 알아보고자 한다. 1. 개요 자바스크립트에서 날짜를 구하려면 Date 객체를 활용해야 한다. Date객체의 인스턴스의 달(月)을 구하려면 아래 예시의 사용처럼 getMonth() 메서드를 사용한다. const today = new Date(); const year = today.getFullYear(); const month = today.getMonth()+1; const day = today.getDate(); console.log(`${year}.${month}.${day}`) // result: 2024.1.11 (작성일(2024. 01. 11기준) 그런데 왜 getMonth..

1. 문제 현상 JavaScript로 데이터를 CSV파일로 내보내었는데, Microsoft Excel 프로그램에서 이를 열어보니 한글이 깨져보이는 현상이 발생하였다. 이를 해결한 과정을 포스팅으로 정리해본다. 2. 해결 과정 문제의 csv파일을 notepad로 열어서 “다른 이름으로 저장” 을 해보면, 하단에 인코딩 방식을 볼 수 있는데, “UTF-8”로 지정되어있음을 확인할 수 있다. 따라서, 이 인코딩 방식을 수정해주어야 함을 느끼고 인코딩 방식을 “ANSI”로 지정하여 저장하고 싶었다. 그러나, JavaScript에서 데이터를 CSV 파일로 저장할 때, 인코딩을 “ANSI”로 지정하는 것은 언어 자체에서 직접 지원하지 않는다. "ANSI"는 일반적으로 Windows 시스템에서 사용되는 인코딩을 의미..

1. reduce recude() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반환한다. const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce( (previousValue, currentValue) => previousValue + currentValue, initialValue ); console.log(sumWithInitial); // output: 10 리듀서 함수는 네 개의 인자를 가진다. 1. 누산기 (acc) 2. 현재 값 (cur) 3. 현재 인덱스 (idx) 4. 원본 배열 (src) 리듀서 함수..

1. 개요 node.js환경의 vue-electron으로 윈도우즈 프로그램을 개발하는 프로젝트 중의 일이다. 빌드 된 프로그램의 Chromium기반 웹페이지에서 Web API 내장 라이브러리인 MediaRecorder로 영상을 촬영한 후, 클라우드에 업로드 한 뒤 링크를 따서 외부 프로그램에서 영삿 재생이 바로 가능하도록 구현해야 했다. 하지만 웹에서 스트림 형식으로 촬영하고 처리한 후 생성한 영상에 여럿 까다로운 문제가 발생할 줄 몰랐으니.. 이를 파악하고 처리했던 히스토리를 공유하고자 포스팅으로 작성해본다. 2. 영상 처리 로직 처음에 MediaRecorder 인스턴스를 아래와 같이 초기화 한 후, // prompts the user for permission to use a media input w..

1. NPM이란? NPM은 Node Packaged Manager의 약자이다. 이름처럼 NPM은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램이다. 개발자는 CLI로 손쉽게 기존에 공개된 모듈들을 설치하고 활용할 수 있다. 프로그램보다 조금 작은 단위인 이 모듈들을 필요에 따라 적절하게 활용할 수 있도록 도와준다. (Java랑 비교를 하자면 메이븐과 비슷한 역할을 한다.) 2. NPM 설치 위에서 설명했던 것 처럼, NPM은 Node.js의 패키지 관리자이다. 따라서 NPM을 사용하기 위해서는 Node.js를 설치해야 한다. (공식 사이트에 들어가서 다운로드 할 수 있다.) 정상적으로 설치 하였다면, 다음 명령어로 설치된 NPM의 버전을 확인할 수 있다. 3. 자주 사용되는 ..

1. 개요 fs 모듈은 FileSystem의 약자로 파일 처리와 관련된 모듈이다. 메소드가 굉장히 많은데 가장 중요하고 기초적인 내용 위주로 살펴보자. 2. fs 모듈 불러오기 fs 모듈은 Node.js에 내장되어 있기 때문에 별도의 라이브러리 설치 없이 바로 불러와서 사용할 수 있다. CommonJS모듈 시스템을 사용하는 프로젝트에서는 require 키워드로 불러오고, ES모듈 시스템을 사용하는 프로젝트에서는 import 키워드를 사용 할 수 있다. // CommonJS Modules const fs = require("fs"); // ES Modules import fs from "fs"; 3. fs 모듈의 비동기 함수 vs 동기 함수 fs 모듈은 비동기(asynchronous) API와 동기(syn..

1. 바닐라 자바스크립트(Vanilla JS)란? 바닐라 자바스크립트란 외부 라이브러리나 프레임워크를 쓰지 않는 순수 Javascript를 이르는 말이다. 2. 바닐라의 어원 위키백과에 따르면 바닐라의 뜻은 다음과 같다. 바닐라는 향신료 중 하나로, 난초의 일종인 바닐라속에 속해 있으며, 원산지는 멕시코이다. 바닐라라는 이름은 스페인어 “Vainilla”에서 나왔으며 작은 꼬투리, 콩을 뜻한다. 뜻을 유추할 수 있듯, 바닐라는 콩이라는 뜻으로 “핵심, 근본이 되는" 이라는 의미를 비유적으로 표현할 수 있다. 그러므로 바닐라 자바스크립트는 핵심이 되는 아무것도 포함되지 않은 순수 자바스크립트를 함축적으로 표현하는 것이다. 3. 바닐라 자바스크립트는 왜 필요한 것일까? 이 질문에 대한 답은 웹 개발 환경의 ..

1. 개요 Javascript에서 클래스를 import/export를 하기 위해선 어떻게 하는지 찾아보던 도중, 영어로 된 좋은 포스팅을 찾게 되었고, 해당 포스팅을 한글로 번역하여 정리하였다. (해당 사이트: 새창) 2. Export named export를 사용하여 export class Employee {} 와 같이 Javascript에서 클래스를 내보내보자. 내보낸 클래스는 named import를 사용하여 import {Employee} from './another-file.js'와 같이 가져올 수 있다. 얼마든지 이와같이 파일에서 필요에 따라 이름을 지정하여 쓸수 있다. 다음은 'another-file.js' 라는 파일에서 클래스를 내보내는 예이다. [another-file.js] // 👇️ ..

1. 엄격(strict) 모드란? ECMAScript 5에서 처음으로 소개된 strict 모드는 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해 준다. strict 모드는 스크립트나 함수의 맨 처음에 "use strict" 지시어를 사용하여 선언할 수 있다. [예제] "use strict" // 전체 스크립트를 strict 모드로 설정함. try { num = 3.14; // 선언되지 않은 변수를 사용했기 때문에 오류를 발생시킴. } catch (ex) { document.getElementById("text").innerHTML = ex.name + " "; document.getElementById("text").innerHTML += ex.message; } 위와 같이 선언된 strict 모드는..

1. Optional chaning이란? Optional chaning연산자(?.)는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있게 해준다. ?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish(null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다. 따라서 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한 지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 ..