차근차근

canvas를 이용하여 차트를 그렸는데, pc로 볼때는 괜찮던 화질이 모바일로 볼 때 저하되는 현상이 있어 이 글을 작성하게 되었다. canvas에는 두 가지 영역이 존재하는데, 하나는 HTML의 요소 자체의 영역이고, 하나는 실제로 그려지는 영역이다. 영역이 두 개가 존재하기 때문에 canvas의 크기를 지정하기 위해서는 요소의 width, height 속성을 이용하는 방법과, css를 이용하는 방법 총 두 가지가 있다. 요소의 크기와 canvas 그리기 영역의 크기가 다르면 우선 canvas 그리기 영역에 맞춰 그린 뒤에 그 영역을 캔버스 요소의 크기로 맞춰주는데 이를 이용하여 화질 저하 현상을 해결할 수 있다. dpr(기기 픽셀 비율 -> 물리적 픽셀 / 논리적 픽셀)에 맞춰 canvas의 그리기 ..

전화번호나 핸드폰번호를 입력받았을 때 하이픈(-)을 추가하는 함수는 아래와 같다. 예시 15881588 -> 1588-1588 01011112222 -> 010-1111-2222 025557777 -> 02-555-7777 0315557777 -> 031-555-7777 const contactNum = (n) => { if (!n) return null; const numbers = n.replace(/\D/g, ''); if (numbers.startsWith('02')) { if (numbers.length

한글 조사를 구분하기 위해서는 마지막 문자의 받침 유무를 체크하여 처리하면 된다. 마지막 문자에 받침이 있으면 '-이/-을/-은/-과', 받침이 없으면 '-가/-를/-는/-와'가 된다. 아래는 받침 유무를 체크하는 함수이다. hasFinalConsonant(str) { if (!str) return false; const lastCharCode = str.charCodeAt(str.length - 1); if (!util.isHangul(lastCharCode)) return false; return (lastCharCode - 44032) % 28; }, requestStr: (str) => { return hasFinalConsonant(str) ? '을' : '를'; },

1. 타입 안정성이 없다. let age: number; age = '10'; // "12" 형식은 number 형식에 할당될 수 없습니다. age = '10' as any // OK age는 number 타입으로 선언되어 있기에 타입 체커를 통해 위의 코드에서는 오류를 찾아냈지만, 타입 단언문인 as any를 사용하게 되면 오류가 없어진다. 2. 함수 시그니처를 무시한다. function calc(date: Date): number { // 내용.. } let date: any = '1994-01-28'; calc(date); // OK calc()의 date 매개변수는 Date 타입이어야 한다. 그러나 any 타입을 사용하게 되면 calc()의 시그니처를 무시하게 된다. 3. 언어 서비스가 적용되지 ..

class-validator는 데코레이터를 사용하여 간편하게 유효성 검증을 할 수 있는 라이브러리이다. class-validator의 데코레이터 종류를 알아보자! 데코레이터 설명 @IsEmpty() 값이 null, undefined, "" 인지 확인 @IsNotEmpty() 값이 null, undefined, "" 이 아닌지 확인 @IsIn(values: any[]) 값이 values 배열에 있는 값인지 확인 @IsNotIn(values: any[]) 값이 values 배열에 없는 값인지 확인 @IsBoolean() 값이 boolean 인지 확인 @IsDate() 값이 Date 인지 확인 @IsString() 값이 문자열인지 확인 @IsNumber(options: IsNumberOptions) 값이 nu..

NestJS는 일반적으로 아래와 같은 규칙을 따른다. 1. 파일명은 .으로 연결하고, 둘 이상의 단어로 구성되어 있을 시 -로 연결 hello.controller.ts my-first.controller.ts 2. 클래스명은 카멜 케이스 사용 HelloController MyFirstController 3. 같은 디렉터리에 있는 클래스의 경우 index.ts 사용 // index.ts 미사용 import { HelloController } from './contrllers/hello.controller' import { MyFirstController } from './contrllers/my-first.controller' // index.ts 사용 import { HelloController, MyF..

구조 분해 할당(Destructuring Assignment)? 배열이나 객체의 구조를 분해하여 분해된 값을 개별 변수에 담는 표현식 배열 구조 분해 변수를 선언하고 할당하는 과정 한 번에 가능 one, two, three는 우변에 위치한 arr의 값을 차례대로 할당받음 const arr = [1, 2, 3, 4, 5] const [one, two, three] = arr console.log(one, two, three) 1 2 3 객체 구조 분해 객체를 할당할 때는 분해하려는 프로퍼티의 키 사용 const obj = { x: 10, y: 20, z: 30 } const { x, y, z } = obj console.log(x, y, z) 10 20 30 변수 이름 변경 분해한 키에 :(콜론)을 붙이고..

아래와 같은 객체를 Object.entries()를 사용하여 배열로 변환해보자. const obj = { x: 10, y: 20, z: 30 } Object.entries()만 사용 const arr = Object.entries(obj) console.log(arr) [ [ 'x', 10 ], [ 'y', 20 ], [ 'z', 30 ] ] map과 같이 사용 const arr = Object.entries(obj).map(([key, value]) => ({key, value})) console.log(arr) [ { key: 'x', value: 10 }, { key: 'y', value: 20 }, { key: 'z', value: 30 } ] 배열을 객체로 변환하기 위해서는? Object.fro..

Prisma 프로젝트 설정 폴더 만들고 npm 초기화 mkdir prisma cd prisma npm init -y prisma, ts-node, @types/node 설치 npm install prisma @prisma/client typescript ts-node @types/node --save-dev prisma 초기화 npx prisma init 초기화하면 prisma 폴더와 .env 파일 생성 됨 .env에 환경변수 설정 DATABASE_URL="디비종류://유저이름:패스워드@localhost:포트번호/디비이름" DB_PORT=5432 DB_USER=test DB_PASSWORD=test DB_HOST=localhost DATABASE=postgres DB_SCHEMA=public DATABA..

단독으로 쓰거나 함수 안에서의 this Node.js에서는 global 브라우저에서는 window 엄격 모드에서는 undefined function f1() { return this; } // 브라우저 console.log(f1()); // window console.log(this); // window f1() === window; // true // Node.js console.log(f1()); // global console.log(this); // global f1() === global; // true function f2(){ "use strict"; // 엄격 모드 return this; } console.log(f2()); // undefined f2() === undefined; // ..