꾸준히만 가자

ErrorBoundary가 뭘까 에러 바운더리는 선언적으로 에러를 처리할 수 있게 컴포넌트 형태로 사용되는 에러 헨들링 방법 중 하나입니다. 상세내용 참고 https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary Component – React The library for web and native user interfaces react.dev vue 기반의 서비스에서 저 좋은 에러 헨들링 기법을 적용하고 싶다는 강렬한 생각이 들었습니다...🔥 Vue에서 ErrorBoundary 구현하기 먼저 Vue에는 다행이도 에러를 감지해주는 라이프사이클 함수가 존재합니다. 이를 적극적으로 이용해 리액트에서와..

2022년 5월 경에 작성한 블로그 글을 이관한 포스트입니다. Vue3 setup에서 props 사용 vue2는 export default{ props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, } 위처럼 사용을 해왔을 것입니다. 하지만 vue3 setup composition API에서는 defineProps({ title:{ Type: String, required: true } }) 위와 같이 사용하게 됩니다. defineProps에 타입스크립트 적용하기 타입스크립트를 사용하는 개발자라면 위 defineProp에 Type 지정에 사용하는 타입과 타..

2022년 5월 경에 작성한 블로그 글을 이관한 포스트입니다. Vue에서 scoped란..? vue 개발을 하면서 보통 스타일 태그에 보통 scoped를 주어 사용할 것입니다. 하지만 이렇게 되면 컴포넌트로 정의해놓은 UI를 적용 페이지에 맞게 입맛대로 커스텀해서 사용하기가 힘들 것 입니다. 특히나 페어코팅을 하고 컴포넌트가 내가 만든것이 아니라면 더욱이 그렇죠. 그래서 입맛대로 바꾸려면 어떻게..? 이런 경우를 대비해서 vue에서 정확히는 vue-loader에서는 Deep Selectors를 제공하고 있습니다. 일반적인 css에서는 .a >>> .b {...} 위 처럼 주면 되지만 scss를 사용한다면 위 명령어가 정상작동하지 않을 것입니다. scss에서는 .a::v-deep .b {...} 위로 공식..