🚀 Vue-Cookie 🔽 개요 Cookie는 Browser(Client의 Local)에 저장하는 임시 저장소 같은 것이에요. Cookie 삭제 등을 하게 되거나, 만료일이 지나게 되면 삭제 할 수 있답니다! Cookie 외에 `localStorage`, `sessionStorage` 등 Local에 사용하는 저장소들이 또 있는 것이에요. 참고로 Cookie를 이용하게 되면 Data는 Browser에는 저장되지만, Server에는 저장 되지 않는 것이에요. 그렇기 때문에 보안에 관련된 정보는 절대 넣으면 안 되는 것이에요. 예:) 비밀번호 참고로 `vue-cooke`이랑 `vue-cookies`가 존재하는데, `vue-cookies`가 더 대중적이고, `Readme`도 잘 되어 있어 주니하랑은 이것을 이..

🚀 tiptap Editor 이 에디터로 작성되는 내용은 Form의 textarea에 써지는 것이 아니고 div에 HTML로 써지고 미리 정의되어 있는 CSS Style로 형태를 바로바로 보여주는 식인것 같아 보이는 것이에요. 렌더리스라는게 이런 방식을 말하는것이 아닌가 생각이 드는 것이에요. Tiptap에서는 기본적으로 CSS스타일이 정의 되어 있지 않다고 합니다. 본인에 맞게 설정을 해야 하는 것이에요. 다만 샘플로 제공하고 있는 css를 가져다 사용할 수는 있을 것 같은 것이에요. 🔽 설치 ● npm 이용 설치 npm install @tiptap/vue-3 @tiptap/starter-kit ● yarn 이용 설치 yarn add @tiptap/vue-3 @tiptap/starter-kit ➜ j..

🚀 템플릿 refs란? Props와 Event가 존재하지만, 자식 요소에 JavaScript를 이용해 직접 접근해야 할 때가 있는데, 이 때 `ref` 속성을 이용해 참조(Reference) ID를 자식 컴포넌트나, HTML 요소에 부여함으로 직접 접근하게 해 주는 것이에요. 위와 같이 컴포넌트가 Mount 되었을 때, 프로그래밍 적으로 input에 focus를 하고자 하는 경우 등에 유용하게 사용할 수 있는 것이에요. const app = Vue.createApp({}) app.component('base-input', { template: ` `, methods: { focusInput() { this.$refs.input.focus() } }, mounted() { this.focusInput()..

🚀 Props 🔽 Props로 Data 전달 모든 Component Instance는 자체 격리된 범위가 있는 것이에요. 즉, 하위 컴포넌터의 템플릿에서 상위 데이터를 직접 참조 할 수 없으며, 그렇게 해서는 안 되는 것이에요. JAVA로 비유하자면 다형성과 같은 것인 거 같아요. Data는 `props` Option을 이용하여 하위 컴포넌트로 전달 될 수 있는 것이에요. prop은 상위 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성인 것이에요. 하위 컴포넌트는 `props` option을 이용하여 수신할 것으로 기대되는 Props를 명시적 선언해야 하는 것이에요. 예시 코드 Vue.component('child', { // props 정의 props: ['message'], // 데이터와 마찬가지로..

🚀 Axios란? JavaScript Application에서 Server 즉, Back End와의 통신을 하기 위한 HTTP Library가 바로 Axios라는 친구에요. 이 친구는 Vue.js에 종속된 것이 아니라 다른 JavaScript Application 즉, React.js 등에도 이용할 수 있는 것이에요. Web이나, App을 개발하다 보면 우리는 Data를 저장하고, 불러오기 위해 Back End Server를 구축하고 이용해야 하는 것이에요. Axios는 Promise 기반의 JavaScript 비동기 처리 방식을 이용하는 것이에요. 그렇기 때문에 Request를 보낸 뒤 .then()을 이용해서 결과값을 받아 처리하는 형식으로 구성이 되어 있답니다. axios.get('/api/data..

⚠️ 문제 발생! 분명 위와 같이 열심히 코딩을 해 두었는데, Contents 부에 그 어떤 화면도 보이지 않는 문제가 발생한 것이에요. 🤔 원인 분석 이 문제에 대해 곰곰히 생각을 해보니 App.vue에 아래 그림과 같이 router를 통해서 Contents 부를 Re Rendering을 하는데, DevInquryList.vue는 Router에 대한 특별한 설정을 한 기억이 없는 것이에요. 역시 이것이 문제 였던 것이에요! 이건 구글링 하지도 않고 찾았네요! 👍👍👍 🍻 문제 해결! 위와 같이 화면이 출력이 되는 것을 볼 수 있는 것이에요. 보이는 게 약간 엉성해 보이는 것은 Back End 서버가 꺼져 있어서 Data Bindding을 못하기 때문이에요.