새로운세계

  • 홈
  • 태그

배송 정보 1

Vue 컴포넌트와 TypeScript를 활용한 배송 정보 관리: 실무 예제

안녕하세요, 개발자 여러분! 오늘은 Vue.js와 TypeScript를 사용해 실무에서 자주 접할 수 있는 컴포넌트 설계와 코드 공유 사례를 다뤄보겠습니다. 이번 예제에서는 배송 정보를 다루는 Delivery.vue 컴포넌트와 그 하위 컴포넌트인 DeliveryDetails.vue를 만들고, TypeScript 파일(Delivery.ts)을 공유하며 실무처럼 구현하는 방법을 소개합니다. 특히 DeliveryDetails.vue에서 그리드 UI를 활용해 배송 세부 항목을 표시한다고 가정하고, 타입 정의를 효율적으로 재사용하는 방법을 살펴보겠습니다.  1. 프로젝트 구조와 기본 설정먼저 프로젝트 구조를 간단히 정리해보겠습니다. src/├── components/│ ├── Delivery.vue ..

Vue.js 를 배워보자 2025.03.29
이전
1
다음
더보기
프로필사진

새로운세계

노래를 멈춘 슬픈 새들과 나는 침묵을 지키네 돌이킬 수가 없기에 그래도 하늘은 나의 편

  • 분류 전체보기 (1116) N
    • 파이션으로 처음하는 신경망 (0)
      • content (0)
    • 홈서버 구축 일대기.. (33)
    • IT 일반,소식 (80)
    • IT 개발,관리,연동,자동화 (97)
    • Vue.js 를 배워보자 (70)
      • 1. Vue.js 소개 (4)
      • 2. Vue.js 기본 개념 (10)
      • 3. 컴포넌트 심화 (4)
      • 4. 상태 관리 (4)
      • 5. 라우팅 (4)
      • 6. 스타일링 (4)
      • 7. 서버 사이드 렌더링 (SSR) (2)
      • 8. 테스트 (2)
      • 9. 고급 주제 (4)
      • 10. 실전 프로젝트 (3)
    • Node.js 를 배워보자 (24)
      • 1. Node.js 소개 (6)
      • 2. Node.js 기본 문법 (2)
      • 3. Node.js 내장 모듈 (4)
      • 4. Express 프레임워크 (5)
      • 5. 데이터베이스 연동 (4)
      • 6. RESTful API 개발 (4)
      • 7. 웹 소켓 (3)
      • 8. 테스트 (3)
      • 9. 배포 (2)
      • 10. 실전 프로젝트 (3)
    • SpringBoot 를 배워보자 (34)
      • 1. 스프링 부트 소개 (4)
      • 2. 개발 환경 설정 (4)
      • 3. 스프링 부트 기본 프로젝트 구조 (4)
      • 4. 스프링 부트 스타터 (3)
      • 5. 데이터베이스 연동 (4)
      • 6. 웹 개발 (4)
      • 7. 보안 (4)
      • 8. 배포 (3)
      • 9. 추가 기능 (4)
      • 10. 실전 프로젝트 (3)
    • Oracle Database 강좌 (24)
      • 1. 오라클 데이터베이스 소개 (3)
      • 2. SQL 기본 문법 (5)
      • 3. 데이터베이스 객체 (5)
      • 4. PL SQL (6)
      • 5. 오라클 데이터베이스 관리 (0)
      • 6. 고급 주제 (4)
      • 7. 실습 (2)
      • 8. 추가 주제 (선택) (4)
    • PostgreSQL (14)
    • React.js 를 배워보자 (40)
      • 1. React.js 소개 (6)
      • 2. React.js 기본 개념 (6)
      • 3. 상태 관리 (4)
      • 4. 컴포넌트 통신 (3)
      • 5. 라우팅 (2)
      • 6. 스타일링 (2)
      • 7. 서버 사이드 렌더링 (SSR) (2)
      • 8. 테스트 (3)
      • 9. 고급 주제 (5)
      • 10. 실전 프로젝트 (3)
    • Python을 배워보자 (43) N
      • 1. 파이썬 소개 및 환경 설정 (5)
      • 2. 기본 문법 (9)
      • 3. 제어문 (5)
      • 4. 자료 구조 (6)
      • 5. 함수 (5)
      • 6. 객체 지향 프로그래밍 (OOP) (5)
      • 7. 파일 입출력 (3)
      • 8. 예외 처리 (3)
      • 9. 모듈과 패키지 (3)
      • 10. 실전 프로젝트 (4)
      • 11. 기타 심화 (4)
    • Java를 배워보자 (48)
      • 1. 자바 소개 및 개발 환경 설정 (3)
      • 2. 자바 기본 문법 (4)
      • 3. 객체 지향 프로그래밍 (OOP) (7)
      • 4. 자바 API (7)
      • 5. 입출력 (2)
      • 6. 스레드 (3)
      • 7. 람다 표현식 (3)
      • 8. 자바 8 이상의 새로운 기능 (3)
      • 9. 심화 학습 (4)
    • IOS개발: SWIFT (56)
      • 1. Swift 소개 (3)
      • 2. 기본 문법 마스터 (5)
      • 3. 함수의 세계로 (3)
      • 4. 객체 지향 프로그래밍 심화 (9)
      • 5. 고급 주제 탐구 (9)
      • 6. Swift UI로 UI 개발하기 (10)
      • 7. 실전 프로젝트 제작 (6)
      • 8. 심화 주제 및 추가 학습 (7)
    • 문득문득 생각나는 음악 (6)
    • 도시를 떠나 (3)
    • Git & GitHub 강좌 (40)
      • 1. 버전 관리 시스템 소개 (5)
      • 2. Git 기본 개념 (5)
      • 3. Git 브랜치 (5)
      • 4. 원격 저장소 (GitHub) (5)
      • 5. 협업 (4)
      • 6. 고급 기능 (4)
      • 7. 실전 예제 (3)
      • 8. GitHub 활용 (3)
      • 9. 기타 (2)
    • Oracle Cloud Free Tier 강좌 (20)
      • 1. Oracle Cloud Free Tier 소.. (3)
      • 2. Free Tier 시작하기 (3)
      • 3. 주요 서비스 활용 가이드 (5)
      • 4. Free Tier 활용 시나리오 (5)
      • 5. 비용 관리 및 최적화 (3)
    • test (0)
    • ec6 (2)
    • Nuxt 를 배워보자 (21)
    • 기타 개발관련 도구 (7)

Tag

파이썬, node.js, 데이터베이스, 상태 관리, nuxt.js, SQL, 개발, 데이터 분석, Vue.js, 자바, 보안, 컴포넌트, 협업, react, 개발 환경, 스프링 부트, restful api, 웹 개발, git, 자동화,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바