JavaScript에서 흔하게 하는 실수를 정리해보자! async/await 에러 처리 누락에러 처리가 누락되면 에러가 조용히 사라지기 때문에 꼭 처리// 에러가 나도 아무 일도 안 일어남async function fetchUser() { const res = await fetch("/api/user"); return res.json();}// try/catch로 명확하게async function fetchUser() { try { const res = await fetch("/api/user"); if (!res.ok) throw new Error(`HTTP error: ${res.status}`); return res.json(); } catch (error) { con..
TypeScript를 사용하면서 활용할 수 있는 팁들을 정리해보자! 유틸리티 타입으로 타입 재사용- 이미 정의한 타입을 변형해서 사용 가능interface User { id: number; name: string; email: string; password: string;}// 모든 속성을 선택적으로 — 수정 API에서 유용type UpdateUser = Partial;// 일부 속성만 골라서 — 응답 데이터 타입으로 유용type PublicUser = Pick;// 일부 속성만 제외 — 민감한 정보 제거할 때type SafeUser = Omit; as const로 상수를 타입으로 활용- 상수와 타입을 따로 관리하지 않아도 되니 편리// status의 타입이 string으로 추론됨 — 너무 넓..
ECMAScriptECMA(European Computer Manufacturers Association)는 정보 통신 시스템의 표준을 관리하는 국제 표준화 기구ECMAScript는 ECMA가 정의한 스크립트 언어 표준으로, JavaScript의 공식 명칭 버전 히스토리ES3 (1999)- 정규표현식, try/catch 추가- 약 10년간 표준으로 사용 ES5(2009)// strict mode'use strict';// Array 메서드[1, 2, 3].forEach(item => console.log(item));[1, 2, 3].map(x => x * 2);[1, 2, 3].filter(x => x > 1);// Object 메서드Object.create();Object.keys();// JSON..
메모리 누수란?더 이상 사용하지 않는 메모리가 해제되지 않고 계속 쌓이는 현상 증상- 페이지가 점점 느려짐- 탭을 오래 켜두면 브라우저 멈춤- 모바일에서 앱이 강제 종료됨 주요 원인1. Event Listener 정리 X// 메모리 누수export default { mounted() { window.addEventListener('scroll', this.handleScroll); } // 컴포넌트 파괴 시 이벤트 리스너가 남아있음!}// 올바른 방법export default { mounted() { window.addEventListener('scroll', this.handleScroll); }, unmounted() { window.removeEventListener(..
문제 상황Canvas를 이용해 차트를 그렸는데,PC에서는 선명하게 잘 보이던 차트가 모바일 기기에서는 흐릿하고 뭉개져 보이는 현상 발생 원인Canvas는 두 가지 서로 다른 영역을 가지고 있다. 1. CSS 크기 (화면에 표시되는 크기)canvas { width: 400px; height: 300px;} 2. 내부 그리기 영역 (실제 픽셀 해상도) 이 두 크기가 다르면 브라우저가 내부 그리기 영역을 CSS 크기에 맞춰서 늘리거나 줄이는데,이 과정에서 화질이 저하된다. DPR(Device Pixel Ratio) 이란?- DPR = 물리적 픽셀 / 논리적 픽셀 고해상도 디스플레이는 같은 논리적 픽셀 공간에 더 많은 물리적 픽셀을 가지고 있다.- 일반 디스플레이: DPR = 1- 레티나 디스플레이: D..
개요사용자가 입력한 전화번호에 자동으로 하이픈(-)을 추가하여 가독성을 높이는 함수로,다양한 전화번호 형식(휴대폰, 서울 지역번호, 지방 지역번호, 대표번호 등)을 모두 지원 지원 형식입력출력설명158815881588-1588대표번호01011112222010-1111-2222휴대폰02555777702-555-7777서울 지역번호 (8자리)021234567802-1234-5678서울 지역번호 (10자리)0315557777031-555-7777지방 지역번호 (10자리)03112345678031-1234-5678지방 지역번호 (11자리) 기본 코드const formatPhoneNumber = (phoneNumber) => { if (!phoneNumber) return null; // 숫자만 추출 co..
문제 상황동적으로 생성되는 문장에서 한글 조사를 올바르게 붙여야 함// ❌`${name}을 선택했습니다.` // "사과을 선택했습니다."`${name}를 선택했습니다.` // "강하늘를 선택했습니다."// ✅`${name}${getJosa(name, '을/를')} 선택했습니다.`// "사과를 선택했습니다."// "강하늘을 선택했습니다." 한글 조사를 구분하기 위해서는 마지막 문자의 받침 유무를 체크하여 처리하면 된다.마지막 문자에 받침이 있으면 '-이/-을/-은/-과', 받침이 없으면 '-가/-를/-는/-와'가 된다. 받침 확인 공식const lastChar = '강';const code = lastChar.charCodeAt(0); // 0xAC15const jongseong = (code - 0..
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..