이 기술 블로그를 만들기 위해 5년을 미뤘다.

올해 2023년 6월부터 추가된 ES14의 여러 기능들에 대해 알아봅시다. 자세한 내용은 아래 홈페이지에서 확인 가능합니다. ECMAScript® 2023 Language Specification The first and subsequent editions of ECMAScript have provided, for certain operators, implicit numeric conversions that could lose precision or truncate. These legacy implicit conversions are maintained for backward compatibility, but not provided for BigI tc39.es 배열 관련 메소드 map, filter 등..

본격적인 업무에 들어가기 앞서, 타입스크립트에서 유용하게 사용할 수 있는 유틸리티 타입 종류에 대해 정리했다. 유틸리티 타입 종류는 아래 타입스크립트 공식 문서를 참고했다. Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 일반 유틸리티 타입 Awaited Promise 형태의 T 타입을 전달받아, 해당 Promise가 반환하는 리턴값의 타입을 반환한다. async ~ await의 await 키워드와 유사한 기능을 담당한다. type A = Awaited; // type A = string type B = Awaited; // type B = number type C = Aw..

자바스크립트에서는 a(anchor) 태그를 이용하여 페이지 이동 외에도 파일 다운로드 링크나 메일 링크 등 다양한 기능을 만들 수 있다. a 태그의 속성에 대해 간단히 알아보자. href 링크가 가리키는 URL로, HTTP 스킴 뿐만 아니라 브라우저가 지원하는 모든 URL 스킴의 사용이 가능하다. 또한, 페이지의 어느 한 요소로 이동할 수 있는 프래그먼트의 사용도 가능하다. 주로 사용되는 케이스는 아래와 같다. URL로 이동 // 1. 절대 경로로 이동 이동 // 2. 상대 경로로 이동 이동 // 3. 다른 origin으로 이동 이동 // 4. 동일한 scheme일 경우 생략 가능 이동 절대 경로 URL로 이동하는 경우에는 origin을 생략하고 이동하려는 경로만 작성하면 된다. 상대 경로 이동은 /(슬..

자바스크립트에서 사용되는 참조값으로는 대표적으로 object(객체)와 array(배열)이 있다. 객체와 배열은 자바스크립트의 Object 객체에서 제공하는 메소드를 이용하여 서로 형변환이 가능하다. object를 array로 변환하기 위해서는 Object.entries() 메소드를 사용할 수 있다. Object.entries는 object를 인자로 받아 [key, value] 형태의 배열을 값으로 갖는 2차원 배열을 반환한다. 객체의 키나 값만 배열로 가져오고 싶다면 Object.keys(), Object.values() 메소드를 사용하면 된다. const obj = { name: 'mjkim', age: 26, birth: '0128', address: 'dongdaemungu' }; const arr..

자바스크립트에서 배열을 정렬하기 위해서는 보통 sort() 메소드를 사용한다. 배열.sort([비교 함수]) 비교 함수는 ((이전 값, 현재 값) => { 정렬 가중치 함수 }) 형태로 이루어짐 정렬 가중치 함수는 특정 조건에 따라서 1, 0, -1 처럼 정렬의 기준이 되는 값을 리턴하거나 혹은 숫자 배열의 경우에는 가중치 자체가 되는 값을 리턴한다. sort() 메소드는 원본 배열을 변경하는 함수이며, 동시에 변경된 배열을 리턴하기 때문에 특정 변수에 sort된 배열 값을 저장할 수 있다. 그리고 비교 함수를 인자로 전달할 수 있다. 비교 함수는 다음과 같은 형태를 갖는다. // 조건에 따라 0보다 큰 수(1), 0, 0보다 작은 수(-1) 중 하나의 값을 반환한다. (prev, cur) => { //..

자바스크립트에서는 input type="file" 태그를 이용하여 이미지를 포함한 다양한 확장자의 파일을 업로드할 수 있다. 만약 이미지만 업로드하게끔 제한하고 싶다면 accept="image/*" 프로퍼티를 추가하면 된다. 이와 비슷하게 비디오 파일만 업로드하고 싶다면 accept="video/*", 오디오 파일만 업로드하고 싶다면 accept="audio/*" 이렇게 사용하면 된다. 혹은 특정 확장자만 허용하는 방법도 있다. 예를 들어 아래와 같이 작성하면 png, jpeg 확장자를 갖는 이미지만 업로드가 가능하다. // png, jpeg 확장자를 갖는 이미지만 업로드 허용 // 혹은 이제 업로드한 이미지 미리보기를 구현하는 방법을 알아보자. 미리보기를 구현하기 위해 널리 사용되는 두 가지 방법으로는..

window 전역 객체 내에는 location, navigator, web storage 등 다양한 프로퍼티가 존재한다. var 키워드로 선언된 전역 변수 또한 window 전역 객체의 프로퍼티로 접근이 가능하다. window 전역 객체는 식별자 window.을 앞에 붙이지 않고도 객체 내 프로퍼티에 접근이 가능하다. const path = window.location.pathname; const path2 = location.pathname; console.log(path === path2); // true window.navigator에 포함된 값으로 userAgent라는 값에 접근이 가능한데, userAgent는 HTTP 요청을 보내는 디바이스와 브라우저 등의 사용자 식별 정보를 담고 있는 head..

Typescript 타입 + 자바스크립트 브라우저에서 실행하려면 별도의 컴파일 과정 필요 장점 에러의 사전 방지 의도하지 않은 타입의 인자가 전달되었을 때 런타임(브라우저)이 아닌 개발 단계에서 오류를 탐지하여 수정할 수 있음 코드 가이드 및 자동 완성 용이 VSCode에서 해당 변수의 타입에 맞는 메소드 자동 완성 타입이라는 개념은 크게 아래 5가지를 의미 type alias interface class enum import 구문 JSDoc 소스코드 파일에 주석을 달기 위해 사용되는 마크업 언어 자바스크립트에서 타입스크립트처럼 코딩 가능 typedef / property를 사용하여 타입에 대한 힌트 제공 가능 /** * @typedef {object} Address * @property {string}..

타입스크립트에서 타입을 선언하는 방식에는 type 키워드를 사용한 type alias 방식과 interface 키워드를 사용한 방식 2가지가 있다. Type Alias type Point = { x: number; y: number; }; type SetPoint = (x: number, y: number) => void; Interface interface Point { x: number; y: number; } interface SetPoint { (x: number, y: number): void; } 둘의 차이점은 다음과 같다. 1. interface는 동일한 이름으로 재선언 가능 interface에서는 동일한 이름을 갖는 인터페이스를 중복하여 선언할 수 있다. 이를 선언 병합(Declaratio..

자바스크립트의 원시형 데이터 타입으로는 총 6가지가 있다. 숫자(Number) 문자열(String) 불리언(boolean) undefined null 심볼(Symbol) 그 중에서도 심볼이라는 타입이 있는데, 추가된 지도 얼마 안됐고(ES6) 보통 잘 사용되지는 않다 보니 지금까지 이게 뭘까 싶었는데, 오늘에서야 공부를 하게 됐다. 오늘은 심볼 타입에 대해 알아보자! 먼저, 심볼의 정의부터 알아보자면, 심볼(Symbol)이란? 다른 값과 중복되지 않는 자료형(unique) 이다. 심볼은 유일성이 보장되는 자료형이기 때문에 일반적으로 심볼 타입은 객체의 프로퍼티 키로 사용된다. 그럼 심볼 값은 어떻게 생성하며, 또 어떻게 사용할 수 있는지 알아보자! 심볼 값 생성 심볼 값은 Symbol() 함수를 호출하여..