클라이언트/Vue.js (17) 리스트형 [뷰(Vue)] CKEditor5 태그 필터링 CKEditor는 html 태그를 포함하여 데이터를 저장하기 때문에 사용자가 태그를 삽입할 경우 그대로 저장된다. 물론 태그 빼고 저장할 수는 있지만 그러면 툴바를 사용하는 의미가 퇴색된다고 생각한다. (본문 꾸미기를 매우 중요하게 생각하는 타입..) 그래서 XSS(Cross site scripting)를 막기 위해, 허용 가능한 태그들을 따로 정의해두는 것이 좋다. 나는 클라이언트와 서버 모두에서 처리해 주었다. 먼저 CKEditor에서 특정 태그만 허용하는 기능을 자체적으로 제공해 주기 때문에, 클라이언트 측 처리는 매우매우 진짜 간단하다. CustomEditor.create(document.querySelector('#editor'), { allowedContent: 'p; strong; i; u;.. [뷰(Vue)] CKEditor5 텍스트 에디터의 종류는 매우 많다. tiptap, toast UI, summer note ... 그 중에서 vue와 호환이 되며 사용하기 쉬운 CKEditor를 골랐다. vue와 사용한 건 아니었지만, 이전에 써본 적이 있어서 고른 것도 있다. tiptap은 사용하기에 문서에서 설명이 부족하다고 느껴졌고, summer note는 이미 부트스트랩을 사용하고 있기 때문에 summer note에서 사용하는 부트스트랩과 충돌해서 사용하기 어려웠다. 돌고 돌아 돌아온 CKEditor. npm install로 설치해서 사용할 수도 있지만, 플러그인 등록 및 툴바 수정이 매우매우 불편했다. 결국 uninstall하고 온라인 빌더를 통해서 받아주었다. https://ckeditor.com/ckeditor-5/onlin.. [뷰(Vue)] font awesome html에서 아이콘을 사용할 때 종종 사용했던 font awsome. 검색 아이콘이 필요해서 오랜만에 다시 들어갔더니 vue 버전이 있어서 기록해 둔다. 홈페이지에 친절하게 잘 나와있긴 하지만.. https://fontawesome.com/docs/web/use-with/vue/#_1-add-svg-core Set Up with Vue The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 먼저 라이브러리를 설치해야 한다. //core 설치 npm install --save @fortaw.. [뷰(Vue)] 깊은 복사(deep copy) 객체의 값만 복사하고 싶은데, 참조가 할당되어 하나를 변화시키면 다른 것들도 함께 변하는 경우가 있다. 이것을 막기 위해서 깊은 복사를 사용한다. 1. lodash 라이브러리를 설치한다. npm install lodash 2. 사용하고자 하는 곳에 import 한다. import _ from 'lodash'; 3. cloneDeep 함수를 이용하여 값을 복사한다. this.newUserinfo = _.cloneDeep(this.userinfo); 회원정보 수정 시 값을 복사해두고 비교할 때 사용하였다. [뷰(Vue)] sessionStorage // sessionStorage - 브라우저의 세션 기간 동안 특정 정보를 저장해 둘 수 있다. - 새로고침을 해도 데이터가 유지된다. (창을 닫으면 사라진다.) // 저장 - Object 형식일 경우 꺼내쓰기가 힘들기 때문에 문자열로 변환하여 저장하는 것이 좋다. ( 그냥 문자열일 경우 그대로 저장하면 된다.) sessionStorage.setItem(키, 값); sessionStorage.setItem('setUser', JSON.stringify(user)); //Object 형식일 경우 // 불러오기 - Object를 문자열로 변환하여 보낸 것을 받을 경우, 다시 Object로 변환해주어야 한다. sessionStorage.getItem(키); const user = JSON.parse(sessi.. [뷰(Vue)] Proxy // proxy - 클라이언트와 서버가 포트를 다르게 사용할 때, CORS 문제가 발생하는 것을 방지하기 위해 설정한다. - 클라이언트에서 설정하는 방법과 서버에서 설정하는 방법이 있다. 1. 클라이언트에서 설정 - vue.config.js 파일을 아래와 같이 수정한다. const { defineConfig } = require('@vue/cli-service'); const target = 'http://localhost:8082'; module.exports = defineConfig({ transpileDependencies: true, devServer: { proxy: { '/api': { target, changeOrigin: true } } } }) * 참고로 나는 vue 서버가 8080, .. [뷰(Vue)] *소소한 프로그래밍: instagram * codingapple 강의를 보며 인스타그램 클론 코딩을 해보았다. 클론 코딩이라고 말하기도 뭐 할 정도로.. 간단한 거였지만 뿌듯! Vue 어렵지만 재밌구.. 편리해 [뷰(Vue)] Vuex, computed // Vuex - 모든 컴포넌트가 데이터에 직접 접근할 수 있도록 js 파일에 모든 데이터를 저장하도록 해주는 라이브러리 - 항상 사용하지는 않고, 데이터와 vue 파일이 많을 때 사용한다. - 컴포넌트 안에서 vuex 데이터를 직접 수정해서는 안 된다. > 수정을 원한다면 미리 store.js에 수정 방법을 정의해두고 그 방법대로 컴포넌트에서 소환해서 수정한다. // 설치 및 설정 1. vuex3를 설치한다. (vue2는 vuex3를 사용한다.) npm install vuex@3.4.0 --save 2. 데이터를 담을 store.js 파일을 생성한다. import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.St.. < 1 2 3 >
