Eddie Sunny's Blog

Vue Study

Vue3 - teleport

2020.11.08

📌 목차 Introduction What is teleport? Usage Conclusion Reference 📌 Introduction 안녕하세요. 이번에는 teleport에 대해서 알아보겠습니다. 해당 코드는 여기서 확인할 수 있습니다. 📌 What is teleport? teleport는 vue2에서 vue-teleport와 똑같습니다. 문서에서는 주로 modal을 사용할때 쓴다고 하네요. to를 이용해서 보낼수 있는데 그냥 일반적인 string으로는 사용하지 않습니다. 아이디나 클래스를 사용해서 사용하라고 하네요. 당연한 얘기지만 원하는 곳으로 제대로 보낼수 있어야 하기 때문입니다. 📌 Usage // App.js MyDiv01 MyDiv02 이제 div(#teleport)안으로 들어가집니다. ..

Vue Study

Vue3 - Provide/Inject

2020.11.04

📌 목차 Introduction What is Provide/Inject? Usage Reactice Usage Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅에서는 새로운 provide/inject에 대해서 알아보겠습니다. 해당 코드는 여기서볼수 있습니다. 📌 What is Provide/Inject? 만약 이런 상황이라고 가정해볼게요. 상위의 부모에서 물론 props로 전달이 가능하겠지만 좀더 깔끔한 방법으로 한번에 전달할 순 없을까요? 네 그게 provide/inject입니다. 🎉 📌 Basic Usage 컴포넌트 구조 입니다. |_App -> provide ⭐️ |_MyDiv1 |_MyDiv2 |_MyDiv3 |_InjectedPractice -> inje..

Vue Study

Vue3 - LifeCycle

2020.10.30

📌 목차 Introduction Life cycle in vue Hook inside setup Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 Vue3에 새로운 life cycle에 대해서 알아보려고 합니다. 해당 코드는 여기서 확인할 수 있습니다. 📌 Hook inside setup 먼저 새롭게 바뀐 것들에 대해서 Vue3 공식 문서에 자세하게 나와있습니다. 네 이제 beforeCreated나 created는 굳이 선언을 할필요가 없어 졌습니다. import { onMounted, nextTick, onUpdated } from 'vue'; export default { name: 'App', components: { HelloWorld }, setup() { co..

Vue Study

Vue3 - computed and watch

2020.10.28

📌 목차 Introduction computed watchEffect watch Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅에서는 computed와 watch에 대해 알아보겠습니다. 해당 코드는 여기서확인할 수 있습니다. 📌 computed computed는 기존 vue 2에서의 computed와 같습니다. 다른 점은 immutable ref object를 반환합니다. import { ref, computed } from 'vue'; export default { setup() { const count = ref(1); const plusOne = computed(() => count.value + 1); const onClick = () => ..

Vue Study

Vue3 - Refs

2020.10.27

📌 목차 Introduction ref unref toRef toRefs isRef customRef shallowRef triggerRef Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅은 vue3의 refs에 대해 알아보겠습니다. 해당 코드는 여기서확인 하실수 있습니다. 📌 ref ref inner value로 reactive하고 mutable한 객체를 반환합니다. ref 객체는 value property를 가지고 있습니다. import { ref } from 'vue'; export default { setup() { const count = ref(0); const onClick = () => { console.log(count); // { ..

Vue Study

Vue3 - Basic Reactivity APIs

2020.10.26

📌 목차 Introduction reactive readonly isProxy isReactive isReadonly toRaw markRaw shallowReactive shallowReadonly Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 vue3의 새로운 reactive apis에 대해 알아보겠습니다. 해당 코드는 여기서 확인할 수 있습니다.🎉 📌 reactive reactive는 deep-copy된 object를 반환합니다. import { reactive } from 'vue'; export default { name: 'App', setup() { const obj = reactive({ count: 0 }); const c..

Javascript Study

Proxy

2020.10.26

📌 목차 Introduction What is proxy? Basic Example of Proxy Conclusion Reference 📌 Introduction 안녕하세요. 이번에 Vue3 공부와 나만의 프레임워크 만들기에서 나온 Proxy라는 개념이 생소하여 개념을 정리한 글입니다. 📌 What is proxy? Proxy객체는 자바스크립트에서의 기본 작업에 대한 행위에 대해 사용자 커스텀 동작을 정의할 때 사용합니다. 기본적인 Proxy 사용: new Proxy(target, handler); target은 Proxy로 랩핑할 대상 객체를 지정해주고 handler는 Proxy의 동작을 정의하는 함수 객체를 넣어줍니다. 📌 Basic Example of Proxy 만약 핸들러를 지정을 해주지 않는다..

Design Pattern

Mediator Pattern

2020.10.23

📌 목차 Introduction What's Mediator Pattern? Implementation Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅에서는 중재자 패턴에 대해 배워보겠습니다. 📌 What's Mediator Pattern? 중재자 패턴으로 Messenger Class를 구현 해볼 텐데요. 중재자 패턴은 다음 도형과 같습니다. Message를 각각의 participants에게 뿌려주게 됩니다. 여기에선 일단 두명만 등록을 하는 것으로 가정을 하고 어떻게 구현이 되는지를 보여드리곘습니다. 📌 Implementation 일단 중재자 패턴으로 쓴 Messenger는 이렇게 생겼습니다. class Messenger { constructor(..

전체 글

Vue3 - teleport

Vue3 - Provide/Inject

Vue3 - LifeCycle

Vue3 - computed and watch

Vue3 - Refs

Vue3 - Basic Reactivity APIs

Proxy

Mediator Pattern

티스토리툴바