인생은 효율성

이번에는 차트에 색상을 적용해야 한다. 색상 적용 예제도 MDN에 잘 나와있다. https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#a_createlineargradient_example 스타일과 색 적용하기 - Web API | MDN 도형 그리기 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그 developer.mozilla.org 스타일을 적용할 곳은 총 세 가지이다. 1. 따뜻한 색 - 차가운 색으로 배경 입히기 2. 차트의 라인에 색상과 굵기 주기 3. 폰트..

공공데이터를 활용하여 기온 정보를 뿌려주는 서비스를 개발 중이다. 시간별 기온 정보를 뿌려주기 위해 차트가 필요했는데 라이브러리를 쓰려고 찾아보았는데 나는 아주 기본적인 기능만 필요한 상황이라 굳이 라이브러리를 설치해서 차트를 그릴 필요는 없을 것 같다는 생각이 들었다. 그래서 공부도 할 겸 차트를 직접 그리기로 결정했다. 다행히 MDN에 canvas를 친절히 설명해주는 문서가 있었다. https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes 캔버스(canvas)를 이용한 도형 그리기 - Web API | MDN 앞서 캔버스 환경 설정(canvas environment)을 완료 하였다면, 이제 어떻게 캔버스에 그릴수 ..

node.js 서버에서 데이터를 등록하는 API를 만드는데 이 API는 총 5개의 동작이 반드시 순서를 지켜서 실행되어야 한다. 처음에는 함수 내부에 promise객체를 만들어서 리턴하고 그 함수를 .then()으로 연결하였다. 1. 함수에서 프로미스 객체 리턴 X 5 const insertProfit = async cateJson => { const query = `insert into [table] ([col1], [col2], [col3], [col4]) values ('${month}', ${id}, ${aim}, ${rate}) `; let res: any; const promise = new Promise((resolve, reject) => { resolve( excuteQuery(query..

자바스크립트에는 호이스팅이라는 개념이 있다. 호이스팅은 코드를 실행하기 전 선언한 변수가 해당 스코프 최상단으로 끌어올려져 실행되는 것을 말한다. function getData() { console.log(greeting); var greeting = 'hi'; } getData(); 이와 같은 코드를 실행하면 어떻게 될까? greeting변수가 console.log 아래에 선언되어있기 때문에 에러가 날 것이라 예상할 수 있지만 var로 선언한 greeting이 최상단으로 끌어올려져 var greeting; console.log(greeting); // undefined greeting = 'hi'; 과 같이 실행되는 것과 동일하다. 변수 할당이 아닌 변수 선언만 최상단으로 끌어올려지기 때문에 값은 un..

자바스크립트하면 떠오르는 이미지 중 대표적인 것 중 하나가 '비동기'일 것이다. 하지만 자바스크립트는 싱글 스레드로 동작하는 언어라고 말하던데 어떻게 싱글 스레드이면서 비동기적일 수가 있는 걸까? 먼저 노드의 특징인 이벤트 기반에 대한 내용을 알아야 한다. 이벤트 기반 시스템에서는 특정 이벤트가 발생할 때 미리 지정해둔 콜백 함수가 실행된다. 이벤트가 발생하면 이벤트 리스너에 등록해둔 콜백 함수를 호출하고 이벤트가 없거나 이미 다 처리했다면 노드는 대기 상태에 들어간다. 여기서 이벤트 루프라는 개념이 등장한다. 이벤트 루프는 여러 이벤트가 동시에 발생할 때 어떤 순서로 콜백 함수를 호출할지 결정해준다. *이벤트 루프: 이벤트 발생 시 호출할 콜백 함수들을 관리, 순서를 결정한다. 노드가 종료될 때까지 작..

console.log(0.1 + 0.2); console.log(0.2 * 6); 위의 두 출력 결과는 어떻게 나올까? 실행해보면 결과는 각각 0.30000000000000004 이랑 1.2000000000000002 으로 예상과는 다른 숫자를 도출해낸다. 이건 자바스크립트의 오류인걸까? 결론부터 말하자면 자바스크립트 언어의 오류는 아니다. 전에 타입을 써야하는 이유에 대해 쓴 글을 읽어보면 그 이유를 알 수 있다. 2021.11.24 - [프로그래밍] - 타입을 사용하는 이유 타입을 사용하는 이유 컴퓨터의 숫자 표현 방법 인류는 10진수를 사용하고 컴퓨터는 2진수를 사용한다. 컴퓨터도 같이 10진수를 사용하면 기계어를 다룰 때 더 편할 텐데 왜 그렇게 되었을까? 숫자를 디지털로 변환할 bomoto.ti..

다른 언어와 다르게 자바스크립트에는 비교 연산자로 == 과 === 두 가지가 있는데 둘은 수행하는 역할이 다르다. == 동등 연산자(Equal Operator) 비교하려는 값이 타입이 다르다면 같은 타입으로 변경하여 비교를 한다. 쉽게 말하자면 자바스크립트가 어떻게든 둘을 같은 값으로 보기 위해 노력한다고 할 수 있다. (귀여운 js...) console.log('1' == 1); //true console.log(true == '1'); //true console.log(true == 1); //true console.log(false == 0); //true console.log('' == 0); //true console.log([] == 0); //true 위의 경우 전부 true를 반환한다. =..

기존의 방식으로 사용하던 함수에는 필요 없는 부분이 많다. 이런 부분을 전부 걷어내고 사용하자는 의도로 만들어진 것이 화살표 함수다. 화살표 함수 화살표 함수에는 =>만 있을 뿐 function키워드나 return키워드, 인수의 괄호, 중괄호가 모두 생략되었다. function getFirstLetter(str) { return str[0]; } 이와 같은 함수를 이름이 함수의 일부분으로 선언되었다는 뜻으로 기명 함수라고 한다. 혹은 아래와 같이 이름이 지정되지 않은 익명 함수를 선언하고 변수에 할당하는 방식도 있다. const getFirstLetter = function () { return str[0]; }; 여기서 화살표 함수를 만들기 위해 function키워드와 인수를 감싸던 괄호를 제거해보자...

변수를 선언할 때 깔끔하고 읽기 쉬운 코드를 작성하고 싶다면 const를 즐겨 써야 한다. 설명에 앞서 const, let, var의 특징에 대해 알아보자. 유효 범위 lexical scope: var / block scope: let, const 재할당 가능 여부 가능: let, var / 불가능: const 1 먼저 유효 범위에 대해 알아보면 블록 스코프인 let과 const는 변수를 선언한 중괄호를 벗어나면 변수에 접근할 수 없는 반면 var는 한 번 선언하면 어디서든 접근할 수 있다. * 여기서 헷갈리면 안 되는 게 자바스크립트는 함수 레벨 스코프를 사용하기 때문에 여기서 말하는 중괄호는 if문이나 for문 같은 제어문을 말하는 것이다. 자세한 사항은 스코프에 대해 더 알아보기 아래의 예시처럼 v..

지금까지 펼침 연산자를 일부 데이터를 수정하는 데에만 사용하고 있었다. const emp = { name: 'kim', age: 20, nick: 'bom' }; const setPerson(emp) { return [{ ...emp, age: 30 }]; } const newEmp = setPerson(emp); console.log(newEmp); // {name: 'kim', age: 30, nick: 'bom'} 하지만 펼침 연산자는 더 많은 용도로 쓸 수 있다. 1 첫 번째로 코드를 알아보기 쉽게 만들어준다는 것이 있다. const fruits = ['apple', 'banana', 'cherry']; const removeFruite = (fruits, willRemove) => { const..