그랜파 개발자의 프론트엔드 공부

10. 완성! Markdown EditorMarkdown Editor를 완성하여 봅시다. 이 완성본에는 ChatGPT가 알려준 것들 외에 highlight.js의 편리한 사용을 위하여 vue-markdown-highlight와 이미지 업로드 진행 상태를 보여주기 위한 vue-circular-progress 사용을 위하여 vuetify를 사용합니다프로젝트를 만들어 봅시다.1. Firebase 프로젝트 만들기:우선 Firebase의 Storage를 이용하기 위해서는 Firebase 프로젝트를 만들고 앱을 등록하여야 합니다. Firebase 콘솔에서 프로젝트를 만들고 앱을 등록하였다고 가정하고 진행합니다.2. Vue 프로젝트 만들기vue create markdown-editor? Please pick a pr..

9. ChatGPT에게 물었습니다.그리고, ChatGPT가 시키는 대로 해 봤습니다. Image Upload 개선 전  Image Upload 개선 내용은 이미지 업로드 진행 상태를 보여주고, 업로드가 끝나면 이미지를 보여주는 것입니다. 1단계: 필요한 라이브러리 설치 먼저 vue-circular-progress 라이브러리를 설치합니다. npm install vue-circular-progress   2단계: 구성요소 업데이트 업로드 후 순환 진행률과 이미지 미리보기를 포함하도록 'UploadImage.vue' 구성요소를 업데이트하세요.   3단계: 앱에서 구성요소 사용 기본 애플리케이션 파일(App.vue 또는 다른 상위 구성 요소)에서 UploadImage 구성 요소를 가져와 사용해야 합니다. App..

이미지를 선택하여 ‘Upload’를 누르면 Uploading… 이란 메시지가 나타나고, 업로드 후에는 업로드한 이미지의 URL을 보여줍니다. 이것을 이미지 업로드 중 원형으로 진행 상태를 보여주고, 업로드 후 이미지를 보여주도록 개선하고 싶어요. 8. ChatGPT에게 물었습니다. 이미지 업로드 중 원형으로 진행 상태를 보여주고, 업로드 후 이미지를 보여주도록 하고 싶어.I want to show the progress status in a circle while uploading an image, and then show the image after uploading. To show the progress status in a circle while uploading an image and then d..

7. ChatGPT에게 물었습니다.그리고, ChatGPT가 시키는 대로 해 봤습니다.0. Firebase 프로젝트 만들기:우선 Firebase의 Storage를 이용하기 위해서는 Firebase 프로젝트를 만들고 앱을 등록하여야 합니다.Firebase 콘솔 (https://console.firebase.google.com/?hl=ko) 에서 프로젝트를 만들고 앱을 등록하였다고 가정하고 진행합니다. 1. 새 Vue 프로젝트를 만듭니다. vue create image-upload? Please pick a preset: Manually select features? Check the features needed for your project: Babel, PWA, Router, Vuex? Choose a v..

6. ChatGPT에게 물었습니다. Vue를 사용하여 이미지를 firebase Storage에 업로드하는 예를 보여줘.To upload an image to Firebase Storage using Vue.js, you'll need to follow these steps:  1. Set Up Firebase in Your Vue Project2. Create a Component for Uploading Images3. Add the Logic to Upload the Image to Firebase Storage   Vue.js를 사용하여 Firebase 저장소에 이미지를 업로드하려면 다음 단계를 따라야 합니다. 1. Vue 프로젝트에 Firebase 설정2. 이미지 업로드를 위한 구성 요소 생성3...