Vue

게시글의 내용은 mkEditor로 작성되어 저장된 html이다. 그렇기 때문에 이를 게시글 상세 페이지에 보여주기 위한 방법을 고민했는데, 그 중 가장 간단한 것이 div 태그에 v-html을 바인딩하는 것이다. 그러나 v-html은 사용이 지양되고 있다. 그 이유는 XSS 공격 위험 때문이다. 우리가 렌더링하는 데이터의 경우 분리된 관리자페이지에서 작성 및 수정이 이뤄지기 때문에 신뢰할 수 있는 컨텐츠라고 생각했지만, 혹시 모를 위험에 v-html은 떠나보내줬다. 대신 q-editor을 사용해서 간단하고 가볍게 html 내용을 출력했다. 내가 필요한건 오직 html을 읽는 것 뿐이기 때문에 readonly로 사용했으며, toolbar을 지워버렸다. 굉장히 심플한 형태로 바인딩할 데이터, readonly..

Input | Quasar FrameworkThe QInput Vue component is used to capture text input from the user.quasar.dev Quasar의 컴포넌트들은 굉장히 다양한 옵션과 메서드, 이벤트 등을 제공하기 때문에 프로젝트에서 유용하게 사용하고 있다. 그러던 중 Input의 입력 값에 대한 유효성 검사를 강하게 해야 할 필요가 있어 validate 메서드에 대해 더 깊이 알아보게 됐다. validate 란? validate 메서드가 하는 일은 말 그대로 유효성 검사를 실행시키는 것이다. 즉, 입력 값에 대한 유효성 검사를 수행하고 유효성 검사 결과에 따른 오류 메시지와 오류 표시를 적용한다. 그렇다면 validate는 어떻게 사용할까? valida..

업그레이드 이유현재 개발 환경은 Vue 프레임워크와 TypeScript 언어를 사용하고 있다.개발을 하던 중 defineProps의 인터페이스를 지정해줄 때, 3.0.0 버전의 경우 동일한 SFC 파일 내부에 정의된 인터페이스만 읽을 수 있었다.즉, 외부 파일에 선언된 인터페이스를 Import 해오는 것이 불가능했다. (이는 declare로 선언된 인터페이스도 동일) 3.3 버전 이전의 Vue는 해당 props 인터페이스의 속성을 분석하여 해당하는 런타임 옵션을 생성할 수 있어야 하기 때문에 타입 정의를 로컬 환경으로 제한하고, 리터럴과 인터페이스만을 지원했었다. https://blog.vuejs.org/posts/vue-3-3#imported-and-complex-types-support-in-macr..