해나래

Vue 앱 개발 시 public 폴더에 이미지 등의 정적 파일을 저장할 수 있습니다. public 폴더에 저장된 파일들은 webpack에 의해 처리되지 않기 때문에, Vue 앱 개발 시 public 폴더의 파일에 접근하려면 특별한 접근방법이 필요합니다.public 폴더 내부 파일 접근public/index.html 파일에서 접근public/index.html 파일에서는 를 통해 pbulic 폴더의 파일에 접근할 수 있습니다.favicon.ico">Vue 파일에서 접근Vue 파일에서는 process.env.BASE_URL을 통해서 public 폴더에 접근할 수 있습니다.vue 파일 내부에서 public 폴더경로 정의data () { return { publicPath: process.en..

최신 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..