최신 Vue3 프로젝트생성 Vue3 Quick Start 참고 Vue 프로젝트 생성: 다음과 같은 npm 명령어 입력 npm create vue@latest Vue 3.9 기준으로 TypeScript, JSX, Vue Router, Pinia, Vitest 등을 기본적으로 적용하여 생성할 수 있어, 프로젝트 생성이 상당히 편리해짐 ✔ Project name: … ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit..
Vue를 배포할 때 map 파일이 생성되는 것을 방지하려면 다음과 같은 항목의 점검이 필요합니다. vue.config.js 파일 productionSourceMap : vue-cli 속성으로 ture로 설정하면 Vue 소스코드를 복원할 수 있는 map 파일이 생성됩니다. 기본 값은 true입니다. 이와 관련된 내용은 https://cli.vuejs.org/config/#productionsourcemap에서 확인할 수 있습니다. module.exports = defineConfig({ ... //production 모드일 때는 map 파일을 생성하지 않음 productionSourceMap: process.env.NODE_ENV != 'production', ... }) configureWebpack /..
ASP.NET Core프로젝트에 Client-Side를 담당할 Vue App을 추가하는 방법을 소개합니다. 개발도구 여기에서는 VisualStudio 2022, Vue3, ASP.NET Core 6, npm 9.5.1, @vue/cli 5.0.8을 기준으로 작성하였습니다. 프로젝트 구조 Vue Project를 관리하는 방법은 크게 2가지로 나뉩니다. 구조1. ASP.NET Core 프로젝트와 Vue 프로젝트를 분리 구조 2. ASP.NET Core 프로젝트의 ClientApp 폴더에 Vue 프로젝트를 포함 여기에서는 구조2를 기준으로 설명합니다. 진행방법 1단계. vue-cli로 Vue 프로젝트를 생성합니다. vue create projectname 2 단계. 생성된 Vue 프로젝트를 ASP.NET Co..
Accept Client가 받아들일 수 있는 데이터 형식을 Server에게 알려주기 위해 사용합니다. 예를들어 Client가 JSON 데이터만 해석할 수 있다면, Server로 요청을 보낼 때 "Accpet: application/json"을 헤더에 추가하면 됩니다. 그러면 Server는 Accpet 헤더 값을 읽고 응답 형식을 결정하는데 참고하게 됩니다. Content-Type HTTP Body에 포함된 데이터의 형식이 무엇인지 나타냅니다. 예를들어 HTTP Header에 "Content-Type: application/json"이 포함되어 있다면, 우리는 Body에 포함된 데이터가 JSON이라는 것을 알 수 있습니다. Client가 Server로 요청를 보낼 때 Header에 Content-Type을..
Node.js에서 React, Vue 등의 프로젝트를 빌드 할 때 발생하는 다음 오류에 대한 대응방법을 정리하였습니다. 오류내용 Node.js 버전 17 이상으로 업데이트 한 경우, 프로젝트 빌드 시 다음과 같은 오류가 발생할 수 있습니다. { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } 오류원인 Node.js는 버전 17부터 OpenSSL 3.0을 포함하게 되었습니다. OpenSSL 3.0은 허용하는 알고리즘과 Key 크..
수를 표현하기 위한 문자들을 숫자라고 합니다. 보통 0~9까지 10개의 문자를 사용하여 수를 표현하는데 이러한 문자를 아라비아 숫자라고 합니다. 굳이 아라비아 숫자가 아니더라도 Ⅰ,Ⅱ,Ⅲ...Ⅸ나 一二三...九 등 다양한 숫자들이 존재합니다. 또한 자릿수를 올리는 단위에 따라 다양한 진법들이 존재하는데 일상생활에서는 10진법을 많이 사용합니다. 소프트웨어 개발 분야에서는 2진법, 16진법, 64진법(Base64) 등이 주로 사용됩니다. 대부분 아라비아 숫자+10진법 조합을 많이 사용하지만, 이 외에도 다양한 조합들이 존재합니다. 대부분의 프로그래밍 언어들은 아라비아 숫자와 2진법, 8진법, 16진법, 64진법을 기본 지원합니다. 하지만 32진법, 62진법 등을 사용해야하거나 아라비아 숫자 외에 다른 문자..
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..
- MS SQL
- ios
- .NET Standard
- Xamarin.iOS
- Vue
- flutter
- npm
- VisualStudio
- AntDesign
- React
- Android
- TypeScript
- Xamarin.Forms eBook
- Xamarin.Forms
- material-ui
- Xamarin.Forms 요약
- Xamarin
- ASP.NET Core
- WPF
- StringComparison
- Total
- Today
- Yesterday