새로운세계

최근 미국의 관세정책 변화로 인해 국내 제조업체들이 공장 신축을 적극적으로 검토하고 있습니다. 이는 해외 생산기지의 리쇼어링(Reshoring)과 공급망 안정화 전략의 일환으로, 특히 공장 건립과 관련된 부동산업에 새로운 기회를 열고 있습니다. 이에 따라 공장 건립에 특화된 미국 상장 부동산 기업들의 시가총액 순위를 정리해 보았습니다. 이 리스트는 산업 부동산 개발, 물류 창고, 제조 시설 등 공장 건립과 밀접한 사업을 영위하는 기업들을 중심으로 구성되었습니다.공장 건립 관련 부동산 상장기업 시가총액 순위 (2025년 4월 기준)Prologis, Inc. (PLD) 시가총액: 약 1,170억 달러 주요 사업: 글로벌 물류 및 산업 부동산 REIT(부동산투자신탁)로, 제조 및 유통 시설용 창고와 공장 부지..

Vue.js의 Composition API는 직관적이고 유연한 방식으로 반응형 데이터를 관리할 수 있게 해줍니다. 오늘은 ref를 사용해 배열 데이터를 갱신하는 간단한 예제를 블로그 글 형식으로 소개하겠습니다. 예제를 통해 특정 조건에 맞는 데이터를 업데이트하는 방법을 알아보겠습니다.문제 상황우리는 아래와 같은 반응형 배열 데이터를 가지고 있습니다:const peresons = ref([ { seqaNo: 1, name: 'Jhon', age: 20 }, { seqaNo: 2, name: 'Tom', age: 23 }]);이제 다음과 같은 업데이트 데이터를 받아서:const update_pereson = ref([ { seqaNo: 2, name: 'Michel', age: 32 }]);pereso..

ㅗㅗ

안녕하세요! 오늘은 크롬 브라우저의 개발자 도구를 활용해 특정 HTML 태그를 선택한 후, 그 태그를 자식으로 포함하고 있는 부모 태그들의 단계적 리스트를 알아내는 방법을 소개하겠습니다. 추가로, 각 부모 태그의 열린 태그 내용(속성 포함)까지 확인할 수 있는 방법을 단계별로 설명하겠습니다. 이 과정은 자바스크립트 콘솔을 활용하며, 블로그 글 형식으로 쉽게 풀어보겠습니다.목표크롬 개발자 도구에서 특정 태그를 선택선택된 태그의 부모 태그를 단계적으로 추적각 부모 태그의 열린 태그 내용(태그 이름과 속성 포함)을 출력1. 크롬 개발자 도구 열기먼저 크롬 브라우저에서 확인하고 싶은 웹페이지를 엽니다. F12 키를 누르거나, 우클릭 후 "검사"를 선택해 개발자 도구를 엽니다. Elements 탭에서 원하는 태그..

안녕하세요! 오늘은 Vue.js의 Composition API를 사용해서 배열 데이터에 순차적인 번호(segNo)를 추가하는 방법을 알아보겠습니다. 주어진 데이터는 pereson = [{name:'Jhon', age: 20}, {name:'Tom', age:23}]이고, 여기에 segNo를 추가해서 각 객체에 고유한 번호를 부여해보겠습니다. 코드 설명은 초보자도 쉽게 따라 할 수 있도록 단계별로 진행하겠습니다.목표pereson 배열에 segNo 속성을 추가segNo는 1부터 순차적으로 증가하는 번호로 부여Vue Composition API를 사용해 구현1. 기본 환경 설정먼저 Vue 프로젝트에서 Composition API를 사용하기 위해 3. 코드 설명ref로 반응형 데이터 생성pereson 배열을 r..

안녕하세요, 개발자 여러분! 오늘은 Nuxt와 Vuetify를 결합하여 Composition API를 활용한 실무에서 유용할 만한 다양한 사례를 블로그 형식으로 소개해드릴게요. Vue 3의 강력한 Composition API와 Vuetify의 Material Design 컴포넌트를 Nuxt 환경에서 어떻게 실무에 적용할 수 있는지, 실제로 자주 마주칠 법한 케이스를 중심으로 살펴보겠습니다. 초보자도 따라 할 수 있도록 단계별로 설명할 테니, 차근차근 따라와 보세요!환경 설정: Nuxt와 Vuetify 통합먼저, Nuxt 프로젝트에 Vuetify를 설정하는 방법부터 간단히 짚고 넘어가겠습니다. Nuxt 3와 Vuetify 3를 사용한다고 가정하고, 아래와 같이 설정을 시작합니다.프로젝트 생성 및 Vueti..

안녕하세요, 개발자 여러분! 이번에는 Vue.js의 Composition API를 사용해 CRUD(Create, Read, Update, Delete) UI를 구성하면서 watch와 computed를 실무적으로 활용하는 방법을 블로그 글 형식으로 풀어보겠습니다. Composition API는 기존 Options API보다 유연하고 모듈화된 코드를 작성할 수 있게 해주며, 특히 로직 재사용성이 뛰어납니다.1. CRUD UI의 기본 설정CRUD UI를 구성한다고 가정하면, 사용자 목록을 표시하고 검색, 추가, 수정, 삭제 기능을 제공하는 인터페이스를 구현할 수 있습니다. Composition API를 사용하면 데이터와 로직을 함수 단위로 깔끔하게 분리할 수 있습니다. 먼저 기본 구조를 보겠습니다.  2. c..

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

JavaScript에서 객체(Object)는 데이터를 key-value 쌍으로 저장하는 강력한 자료 구조입니다. 객체를 효과적으로 다루기 위해 다양한 함수와 연산자가 제공되며, 이 글에서는 이를 키워드와 함께 자세히 설명합니다. 초보자부터 중급 개발자까지 유용하게 참고할 수 있도록 예제와 함께 정리했습니다. 1. 객체 속성 접근 및 열거Object.keys(obj): 객체의 열거 가능한 속성 이름(key)을 배열로 반환합니다.  const obj = { a: 1, b: 2, c: 3 };console.log(Object.keys(obj)); // ['a', 'b', 'c']열거 불가능한 속성(예: enumerable: false)은 제외됩니다.Object.values(obj): 객체의 열거 가능한 속성 ..

안녕하세요, 개발자 여러분! 이번에는 TypeScript에서 자주 사용되는 & 연산자(Intersection Operator)에 대해 깊이 파헤쳐 보겠습니다. 질문에서 제공된 코드 export type DeliveryData = DeliveryInfo & { details: DeliveryDetail[]; };를 기반으로, &의 역할과 관련 정보를 블로그 글 형식으로 자세히 설명하겠습니다.2025.03.29 - [Vue.js 를 배워보자] - Vue 컴포넌트와 TypeScript를 활용한 배송 정보 관리: 실무 예제 1. & 연산자란?TypeScript에서 &는 **Intersection Operator(교차 연산자)**라고 불리며, 두 개 이상의 타입을 결합하여 하나의 새로운 타입을 만드는 데 사용됩니..