공유JavaScript, TypeScript 검색 결과

해당 글 45건

[TS] 타입스크립트에서 객체의 특정 키 값을 안전하게 변경하는 방법

타입스크립트에서는 객체의 특정 key에 대한 값을 변경할 때, 타입 안전성을 유지하는 것이 중요합니다.이번 글에서는 타입 안전성을 유지하면서 객체의 값을 수정하는 두 가지 방법을 알아보겠습니다.방법 1: 객체 확장 방식아래 코드는 객체의 특정 key에 따라 값을 수정하는 예제입니다.interface User { addr: string; name: string; age: number; gender: "M" | "W";}type UserKey = keyof User;type UserValue = User[UserKey];const user: User = { addr: "", name: "", age: 0, gender: "M",};const onChangeUser = (user: User, k..
공유/JavaScript, TypeScript 4개월 전

[JS] ?? 와 || 연산자 차이

nullish coalescing operator (??)?? 연산자는 null, undefined 인 경우 기본값을 제공하는 연산자입니다.const value = variable ?? "default";variable 값이 null, undefined 인 경우 default 값으로 설정됩니다.logical or operator (||)falsy 값인 경우 기본값을 제공하는 연산자입니다.즉, 개발자의 의도와 맞지 않게 false, 0, '', NaN 과 같은 값에서도 default 값으로 설정될 수 있습니다.const value = 0 || "default"; // defaultconst value = 0 ?? "default"; // 0strictNullChecks 설정tsconfig.json 파일 s..
공유/JavaScript, TypeScript 5개월 전

[JS,TS] 문자열에 있는 uuid 제거하기

문자열에 있는 uuid 제거하기window.location.pathname으로 주소창에 있는 데이터를 사용할 일이 있었습니다.이 경우 다이나믹 라우팅을 위해 uuid가 있는 경우, 해당 uuid를 제거하여 보여주어야 했습니다.uuid를 간단하게 제거할 수 있는 함수를 구현해봅시다. const removeUUID = (str: string) => { // UUID 감지 정규식 (8-4-4-4-12) const uuidRegex = /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/; return url.replace(uuidRegex, "");}위처럼 정규식을 이용하면 간단하게 uuid를 제거할 수 있습니..
공유/JavaScript, TypeScript 5개월 전

[JS,TS] 문자열로 되어 있는 new Date 함수 실행하기

문자열로 되어 있는 new Date 함수 실행하기로그를 이용하여 사용자 행동 패턴 분석을 확인할 수 있는 서비스를 구현하고 있습니다.프론트에서 aggregation 명령어를 작성하여 문자열 그대로 서버에 전송하여, 서버에서 문자열을 파싱하여 제대로 된 aggregation 명령어로 변환 후 실행합니다.이 경우 프론트에서 new Date("날짜") 함수를 작성하게 되면 문자열이기 때문에 서버에서 제대로 처리를 할 수 없습니다.모든 경우가 아래처럼 key, value 형태인 객체로 되어 있습니다.아래 형태가 모두 문자열이라고 가정하고 new Date를 어떻게 실행시킬 수 있을까, 실행하는 방법을 알아보도록 하겠습니다. date: { $gte: new Date("날짜"), $lte: new Date(..
공유/JavaScript, TypeScript 5개월 전

[JS,TS] 문자열로 되어 있는 정규식 실행하기

문자열로 되어 있는 정규식 실행하기로그를 이용하여 사용자 행동 패턴 분석을 확인할 수 있는 서비스를 구현하고 있습니다.프론트에서 aggregation 명령어를 작성하여 문자열 그대로 서버에 전송하여, 서버에서 문자열을 파싱하여 제대로 된 aggregation 명령어로 변환 후 실행합니다.이 경우 프론트에서 new RegExp("정규식") 함수를 작성하게 되면 문자열이기 때문에 서버에서 제대로 처리를 할 수 없습니다.모든 경우가 아래처럼 key, value 형태인 객체로 되어 있습니다.아래 형태가 모두 문자열이라고 가정하고 new RegExp 어떻게 실행시킬 수 있을까, 실행하는 방법을 알아보도록 하겠습니다. 코드const regexs = obj[key].match(/new RegExp\((.+?)\)/..
공유/JavaScript, TypeScript 5개월 전

[dayjs] DayJS를 이용하여 날짜 다루기

[dayjs] DayJS를 이용하여 날짜 다루기날짜 라이브러리 중에서 아직까지 moment의 다운로드 수가 상당히 높습니다.그러나 그 뒤를 빠르게 따라오는 라이브러리가 dayjs 입니다.사용방법도 매우 유사합니다. 간단하고 빠르게 한번 알아보도록 하겠습니다.설명보다는 코드 위주로 작성해두겠습니다.dayjs 라이브러리 설치하는 것은 패스하도록 하겠습니다.dayjs 년월일 시분초 값 가져오기각 함수를 이용하여 가져오기해당 방식은 년, 월, 일, 시, 분, 초 각각의 값이 필요할 때 사용하면 좋습니다.const dayjs = require("dayjs");const dj = dayjs();const year = dj.year();const month = dj.month();const date = dj.date..
공유/JavaScript, TypeScript 7개월 전

[JS/TS] 서아라비아, 동아라비아 숫자 변환하기

[JS/TS] 서아라비아, 동아라비아 숫자 변환하기숫자 종류 확인하기숫자에도 종류가 있는 것을 아시나요?서아라비아 : 0~9동아라비아 : ٠,١,٢,٣,٤,٥,٦,٧,٨,٩ (아랍 문자)입니다.따라서 이집트와 같이 동아라비아 숫자를 사용하는 국가의 경우 따로 변환 작업이 필요합니다.편의상 서아라비아 숫자는 아라비아 숫자, 동아라비아 숫자는 아랍 숫자라고 표기하겠습니다.아라바이, 아랍 숫자 변환하기변환하는 방법은 간단합니다.const ARABIC_TO_ARABIA: { [index: number]: string } = { 1: "١", 2: "٢", 3: "٣", 4: "٤", 5: "٥", 6: "٦", 7: "٧", 8: "٨", 9: "٩", 0: "٠",};const ARABIA_..
공유/JavaScript, TypeScript 7개월 전

[JS/TS] TTS, Text to Speech 구현하기

JavaScript(TypeScript)를 이용하여 Text를 Voice로 변환하는 방법을 알아보도록 하겠습니다.다른 라이브러리를 사용하지 않고 구현이 가능합니다.코드는 TypeScript로 구현하겠습니다.TTS 구현const onSpeakToText = (text: string) => { const utterance = new SpeechSynthesisUtterance(text); utterance.lang = 'ko-KR'; window.speechSynthesis.speak(utterance);}text를 한국어로 읽어주는 함수를 구현하였습니다.TTS 속도 조절하기읽는 속도를 빠르게 또는 느리게 조절도 가능합니다.const onSpeakToText = (text: string, rate: n..
공유/JavaScript, TypeScript 7개월 전

[JavaScript] 만 나이 계산하는 방법

[JavaScript] 만 나이 계산하는 방법만 나이를 계산해야하는 경우가 생겨 간단하게 구현하였습니다.사실 0세 미만의 나이는 없지만 예외처리는 따로 하지 않고 0으로 반환하였습니다.로직은 간단하여 설명은 생락하도록 하겠습니다.const getFullAge = (dob: Date, target: Date = new Date()) => { const dobYear = dob.getFullYear(); const dobMonth = dob.getMonth() + 1; const dobDate = dob.getDate(); const targetYear = target.getFullYear(); const targetMonth = target.getMonth() + 1; const targetDa..
공유/JavaScript, TypeScript 8개월 전

[JavaScript] 배열 리스트를 객체로 그룹화 하는 방법

[JavaScript] 배열 리스트를 객체로 그룹화 하는 방법회사에서 GroupSelect 컴포넌트를 구현하였습니다.props로 list를 넘겨주면 해당 컴포넌트 내에서 특정 type을 기준으로 그룹핑을 하였습니다.이 부분이 불편하여 찾아보다가 좋은 방법을 발견하여 게시글을 작성합니다.기존 방식const groupBy = (array, type) => { return array.reduce((x, y) => { (x[y[type]] = x[y[type]] || []).push(y); return x; }, {});};const users = [ { name: "강호동", gender: "man" }, { name: "이효리", gender: "woman" }, ..
공유/JavaScript, TypeScript 8개월 전