공유/JavaScript, TypeScript 검색 결과

해당 글 32건

[JavaScript] DayJS Timezone 다루는 방법

[JavaScript] DayJS Timezone 다루는 방법 dayjs 라이브러리에서 타임존 다루기 dayjs를 사용하여 날짜 관련 작업을 하고 있습니다. 타임존 작업을 하는 방법과 제가 실수하거나 헷갈렸던 부분을 정리하여 공유하려고 합니다. 공통 dayjs.extend(utc) dayjs.extend(timezone) 위 코드는 기본적으로 작성해주시면 됩니다. dayjs.tz.setDefault 주의점 dayjs.tz.setDefault 함수는 타임존을 변경할 때 사용합니다. 타임존이 변경된 객체는 dayjs 객체가 아닌 dayjs.tz의 객체입니다. dayjs로 생성하는 것과 dayjs.tz를 이용하여 생성하는 것의 차이를 확인해보겠습니다. const utc = require("dayjs/plugi..
공유/JavaScript, TypeScript 2024. 3. 17. 17:51

[TypeScript] type guard 만드는 방법

[TypeScript] type guard 만드는 방법 type guard 타입스크립트에서 변수의 타입을 판단할 때, 주로 타입 가드(Type Guard)를 활용합니다. 원시 값, 배열, 날짜 객체 등을 판단하는 경우, 다음과 같은 타입 가드를 사용할 수 있습니다. 원시 값, 배열, 날짜 객체 판단하는 방법 function isNumber(value: any): value is number { return typeof value === "number"; } function isString(value: any): value is string { return typeof value === "string"; } function isBoolean(value: any): value is boolean { retu..
공유/JavaScript, TypeScript 2024. 3. 17. 16:43

[TypeScript] 타입스크립트 union 타입 합치기

[TypeScript] 타입스크립트 union 타입 합치기 아래 문제를 해결할 수 있다면 게시글을 읽을 필요는 없습니다. const GENDER = ["남자", "여자"] as const; type Gender = typeof GENDER[number]; const DECADES = ["20", "30", "40"] as const; type Decades = typeof DECADES[number]; type GenderDecades = `${Gender}_${Decades}` const GENDER_DECADES: GenderDecades[] = ???; 코드를 추가하셔서 ??? 부분에 특정 코드를 작성했을 때 에러가 발생하지 않으면 됩니다. union 타입 합치기 TypeScript에서 union ..
공유/JavaScript, TypeScript 2024. 1. 16. 19:35

[JavaScript] Binary 데이터 이미지로 변환하기

[JavaScript] Binary 데이터 이미지로 변환하기 Binary 데이터를 이미지로 변환하는 작업을 알아보겠습니다. 동작 플로우는 아래와 같다고 가정하겠습니다. 1. post 요청 2. 응답 데이터 포맷 : binary 3. binary data를 jpg로 변환 위 동작을 하는 코드를 간단하게 작성하면 아래와 같습니다. import axios from "axios"; import fs from "fs"; const token = ""; const bodyData = {}; const response = await axios.post("url", bodyData, { headers: { Authorization: `Bearer ${token}`, ContentType: "application/jso..
공유/JavaScript, TypeScript 2022. 9. 23. 09:07

[dayjs] dayjs를 이용하여 Date 객체 잘 다루기

[dayjs] dayjs를 이용하여 Date 객체 잘 다루기 프로그래밍을 하면서 날짜 관련 작업을 하는 경우가 많이 있습니다. 간단한 경우는 Date 객체를 사용하면 되지만 복잡한 경우 날짜 관련 라이브러리를 사용하는 것이 간편합니다. 기존에는 moment를 사용하였지만 용량이 너무 크고 지원 중단이 되었습니다. 여러 대체 라이브러리를 찾다가 dayjs를 선택하였습니다. dayjs의 특징은 extend를 이용하여 내가 원하는 플러그인을 추가하여 사용할 수 있다는 것입니다. 위 내용은 차차 알아보고 dayjs로 Date를 다루는 방법을 알아보겠습니다. dayjs 설치 이 게시글을 보시는 분은 대부분 npm은 사용하실 줄 안다고 생각합니다. 따라서 설치 및 가져오기는 명령어만 작성하겠습니다. ◆ dayjs ..
공유/JavaScript, TypeScript 2022. 9. 17. 11:11

[JavaScript] 문자열 반복문 돌리기, 문자열을 배열로 변환하기

[JavaScript] 문자열 반복문 돌리기, 문자열을 배열로 변환하기 코딩을 하다보면 문자열을 반복문 돌리고 싶을 경우가 있다. 이때 간단하게 forEach 함수를 사용하면 편할 거 같은데 문자열은 Array가 아니어서 forEach 함수를 사용할 수 없다 . 어떻게 하면 문자열을 반복문으로 하나씩 꺼낼 수 있을 지 알아보자. 문자열 반복문 돌리기 우선 필자는 forEach를 사용하고 싶다. forEach를 사용하기 위해서는 위에서도 언급하였지만 Array가 되어야 한다. 그렇다면 string to array 즉, 문자열을 배열로 만들어주면 끝이 난다. 어떻게 하면 문자열을 배열로 만들 수 있을까? ◆ 문자열을 배열로 변환하기 JavaScript에서 문자열을 배열로 변환하는 방법은 많이 있을 것이다. ..
공유/JavaScript, TypeScript 2022. 4. 4. 18:36

[JavaScript] 배열 원소 swap, 요소 swap

[JavaScript] 배열 원소 swap, 요소 swap 값을 swap 하는 방법은 너무 유명합니다. temp 변수를 만들어서 swap을 하는 방법입니다. (코드 생략) 배열 안의 요소를 swap 하는 경우도 동일한 방법으로 swap 하면 됩니다. 그러나 JavaScript인 경우 최신 문법을 이용하면 아주 손쉽게 배열 요소를 swap 할 수 있습니다. 한번 간단하게 알아보겠습니다. 배열 원소 swap 하기 JavaScript 최신 문법에는 구조 분해 할당 (Destructuring)이 있습니다. 이것을 이용하면 배열 원소를 쉽게 swap할 수 있습니다. 아래 코드를 확인해봅시다. const arr = [1, 2, 3, 4, 5]; console.log("# swap 전 arr", arr); [arr[..
공유/JavaScript, TypeScript 2022. 3. 23. 18:40

[JavaScript] async await로 비동기 처리 개선하기

[JavaScript] async await로 비동기 처리 개선하기 이전 게시글 Promise로 callback 지옥 무찌르자에서 확인한 promise로 비동기 처리하는 방법을 조금 더 깔끔하게 처리할 수 있도록 async await을 배워보겠습니다. async await ◆ 가독성 async await는 비동기 처리를 보다 더 깔끔하게 처리할 수 있는 방법입니다. 사용은 아래와 같이할 수 있습니다. async function asyncFn() { await 비동기함수(); } 위와 같이 async, await 만 추가하면 사용할 수 있습니다. 그럼 이게 왜 promise만 사용하는 것보다 더 좋을까요? 우선 가독성이 promise 보다 더 좋습니다. 아래 예시를 참고해봅시다. function getDa..
공유/JavaScript, TypeScript 2022. 3. 2. 05:42

[JavaScript] promise, callback 지옥 없애기

[JavaScript] Promise로 callback 지옥 무찌르자 promise는 JavaScript에서 비동기 작업을 수행하는 객체입니다. promise를 학습하고 callback 지옥을 탈출해봅시다. Promise ◆ mini Promise 3가지 상태 Promise 3가지 상태가 있습니다. 1. 대기 (Pending) : 초기 상태 2. 이행 (Fulfilled) : 성공 3. 거부 (Rejected) : 실패 대기에서 연산이 시작되면 이행이 되거나 거부가 됩니다. 즉 pending -> fulfilled or rejected 로 이해하시면 됩니다. 이제 각각의 상태를 한번 만들어봅시다. 상태를 만들어 보기 전 promise는 아래와 같이 사용됩니다. new Promise((resolve, re..
공유/JavaScript, TypeScript 2022. 2. 24. 20:06

[JavaScript] callback과 callback 지옥

[JavaScript] callback과 callback 지옥 개발하다 보면 한번쯤은 callback 지옥을 경험하게 됩니다. 이때 불편함을 느끼고 많은 개발자들이 promise, async, await을 학습하여 callback 지옥을 벗어납니다 지옥을 벗어나기 전 이번 게시글에서는 callback 함수가 무엇인지? callback 지옥이 무엇인지? 한번 알아보도록 하겠습니다. callback callback, callback이라고 하는데 callback 함수가 무엇일까? callback 함수란 특정 동작을 하고 난 뒤에 추가로 동작할 함수이다. 어떤 동작이 작동한 후에 이것을 실행해줘하고 등록된 함수라고 하는 것이 더 이해하기 쉬울 것 같다. 예를들어 밥 먹은 뒤 설거지 해 라고 한다면 설거지 하는 ..
공유/JavaScript, TypeScript 2022. 2. 17. 06:02