해나래

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 크..

운영체제 마다 서로 다른 줄바꿈 문자를 사용합니다. 대표적으로 Microsoft 계열 운영체제에서는 CR+LF, Unix 계열 운영체제에서는 LF를 사용합니다. Unix계열인 Linux, iPhone, Android 운영체제도 LF를 개행문자로 사용합니다. Windows, Unix 계열 이외에도 여러 운영체제가 존재하며 줄바꿈 문자로 CR만 사용하거나 LF+CR, NL, RS 등 다양한 문자를 사용합니다. 이렇게 운영체제 마다 서로 다른 줄바꿈 문자를 사용하기 때문에, 운영체제가 달라지면 텍스트가 다르게 출력되거나 예기치 못한 프로그램 오류로 이어지기도 합니다. 여기에서는 왜 Windows와 Unix 계열 운영체제가 서로 다른 개행문자를 사용하게 되었는지 소개합니다. 줄바꿈? CR, LF란? CR과 LF..

수를 표현하기 위한 문자들을 숫자라고 합니다. 보통 0~9까지 10개의 문자를 사용하여 수를 표현하는데 이러한 문자를 아라비아 숫자라고 합니다. 굳이 아라비아 숫자가 아니더라도 Ⅰ,Ⅱ,Ⅲ...Ⅸ나 一二三...九 등 다양한 숫자들이 존재합니다. 또한 자릿수를 올리는 단위에 따라 다양한 진법들이 존재하는데 일상생활에서는 10진법을 많이 사용합니다. 소프트웨어 개발 분야에서는 2진법, 16진법, 64진법(Base64) 등이 주로 사용됩니다. 대부분 아라비아 숫자+10진법 조합을 많이 사용하지만, 이 외에도 다양한 조합들이 존재합니다. 대부분의 프로그래밍 언어들은 아라비아 숫자와 2진법, 8진법, 16진법, 64진법을 기본 지원합니다. 하지만 32진법, 62진법 등을 사용해야하거나 아라비아 숫자 외에 다른 문자..

C#에서 Object를 복제하는 것은 쉽고 단순해 보이지만 실제로는 복잡하고 실수가 발생하기 쉬운 작업 입니다. 여기서는 C# Object 복제에 관한 다양한 방법들을 소개합니다. 얕은복사 vs 깊은복사 객체를 복사하는 방법은 크게 얕은복사(Shallow Cloning)와 깊은복사(Deep Cloning) 2가지로 나뉩니다. 구분 값 유형 (Value Type) 참조 유형 (Reference Type) 얕은복사 값 복사 참조된 객체 공유 깊은복사 값 복사 참조된 객체 복사 두 방식 모두 값 유형(Value Type)의 멤버변수에 대해서는 동일하게 값 복사를 진행합니다. 참조 유형(Reference Type)의 멤버변수에 대해, 얕은복사는 주소 값을 공유하며 깊은복사는 객체를 복사합니다. 그림으로 나타내면..

2012년 소개된 C# 5부터 사용 가능한 CallerMemberName Attribute를 사용하면 함수 호출자의 이름을 전달받을 수 있습니다. 예를들어 다음 소스코드를 실행하면, 컴파일러는 매개변수 callerName에 함수를 호출한 "Main"을 할당합니다. [샘플코드] static void Main(string[] args) { DoWork(); } //[CallerMemberName]를 사용하면, 컴파일러는 매개변수 callerName에 함수를 호출한 "Main"을 할당함 static void DoWork([CallerMemberName] string callerName = null) { Console.WriteLine("함수 호출자 이름 : " + callerName); } [실행결과] Cal..

우리는 MVVM을 위해 다음처럼 복잡한 INotifyPropertyChanged 코드를 매번 작성해야 했습니다.public class UserViewModel : INotifyPropertyChanged{ private string _UserName; public string UserName { get => _UserName; set => SetProperty(ref _UserName, value); } private DateTime? _BirthDate; public DateTime? BirthDate { get => _BirthDate; set => SetProperty(ref _BirthDate, value); } public event PropertyChangedEven..

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