해나래

UTF-8 기준 문자열 길이 계산 UTF-8은 문자코드 값에 따라 문자당 1~4 Byte를 사용합니다. JavaScript에서 UTF-8 Byte 길이 계산 시 주의해야 할 부분이 있는데, JavaScript는 내부적으로 문자열을 UTF-16(UCS-2)로 처리하기 때문에 UTF-16의 특성을 고려해주어야 합니다. 예를들어 UTF-8에서 4Byte 문자인 '𒀀'의 경우 UTF-16에서는 문자 2개를 결합하여 표현합니다. 아래 함수는 이러한 특성을 고려하여 작성되어 있습니다. function getByteLengthOfUtf8(str) { //UTF8 기준 Byte Length 계산 var byteLength = 0; for (var i = 0, strLength = str.length; i < strLe..

쿠키의 유형 쿠키는 영구쿠기와 세션쿠키라는 유형으로 나뉩니다. 세션쿠키(Session Cookie/Temporary Cookie) : 브라우저가 쿠키를 메모리에 저장하게 됩니다. 브라우저가 종료되는 즉시 쿠키도 소멸합니다. 즉 브라우저의 세션(브라우저가 실행되는 시간) 동안만 유지되는 쿠키입니다. 쿠키를 생성할 때 만료날짜를 지정하지 않을 경우 세션쿠키가 됩니다. 영구쿠키(Persistent Cookie) : 브라우저가 쿠키를 디스크에 저장하게 됩니다. 브라우저가 종료되더라도 쿠키의 값은 유지가 됩니다. 브라우저를 종료하고 다시 실행하면 디스크에 저장된 쿠키를 복구하게 됩니다. 쿠키를 생성할 때 만료날짜를 지정할 경우 영구쿠키가 됩니다. 영구쿠키의 만료날짜가 지나면 자동으로 삭제됩니다. 세션쿠키와 영구쿠..

AntDesign에서 Modal을 Draggable로 만들기 위해서는 react-draggable 모듈을 사용하면 간단히 구현이 가능합니다. react-draggable 모듈을 설치합니다. > npm install react-draggable AntDesign의 Modal과 Draggable을 조합하여 모달을 구성합니다. import { Button, Modal } from 'antd'; import React, { useRef, useState } from 'react'; import Draggable from 'react-draggable'; const ModalSample: React.FC = () => { const draggleRef = useRef(null); const [visible, se..

Material-UI는 리액트에서 사용되는 UI 컴포넌트 라이브러리로서 리액트에 Google Material Design을 손쉽게 적용 할 수 있게 도와줍니다. 리액트 개발자로서 수많은 프로젝트에 Material-UI를 사용한 경험이 있기 때문에 Material-UI가 훌륭한 라이브러리라는 것을 잘 알고 있습니다. Material-UI의 수많은 컴포넌트, 그리드 시스템, 일관된 UI를 바탕으로 매우 빠르게 앱을 개발할 수 있습니다. 몇년간 Material-UI를 만족하며 사용해왔지만 개인적인 오픈소스 프로젝트인 Ammo를 개발하면서 심각한 문제를 발견하였습니다. Ammo에 대한 간단한 소개 : Ammo는 HTTP 요청을 캡쳐하여 네트워크 부하 테스트 엔진 스크립트로 변환하는 오픈소스 프로젝트입니다. (G..

Material-UI는 높은 수준의 UI를 빠르고 효율적으로 개발할 수 있는 UI 도구입니다. Material-UI 구글의 Material Design UI 가이드라인을 바탕으로 하며 UI개발에 필요한 수많은 컴포넌트와 디자인 템플릿을 제공합니다. Material-UI 장점 Material Design을 바탕으로 합니다. 안드로이드 시스템에서 검증된 높은 수준의 디자인 퀄리티를 바탕으로 UI개발을 진행 할 수 있습니다. 또한 모바일과 데스크톱을 모두 지원하는 반응형 UI를 빠르게 개발할 수 있습니다. 방대한 컴포넌트를 제공합니다. 필요로 하는 대부분의 컴포넌트를 제공합니다. DatePicker, AutoComplete, Dialog, Tooltip 외 방대한 양의 컴포넌트를 제공합니다. UX PIN과 같..

오류 TypeScript 빌드 시 --downlevelIteration을 사용하라는 오류가 발생할 때가 있습니다. Type 'Set' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators. 이 오류는 ES6를 지원하지 않는 환경에서 ES6 열거형(Iterable) 객체를 열거하려고 할 때 발생합니다. 예를들어 Set 혹은 Map 객체는 ES6에서 추가된 객체인데 tsconfig.json에 target을 ES5로 설정한 상태에서 Set을 열거하려고 하면 이러한 오류가 발생합니다. 해결방법 두가지 오류해결 방법이 존재합니다. 첫번째 방법은 간단히 --downl..

.d.ts 파일이란? 타입스크립트가 타입을 추론할 수 있도록 .d.ts파일에 Type을 선언 할 수 있습니다. 여러가지 사용 목적 중에서 대표적인 2가지를 소개하자면 다음과 같습니다. 사용목적1: 구현부분과 선언부분의 분리 클래스, 함수의 Type 선언부분은 .d.ts파일에 정의해두고, 구현부분은 별도의 .ts 파일에 분리하여 작성할 수 있습니다. 이러한 작성방법은 C언어의 헤더파일(.h 파일)의 사용방법과 유사하다고 볼 수 있습니다. 구현부분과 선언부분을 깔끔하게 분리하여 코드를 작성할 수 있는 것이죠. 사용목적2: 레거시 자바스크립트의 타입추론 오랜 전에 작성된 자바스크립트 라이브러리를 타입스크립트에서 사용하기 위해 .d.ts를 사용하기도 합니다. 오래된 자바스크립트 라이브러리를 타입스크립트에서 사용..

TypeScript에는 Interface, Class와 더불어 Type을 제공합니다. 각각의 차이에 대해 간단히 정리합니다. Type Alias 변수 Type 정의에 Alias (별칭)을 부여하는 것을 말합니다. 변수 Type을 별칭으로 정의해두고 재사용하기 위해 사용합니다. //'number | string' Type을 Color라는 Alias (별칭)로 정의 type Color = number | string; //정의한 Type Alias를 사용 var favoriteColor: Color = 'Red'; Object나 Function의 변수 Type도 Alias로 정의하고 재사용 할 수 있습니다. //Object에 대한 Type Alias정의 //Interface 선언과 유사하지만 '=' 기호를 ..

ASP.NET 웹사이트를 간편하게 서버에 배포할 때 Web Deploy (MS Deploy) 도구를 주로 사용합니다. 여기에서는 Web Deploy도구를 사용할 때 사용할 수 있는 배포 프로파일(Publish Profile)에 대해 살펴봅니다. VisualStudio 2019와 ASP.NET Core 웹사이트를 기준으로 작성되었습니다. Publish Profile 생성 Visual Sutido에서 웹사이트 배포를 위해서는 Publish Profile(배포 프로파일)을 생성해야합니다. Solution Explorer에서 웹사이트를 마우스 우클릭 하신 후 Publish를 클릭하시면 Publish Profile을 생성하실 수 있는 창이 나타납니다. 배포대상과 배포위치, 인증정보 등 웹사이트 배포에 필요한 정보..

오류1 - 증상 VisualStudio에서 TypeScript를 사용할 때 불규칙적으로 아래 오류가 무작위로 발생하는 경우가 있습니다. Map, Set 등의 이름을 찾을 수 없다는 오류 : Error TS2583 (TS) Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later. ClientApp\src\models\Home.ts 18 Active '@' 등 경로를 찾을 수 없는 오류 : Error TS2307 (TS) Cannot find module '@/utils/Date.ts' or its corresponding type decla..