티스토리

코드에 빠지다
검색하기

블로그 홈

코드에 빠지다

codiving.kr/m

개인 프로젝트 정리 및 개발 관련 지식 공유를 위한 블로그입니다.

구독자
0
방명록 방문하기
공지 코드에 빠지다 모두보기

주요 글 목록

  • [eslint] interface, type Pascal Case로 강제하기 TypeScript로 개발할 때, interface와 type을 이용하여 타입을 선언하는 경우가 많습니다.이때 일반적으로 Pascal Case를 사용하여 타입 이름을 작성하는데, ESLint를 이용해 이를 강제하는 방법을 알아보겠습니다.{ rules: { '@typescript-eslint/naming-convention': [ 'error', { selector: ['interface', 'typeAlias'], format: ['PascalCase'], custom: { regex: '^[A-Z][a-zA-Z0-9]*$', match: true, }, }, ], },} @typ.. 공감수 1 댓글수 0 2024. 11. 14.
  • [eslint] undefined 할당 금지 undefined 할당 금지undefined선언했으나 초기화하지 않은 변수, 함수의 반환 값이 없을 때, 객체에 존재하지 않는 속성 등에 자바스크립트가 자동으로 할당하는 값 입니다.코드에서 명시적으로 할당하지 않도록 합니다.null개발자가 의도적으로 값이 없음을 표현하고 싶을 때 사용합니다.예를 들어, 객체의 속성을 아직 할당하지 않았거나 특정 변수에 값이 없음을 명확히 하기 위해 null을 사용합니다.{ "rules": { "no-undefined": "error" }}no-undefinedundefined를 할당하지 못 하게 하는 규칙입니다. 공감수 0 댓글수 0 2024. 11. 14.
  • [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.. 공감수 1 댓글수 1 2024. 11. 14.
  • [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.. 공감수 0 댓글수 0 2024. 10. 22.
  • [eslint] 불필요한 타입 단언 (as) 찾기 불필요한 타입 단언, 불필요한 as 찾기TypeScript로 개발 시 as의 사용은 버그를 발생시킬 수 있기 때문에 지양하게 됩니다.그러나 개발하다보면 어쩔 수 없이 as를 사용하게 되는 부분이 있습니다.이때 타입 추론이 되었는데 작성하는 경우도 있습니다.이렇게 불필요하게 작성된 as를 찾아주는 규칙을 알아보겠습니다.{ "rules": { "@typescript-eslint/no-unnecessary-type-assertion": "error" }}no-unnecessary-type-assertion해당 규칙은 타입을 명확히 알고 있음에도 불구하고 as를 이용하여 타입 단언한 경우를 찾아줍니다.const someValue: string = "Hello";const value = someValue.. 공감수 1 댓글수 0 2024. 10. 22.
  • [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를 제거할 수 있습니.. 공감수 0 댓글수 0 2024. 10. 21.
  • [JS,TS] 문자열로 되어 있는 new Date 함수 실행하기 문자열로 되어 있는 new Date 함수 실행하기로그를 이용하여 사용자 행동 패턴 분석을 확인할 수 있는 서비스를 구현하고 있습니다.프론트에서 aggregation 명령어를 작성하여 문자열 그대로 서버에 전송하여, 서버에서 문자열을 파싱하여 제대로 된 aggregation 명령어로 변환 후 실행합니다.이 경우 프론트에서 new Date("날짜") 함수를 작성하게 되면 문자열이기 때문에 서버에서 제대로 처리를 할 수 없습니다.모든 경우가 아래처럼 key, value 형태인 객체로 되어 있습니다.아래 형태가 모두 문자열이라고 가정하고 new Date를 어떻게 실행시킬 수 있을까, 실행하는 방법을 알아보도록 하겠습니다. date: { $gte: new Date("날짜"), $lte: new Date(.. 공감수 0 댓글수 0 2024. 10. 21.
  • [JS,TS] 문자열로 되어 있는 정규식 실행하기 문자열로 되어 있는 정규식 실행하기로그를 이용하여 사용자 행동 패턴 분석을 확인할 수 있는 서비스를 구현하고 있습니다.프론트에서 aggregation 명령어를 작성하여 문자열 그대로 서버에 전송하여, 서버에서 문자열을 파싱하여 제대로 된 aggregation 명령어로 변환 후 실행합니다.이 경우 프론트에서 new RegExp("정규식") 함수를 작성하게 되면 문자열이기 때문에 서버에서 제대로 처리를 할 수 없습니다.모든 경우가 아래처럼 key, value 형태인 객체로 되어 있습니다.아래 형태가 모두 문자열이라고 가정하고 new RegExp 어떻게 실행시킬 수 있을까, 실행하는 방법을 알아보도록 하겠습니다. 코드const regexs = obj[key].match(/new RegExp\((.+?)\)/.. 공감수 0 댓글수 0 2024. 10. 21.
  • [eslint] 구조 분해 할당 관련 규칙 구조 분해 할당과 관련된 eslint 규칙에 대해 알아보도록 하겠습니다.최종 규칙을 보여드리면 아래와 같습니다.하나씩 알아보도록 하겠습니다.{ "rules": { "prefer-destructuring": "off", "no-empty-pattern": "error", "no-useless-rename": "error", "no-unused-vars": "warn", "@typescript-eslint/no-unused-vars": [ "error", { "args": "none", "argsIgnorePattern": "^_", "varsIgnorePattern": "^_", "ignoreRestSibli.. 공감수 0 댓글수 0 2024. 10. 21.
  • [eslint] optional chaining, 옵셔널 체이닝 관련 규칙 optional chaining(옵셔널 체이닝, ?.)과 관련된 eslint 규칙에 대해 알아보도록 하겠습니다.{ "rules": { "no-unsafe-optional-chaining": "error", "@typescript-eslint/prefer-optional-chain": "error" }}no-unsafe-optional-chaining옵셔널 체이닝이 필요 없는 곳에 사용된 위치를 찾아주는 규칙입니다.옵셔널 체이닝은 null, undefined가 될 수 있는 곳에 사용해야 합니다.// badconst obj = { name: "name" }console.log(obj?.name)@typescript-eslint/prefer-optional-chain옵셔널 체이닝을 권장하는 규칙.. 공감수 0 댓글수 0 2024. 10. 21.
  • [eslint] switch 문 switch 문과 관련된 eslint 규칙에 대해 알아보도록 하겠습니다.최종 규칙을 보여드리면 아래와 같습니다.하나씩 알아보도록 하겠습니다.{ "rules": { "default-case": "error", "no-fallthrough": "error", "no-case-declarations": "error", "consistent-return": "error", "no-duplicate-case": "error" }}default-caseswitch 문에 default 케이스가 존재하도록 강제하는 규칙입니다.// badswitch (condition) { case 1: break;}// goodswitch (condition) { case 1: break;.. 공감수 1 댓글수 1 2024. 10. 21.
  • [eslint] 삼항연산자 관련 규칙 삼항연산자를 사용할 때, 도움이 되는 eslint 규칙에 대해 알아보도록 하겠습니다.{ "rules": { "no-unneeded-ternary": "error", "multiline-ternary": "off" }}no-unneeded-ternary불필요하게 사용된 삼항연산자를 찾아주는 규칙입니다.// badconst value = condition ? true : false;// goodconst value = Boolean(condition);multiline-ternary삼항연산자를 사용할 때, 가독성을 위해 줄바꿈을 강제하는 규칙입니다.저 같은 경우 가독성에 큰 문제를 느끼지 못 하고 있기 때문에 해당 규칙은 사용하지 않습니다.// bad ..?const value = condit.. 공감수 0 댓글수 0 2024. 10. 21.
  • [eslint] 사용하지 않는 변수 찾기 사용하지 않는 변수와 관련된 eslint 규칙에 대해 알아보도록 하겠습니다.최종 규칙을 보여드리면 아래와 같습니다.하나씩 알아보도록 하겠습니다.{ "rules": { "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": [ "error", { "args": "none", "argsIgnorePattern": "^_", "varsIgnorePattern": "^_", "ignoreRestSiblings": true } ] }}no-unused-varsJavaScript로 작성된 코드의 경우에만 적용이 됩니다.만약 JavaScript 프로젝트만 사용하신다면.. 공감수 0 댓글수 0 2024. 10. 21.
  • [eslint] if 문과 관련된 규칙 if 문과 관련된 eslint 규칙에 대해 알아보도록 하겠습니다.최종 규칙을 보여드리면 아래와 같습니다.하나씩 알아보도록 하겠습니다.{ "rules": { "curly": ["error", "all"], "no-constant-condition": "error", "no-lonely-if": "error", "no-negated-condition": "warn", "no-else-return": "warn" }}curlyif문 외에 중괄호를 사용하는 if, else, for, while 등에 적용되는 규칙입니다.강제로 중괄호를 작성하게 함으로써 가독성을 높이고 실수를 방지할 수 있습니다.// badif (condition) statement;// goodif (conditi.. 공감수 0 댓글수 0 2024. 10. 21.
  • [eslint] 불필요한, 의미없는 코드를 찾기 코드를 작성하면 불필요하고 의미없는 코드가 생기는 경우가 있습니다.이때 일일이 찾기가 힘든데 eslint를 이용하여 불필요한 표현식을 찾을 수 있습니다. { "rules": { "no-unused-expressions": "error" }}no-unused-expressions아래 코드는 정상적으로 실행되지 않는 불필요한 코드입니다.접근은 가능하지만 기능이 존재하지 않습니다.위 규칙을 사용하면 아래와 같은 코드를 찾아줍니다. const router = useRouter();router;1 + 2; 공감수 0 댓글수 0 2024. 10. 21.
  • NextJS 페이지 라우터에서 모든 페이지 라우트 확인하는 방법 NextJS 페이지 라우터에서 모든 페이지 라우트 확인하는 방법.페이지 라우터는 page 디렉터리 구조에 따라 자동으로 라우트가 생성됩니다.프로젝트의 모든 라우트를 알아야 하는 필요성이 생겨 구현하였습니다.코드type Page = string;export const getStaticProps: GetStaticProps = async () => { const pagesDir = path.join(process.cwd(), 'pages'); const pages = getAllPages(pagesDir); return { props: { pages, }, };};function getAllPages(dir: string, basePath: string = ''): Page[] {.. 공감수 0 댓글수 0 2024. 10. 16.
  • Next에서 특정 페이지에 사용자가 머무는 시간 측정 방법 구글 애널리틱스(GA)를 이용하여 해결할 수 있습니다. 그러나 자체적으로 관리하기 위해 커스텀 훅을 구현하였습니다.학습 개념Next.js 페이지 로드 이벤트Next.js 페이지 이탈, 종료 이벤트Next.js 새로고침 이벤트usePageStayDurationusePageStayDuration 훅은 사용자가 현재 페이지에 머무는 시간을 측정하는 기능을 제공합니다.이 훅은 Next.js의 라우터 이벤트를 활용하여 페이지 전환 및 새로 고침 시 머무른 시간을 기록합니다.아래에서 이 훅의 동작 방식과 구현 세부 사항을 설명하겠습니다.코드먼저 구현된 코드를 확인해보도록 하겠습니다.import { useRouter } from "next/router";import { useEffect, useRef } from ".. 공감수 2 댓글수 1 2024. 10. 16.
  • Typography 스토리 구현하기 Typography 스토리 구현하기Storybook 연동이 완료되었으니, 이제 Typography 컴포넌트의 스토리를 구현해보겠습니다.기본 Typography 스토리 하나와 모든 variant를 동시에 보여주는 스토리를 작성할 예정입니다.메타 데이터 작성하기argTypes를 통해 사용자가 변경할 수 있는 항목들을 정의합니다.description: 해당 prop에 대한 간단한 설명을 추가합니다.control: 테스트할 방법을 지정하여 사용자가 해당 prop을 쉽게 조작할 수 있게 합니다.args를 이용하여 기본 값을 설정할 수 있습니다.각 props의 이름과 기본값을 적어주면, 스토리에서 기본 상태를 확인할 수 있습니다.const meta = { title: "Typography", component:.. 공감수 1 댓글수 0 2024. 9. 23.
  • Storybook 연동하기 Storybook 연동하기컴포넌트를 쉽게 확인하고 관리할 수 있는 좋은 방법은 Storybook을 사용하는 것입니다.이번 포스트에서는 Next.js 14와 Emotion을 활용해 Storybook을 연동하는 방법을 알아보겠습니다.Storybook 설치먼저, Storybook을 설치합니다. 아래 명령어를 실행하세요.npx storybook@latest init설치가 완료되면 여러 개의 프로토타입 코드와 이미지가 생성됩니다.이 과정이 끝나면, .storybook 폴더를 제외한 모든 파일을 삭제해 주세요.단, stories 폴더는 남겨둡니다. 이 폴더에 앞으로 컴포넌트의 Story 파일을 작성할 예정입니다.지금까지 코드 확인하기Emotion 연동프로젝트에서 Emotion을 사용 중이라면, Storybook에 .. 공감수 0 댓글수 0 2024. 9. 23.
  • Typography 컴포넌트 구현하기 Typography 컴포넌트 구현하기Typography 컴포넌트는 텍스트를 보여주기 위한 컴포넌트입니다.일반적으로 HTML에서 텍스트를 표시할 때는 span 또는 p 태그를 사용합니다.제가 구현한 Typography 컴포넌트는 기본적으로 span 태그를 사용하지만, 사용자가 필요에 따라 p 태그로 변경할 수 있도록 유연하게 설계되었습니다.Typography 구현하기propsinterface TypographyProps { color?: TypographyColor; align?: "inherit" | "center" | "right" | "left"; variant?: TypographyVariant; noWrap?: boolean; component?: ElementType; children.. 공감수 0 댓글수 0 2024. 9. 23.
  • Theme 타입, 값 설정 및 적용 프로젝트 내에서 색상, 그림자, break points 등 공통된 UI를 가지기 위해 theme을 사용합니다.해당 게시글에서는 theme 타입, 값을 생성해보도록 하겠습니다.그리고 해당 값을 ThemeProvider에 주입하여 프로젝트 어디에서든지 사용할 수 있도록 하겠습니다.간단한 내용이라 코드에 대한 설명보다는 왜 해당 작업을 하였는지 설명을 작성하였습니다.코드는 github 링크를 통해 확인할 수 있도록 하였습니다.Theme 타입, 값 설정전반적인 색상을 위한 palette글자를 위한 typographymedia query를 위한 break points내부적으로 색상 alias를 위한 colorltr, rtl direction을 위한 directionlight mode, dark mode를 위한 m.. 공감수 0 댓글수 0 2024. 9. 19.
  • React(Next) + Emotion로 MUI 따라 만들기 React로 개발할 때 UI 라이브러리를 사용하면 빠르게 구현할 수 있지만, 커스터마이징이 복잡하고 시간이 많이 소요되는 단점이 있습니다.이를 해결하기 위한 headless 컴포넌트 라이브러리도 있지만, 인력과 시간이 충분하다면 직접 구현하는 것도 좋은 대안이 될 수 있습니다.사이드 프로젝트로 도전해 보는 것도 의미 있을 것 같아 시작하게 되었습니다.개발 환경개발 환경은 NextJS 14 + Emotion입니다.CRA 대신 Next 14를 사용하고 싶었고, 아직 SSR에서 정상 동작하지 않습니다.따라서 "use client"를 추가해야 하지만, 익숙한 Emotion을 계속 사용하기로 했습니다. NextJS14 + Emotion 개발환경 셋팅하기NextJS14와 emotion을 이용하여 개발환경을 셋.. 공감수 1 댓글수 0 2024. 9. 19.
  • react native + expo를 이용한 webview 앱 개발환경 react native + expo를 이용한 webview 앱 개발환경미래의 제가 보기 위해 작성하는 것이므로 간단하게 작성하였습니다.사전 준비expo 회원가입 - 회원가입 하러가기명령어여기서부터는 명령어 나열입니다.- create-expo-app 명령어를 이용한 프로젝트 설치npx create-expo-app my-app- eas cli 설치npm install -g eas-cli- eas logineas login- eas build:configureeas build:configure위 작업을 완료하면 eas.json 파일이 생성됩니다.- 해당 링크를 클릭하여 eas.json에 적혀있는 코드를 복붙기존 eas.json 파일의 build를 교체해주시면 됩니다.- app 빌드 명령어eas build -p.. 공감수 1 댓글수 0 2024. 9. 19.
  • [React] Context API vs Zustand 렌더링 비교 Context API vs Zustand 렌더링 비교React에서 상태 관리를 위한 라이브러리는 다양합니다.내장된 Context API부터 Redux, MobX, Recoil, Zustand 등 여러 가지가 있습니다.각 라이브러리의 장단점은 사용자에 따라 다르게 느껴질 수 있지만, 이번 글에서는 Zustand를 사용한 경험을 바탕으로 렌더링 최적화에 대해 살펴보려고 합니다.많은 글에서 Zustand와 같은 라이브러리를 사용하면 Context API에 비해 렌더링이 더 최적화된다고 언급됩니다.그러나 실제로 이를 테스트해본 글은 찾기 어렵습니다.이번 글에서는 실제로 렌더링이 어떻게 최적화되는지 직접 확인해보겠습니다.결과빠르게 결과부터 확인해봅시다.• Context API - 코드• Zustand 실패 - 코.. 공감수 0 댓글수 0 2024. 9. 10.
  • github action을 이용하여 PR시 효율적으로 tsc, eslint 검사하기 github action을 이용하여 PR시 효율적으로 tsc, eslint 검사하기github action을 이용하여 PR시 merge branch 코드를 검사할 필요가 있습니다.하고 싶은 것PR 시 merge branch의 코드가 정상적인지 검사할 필요가 있음.monorepo 프로젝트이기 때문에 변경된 모든 프로젝트를 검사해야함.기존 해결 방법 및 문제점 [1]커밋 메시지 컨벤션으로 커밋 메시지에 변경된 파일의 프로젝트 명을 작성하게 하였습니다.그럼 해당 커밋에서 어떠한 프로젝트의 파일이 변경되었는지 파악할 수 있습니다.해당 정보를 이용하여 변경된 파일의 프로젝트를 tsc, eslint를 수행하여 문제를 해결하였습니다.그러나 위 방법은 너무 오랜 시간이 소요된다는 문제가 있었습니다.만약 커밋을 3개하는.. 공감수 0 댓글수 0 2024. 9. 3.
  • [HTML, CSS] flex에서 margin 이용하여 할 수 있는 것 [HTML, CSS] flex에서 margin 이용하여 할 수 있는 것제목을 무엇으로 해야할 지 몰라서 위처럼 지었습니다..container { display: flex; gap: 4px}.item { width: 100px; background-color: lightblue; padding: 8px;} Item1 Item2 Item3위와 같은 구조가 있다고 해봅시다.여기서 아래 이미지를 구현하려면 어떻게 할 수 있을까요?아래 이미지는 생각보다 많이 사용하는 레이아웃 구조입니다.div로 처리처음 생각드는 방법은 item1, 2를 div로 한번 더 감싸았을 것 같습니다..container { display: flex; gap: 4px; justif.. 공감수 0 댓글수 0 2024. 8. 22.
  • 글로벌 웹 서비스를 다시 만든다면 실수하지 않을 것들 글로벌 웹 서비스를 다시 만든다면 실수하지 않을 것들다국가를 지원하는 글로벌 웹 서비스를 구현하면 생각하지 못 한 많은 문제를 겪을 수 있습니다.아래 게시글은 만약 제가 처음부터 다시 개발한다면 어떻게 할까? 라는 생각을 가지고 작성하였습니다.하나의 국가만 지원한다면 상관없지만 다국가를 지원하는 경우 한번 읽어보시는 것도 좋을 것 같습니다.제가 정답이라는 것은 아니고 이러한 방법도 있다 라는 생각으로 읽어주시면 감사하겠습니다.다국어 처리페이지, 기능 등 여러 단위로 다국어 파일을 관리할 수 있습니다.위처럼 진행하면 처음에 구현할 떄는 문제가 없을 수 있습니다.그러나 점점 서비스가 커지고 페이지, 기능이 많아지면 동일한 뜻을 가진 로케일 키가 기하급수적으로 증가합니다.따라서 제가 생각할 때는 동일한 뜻을 .. 공감수 0 댓글수 0 2024. 8. 22.
  • [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.. 공감수 0 댓글수 0 2024. 8. 22.
  • SSR로 동작하는 지 확인하는 방법 SSR로 동작하는 지 확인하는 방법SEO에 도움이 되기 위해서는 CSR보다는 SSR을 활용하는 것이 좋습니다.그런데 지금 페이지가 정상적으로 SSR로 동작하는 것을 어떻게 확인할 수 있을까요?현재 프로젝트가 어떻게 동작하는 지 정확하게 이해하고 있으면 어디까지가 SSR이고 아닌 지 파악할 수 있습니다.그러나 모르는 경우 내가 이 부분은 SSR, 이 부분은 CSR이라고 생각하고 구현을 했을 때,내가 원하는 방향으로 동작하는 것을 확인할 필요가 있습니다.아래 게시글은 크롬 기준으로 작성되어 있습니다.SSR 동작 확인하는 방법SSR 동작을 확인하는 방법은 매우 간단합니다.JavaScript 동작을 없애면 됩니다.아래 사이트는 제가 사이드 프로젝트로 진행하고 있는 사이트입니다.• 다이싸 이동하기검색에 도움되게 .. 공감수 0 댓글수 0 2024. 8. 8.
  • [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_.. 공감수 0 댓글수 0 2024. 8. 2.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.