테이로그
close
프로필 배경
프로필 로고

테이로그

  • 전체보기
    • 👨‍💻 소개
    • 🧠 저장
      • HTML&CSS
      • Javascript
      • Typescript
      • Vue
      • React
      • Git
      • Http
      • etc.
    • 📃 기록
      • 개발자 일지
      • 프로젝트
      • 강의
      • 일상
    • 기타
    • 👨‍🎨 디자인
  • 홈
  • 소개
  • 일지
컴포넌트 디자인 패턴 (common, slot, controlled, renderless) 간단 정리

컴포넌트 디자인 패턴 (common, slot, controlled, renderless) 간단 정리

아웅 정리할수록 복잡하고 더 헷갈리네ㅎ 이런 것들 언젠가 편하게 사용하겠지?ㅜ 아무튼 common, slot, controlled, renderless 디자인 패턴에 대해 알아보자 컴포넌트 디자인 패턴 Common 간단하고 기본적인 컴포넌트 등록과 컴포넌트 통신 AppContent, Appheader 컴포넌트를 불러옴 이벤트, props 활용 before after 버튼을 클릭하면 내용이 바뀌도록 구현해보자 // CommonView.vue import한 AppHeader 컴포넌트와 AppContent 컴포넌트 간 데이터를 이벤트, props로 주고받고 있다. // AppHeader.vue {{ name }} AppHeader에서는 userName을 props로 받아서 그대로 표시 // AppContent..

  • format_list_bulleted 🧠 저장/Vue
  • · 2024. 1. 12.
  • textsms
mixin 간단 정리

mixin 간단 정리

mixin vue 컴포넌트에 비슷한 기능들을 재사용할 수 있는 방법 재사용 로직은 data, methods, created 등과 같은 컴포넌트 옵션 mix 형식 // mixin 정의 var mixins = { // 컴포넌트 옵션 (data, methods, created 등) }; // mixin 주입 new Vue({ mixins: [mixins] }) 만들면서 이해해보자 /mixin1 링크 이동 시 A 페이지, /mixin2 링크 이동 시 B 페이지를 띄우며 각 페이지의 데이터를 mixin 을 통해 불러오자 일단, route 연결 // routes/index.js export const router = new VueRouter({ routes: [ { path: '/mixin1', name: 'mix..

  • format_list_bulleted 🧠 저장/Vue
  • · 2024. 1. 9.
  • textsms
git 레파지토리 히스토리, 커밋까지 초간단 옮기기

git 레파지토리 히스토리, 커밋까지 초간단 옮기기

OLD 프로젝트의 커밋들을 NEW 프로젝트로 복사해야하는 상황 OLD프로젝트 디렉토리에서 아래 명령어 입력 (1) 이동할 원격저장소(NEW)를 연결 git remote set-url --push origin NEW주소 (2) 이동할 원격저장소로 push git push --mirror 끝 지금까지 OLD 프로젝트에서 작업한 코드들을 NEW 프로젝트에서 확인할 수 있다. 복사할 거 다 복사했는데, OLD 프로젝트가 원격의 NEW 프로젝트에 그대로 연결되어 있으면 찜찜하니까 .. 원격 저장소 연결 정보 확인하고 삭제하고 새로 연결하기 OLD프로젝트 디렉토리에서 아래 명령어 입력 (1) 원격저장소 연결 정보 확인 git remote -v (2) 원격저장소 연결 정보 삭제 git remote remove ori..

  • format_list_bulleted 🧠 저장/Git
  • · 2024. 1. 8.
  • textsms
하이오더컴포넌트(HOC) 간단 정리

하이오더컴포넌트(HOC) 간단 정리

Higher Order Component (HOC) 함수형 기반 재사용 방식이다. 컴포넌트 로직을 재사용할 수 있다. 컴포넌트를 인자로 받고 컴포넌트를 반환하는 컴포넌트이다. 예를 들어 ... /hoc1 링크로 이동하면 A페이지, /hoc2 링크로 이동하면 B페이지가 나오는 구조일 때 A, B페이지가 거의 똑같다면 각각 view를 만들기보단 컴포넌트의 컴포넌트를 만들고 용도에 맞게 컴포넌트를 return 하는 식으로 만들어보자. 즉, 한 컴포넌트 로직을 그대로 재사용하기! 코드를 보면서 이해해보자 // routes/index.js import Vue from 'vue'; import VueRouter from 'vue-router' import createView from '../views/HocView..

  • format_list_bulleted 🧠 저장/Vue
  • · 2024. 1. 3.
  • textsms
eventBus 간단 정리

eventBus 간단 정리

event bus빈 이벤트 객체를 통해 컴포넌트간 데이터를 전달하는 것 부모, 자식이 아니라도 형제끼리 통신할 수 있다. event bus 메서드$emit() : 이벤트(데이터) 전송 $on() : 이벤트(데이터) 수신 $off() : 이벤트(데이터) 삭제 만들면서 이해해보자 우선 빈 Vue 인스턴스 객체를 생성한다// bus.js import Vue from 'vue'; // 텅 빈 이벤트 객체 export default new Vue(); 정말 텅 빈 객체. 그저 컴포넌트간 데이터를 전달하는 역할만 한다. 이제 이벤트를 보내보자 이벤트 받아랏 A B 데이터를 보내고자하는 컴포넌트에서 $emit을 활용하여 이벤트를 전송한다. aEvent, bEvent를 발생 bus.$emit('aEvent'); bus..

  • format_list_bulleted 🧠 저장/Vue
  • · 2023. 12. 31.
  • textsms
  • navigate_before
  • 1
  • ···
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • ···
  • 30
  • navigate_next
전체 카테고리
  • 전체보기
    • 👨‍💻 소개
    • 🧠 저장
      • HTML&CSS
      • Javascript
      • Typescript
      • Vue
      • React
      • Git
      • Http
      • etc.
    • 📃 기록
      • 개발자 일지
      • 프로젝트
      • 강의
      • 일상
    • 기타
    • 👨‍🎨 디자인
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바