새로운세계

1️⃣ Express.js: 최소주의와 자유로움Express.js는 Node.js 생태계에서 가장 오랫동안 사랑받아온 최소주의(Minimalist) 웹 프레임워크입니다.특징:자유도: 라우팅과 미들웨어 외에는 특별한 구조적 제약이 없습니다. 개발자가 원하는 방식대로 폴더 구조와 패턴을 자유롭게 설계할 수 있습니다.간결함: 가벼우며 빠르고, 진입 장벽이 낮습니다. 소규모 프로젝트나 프로토타이핑에 매우 적합합니다.생태계: 가장 크고 활발한 생태계를 가지고 있어, 거의 모든 기능을 미들웨어 형태로 사용할 수 있습니다.단점:구조 부재: 프로젝트가 커질수록 일관성을 유지하기 어렵고, 코드가 복잡해져 유지보수가 어려워집니다.확장성 문제: 복잡한 엔터프라이즈 기능(DI, 모듈화된 테스트 등)을 구현하려면 서드파티 라이..

Vue 3의 팝업 데이터 관리 데이터 1 추가 데이터 2 추가 저장된 데이터 {{ JSON.stringify(item) }} 설명: {{ JSON.stringify(item) }} 삭제 설명:findPopupData는 특정 키-값 쌍으로 데이터를 검색합니다.removePopupData는 배열에서 특정 인덱스의 데이터를 삭제합니다.에 삭제 버튼을 추가해 각 항목을 삭제할 수 있습니다.6. 팁과 주의사항타입 제한: PopupData의 값 타입을 특정 타입(예: string | number)으로 제한하려면 인터페이스를 ..

TypeScript에서 두 객체의 공통 요소만 복사하는 작업은 자주 필요한 기능입니다. 특히, 객체 안에 또 다른 객체가 내포되어 있을 때, 이를 올바르게 처리하려면 얕은 복사와 깊은 복사를 고려해야 합니다. 이번 포스트에서는 두 객체의 공통 키에 해당하는 요소를 복사하되, 내포된 객체도 복사하는 방법을 예제와 함께 설명하겠습니다.1. 문제 정의우리가 해결하고자 하는 문제는 다음과 같습니다:두 객체(source와 target)가 있을 때, 공통 키에 해당하는 값만 복사.값이 객체인 경우, 해당 객체도 깊게 복사하여 원본 객체와 독립적인 복사본 생성.TypeScript의 타입 안정성을 유지하면서 동적으로 처리. 예를 들어, 다음과 같은 두 객체가 있다고 가정해 봅시다: const source = { n..

TypeScript와 Vue 3를 활용해 강력하고 재사용 가능한 유효성 검증 로직을 구현하는 방법을 소개합니다. 이 글에서는 한글 조사를 처리하는 getParticle 함수와 다양한 검증 규칙(required, min, max, regex, date, dependency)을 포함한 Validator 클래스를 설계하고, Vue 컴포넌트에서 이를 사용하는 방법을 다룹니다. 특히, 반복적인 조사 처리를 리팩토링하여 코드를 간결하게 만든 과정을 강조합니다.1. 프로젝트 배경웹 애플리케이션에서 사용자 입력 폼은 필수적이며, 입력값의 유효성 검증은 사용자 경험과 데이터 무결성을 보장하는 핵심 요소입니다. 이 프로젝트에서는 TypeScript로 작성된 Validator 클래스를 통해 다양한 검증 규칙을 처리하고, 한..

Vue 3의 발주서 작성 발주자 {{ errors.orderer }} 발주 날짜 {{ errors.orderDate }} 품목 추가 품목 추가 품목 목록 품목명 수량 단가 합계 삭제 {{ item.productName }} {{ item.quantity ..

이 글에서는 Vue 3의 Composition API와 TypeScript를 사용하여 자식 2(팝업)에서 입력된 name과 type 데이터를 가져와 자식 1-1에 표시하는 방법을 설명합니다. 이전 예제를 수정하여 자식 2에서 데이터를 입력하고, 이를 부모를 통해 자식 1-1로 전달하는 흐름을 다룹니다.1. 프로젝트 설정Vue 3와 TypeScript로 구성된 프로젝트를 가정합니다. Vite로 설정된 프로젝트를 사용하는 경우, 설정 명령어는 다음과 같습니다: npm create vite@latest my-vue-app -- --template vue-tscd my-vue-appnpm installnpm run dev2. 컴포넌트 구조컴포넌트 구조는 다음과 같습니다:Parent.vue: 부모 컴포넌트로, 자..

Vue 3에서 Composition API와 TypeScript를 사용하여 부모 컴포넌트 아래 자식 컴포넌트 간의 통신을 구현하는 방법을 알아보겠습니다. 이 글에서는 부모 컴포넌트에 자식 1과 자식 2가 있고, 자식 1에서 자식 2(팝업)를 호출하는 예제를 다룹니다. 코드와 함께 단계별로 설명하겠습니다.1. 프로젝트 설정먼저, Vue 3 프로젝트를 TypeScript로 설정합니다. Vite를 사용하여 프로젝트를 생성하는 명령어는 다음과 같습니다:npm create vite@latest my-vue-app -- --template vue-tscd my-vue-appnpm installnpm run dev프로젝트가 준비되었다면, 이제 컴포넌트를 구성해 보겠습니다.2. 컴포넌트 구조아래와 같은 컴포넌트 구조를..

Vue 3의 설명:DataStructure를 ../types/DataStructure에서 임포트합니다.processData 함수는 DataStructure 타입의 데이터를 받아 처리합니다.defineExpose로 processData를 부모 컴포넌트에서 접근 가능하도록 노출합니다.설명:DataStructure를 ../types/DataStructure에서 임포트합니다.parentData는 DataStructure 타입으로 정의됩니다.ref로 자식 컴포넌트를 참조하며, InstanceType으로 타입을 명시합니다.handleButtonClick은 자식 컴포넌트의 processData 함수를 호출합니다.5. 동작 원리부모 컴포넌트에서 버튼을 클릭하면 handleButtonClick이 실행됩니다.childRe..

Vue 3에서 Composition API와 TypeScript를 사용해 RESTful API 데이터를 부모 컴포넌트에서 호출하고, 자식 컴포넌트 두 개(테이블 그리드와 상세 뷰)를 탭으로 구분해 바인딩하는 방법을 소개합니다. Vuetify를 활용해 깔끔한 UI를 구현하며, 실용적인 예제를 통해 배우고자 하는 분들께 도움이 되고자 합니다.이번 예제에서는 부모 컴포넌트에서 검색어 입력과 버튼으로 데이터를 가져오고, 두 자식 컴포넌트가 각각 데이터를 테이블 형태와 클릭 시 개별 행의 상세 정보를 표시하는 방식으로 동작합니다. Vuetify의 탭과 그리드 컴포넌트를 사용해 직관적인 UI를 구성합니다.프로젝트 개요우리의 목표는 다음과 같습니다:부모 컴포넌트: 검색어 입력 필드와 버튼으로 RESTful API 호..

Nuxt.js는 Vue.js를 기반으로 한 강력한 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 쉽게 구현할 수 있게 해줍니다. 여기에 TypeScript를 도입하면 정적 타입 검사와 코드 가독성을 높일 수 있어, 대규모 프로젝트에서 특히 유용합니다. 이번 글에서는 Nuxt.js 프로젝트에서 TypeScript를 사용할 때 객체 타입(Object Types)과 인터페이스(Interface)를 별도의 파일로 정의하고, 이를 프로젝트 전반에서 재사용할 수 있도록 관리하는 방법을 자세히 살펴보겠습니다.1. 왜 별도의 파일로 타입을 관리해야 할까?TypeScript의 가장 큰 장점은 코드에 타입을 명시적으로 정의함으로써 런타임 오류를 줄이고, 개발자가 의도를 명확히 전달할 수 있다는 ..