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

11. ChatGPT에게 물었습니다.PWA가 뭐야?What is a PWA? A Progressive Web App (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.PWA(프로그레시브 웹 앱)는 HTML, CSS, JavaScript 등 일반적인 웹 기술을 사용하여 구축된 웹을 통해 제공되는..

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...

우리는 PWA 즉 WebApp을 개발합니다.5. ChatGPT에게 물었습니다.Firebase를 사용하려면 어떻게 하지? What do I need to do to use firebase?  To use Firebase in your project, you'll need to follow several steps, including setting up a Firebase project, configuring it for your platform, and integrating the Firebase SDK into your application. Here's a step-by-step guide to get you started: 프로젝트에서 Firebase를 사용하려면 Firebase 프로젝트 설정, 플랫..

만들어진 Markdown Editor가 그리 만족스럽게 보이지는 않지만 그런대로 동작은 합니다. highlight.js에 대해 알아본 것은 Markdown Editor에서 ‘’를 적용하였을 때 코드 구문이 하이라이트(강조)해서 보여주기를 원했기 때문입니다. 그러나 우리가 만든 Markdown Editor는 ''에서 코드 구분 highlight 기능이 정상 동작하지 않습니다.  그리고 Markdown Editor에서 Image 기능을 실행하면 이미지의 URL을 입력하라고 합니다. 실제 사용에서는 보통 이미지를 로컬 컴퓨터에서 선택하여 사용하는 경우가 많습니다. 그래서 Image 기능을 실행할 때 컴퓨터에서 이미지를 선택하면 이것을 클라우드에 업로드하고, 업로드한 이미지의 URL을 추가하도록 기능을 개선하고..

Markdown Editor를 만들었습니다.Vue를 사용하여 markdown editor 사용 예제를 만들어줘.예제 속에 hightlight.js가 사용되었지만 이것이 뭔지 모르겠습니다.3. ChatGPT에게 물었습니다.hightlight.js 란? highlight.js는 웹 페이지에서 코드 구문을 하이라이트(강조)하기 위한 자바스크립트 라이브러리입니다. 다양한 프로그래밍 언어를 자동으로 인식하고, 그에 맞는 색상과 스타일을 적용해 코드의 가독성을 높여줍니다. 주로 블로그나 문서 사이트, 개발자 포털 등에서 코드 예제를 보기 좋게 표시하기 위해 사용됩니다.주요 기능과 특징은 다음과 같습니다:자동 언어 감지: highlight.js는 코드를 자동으로 분석해 어떤 언어인지 감지하고, 해당 언어의 구문에 맞..

2. ChatGPT에게 물었습니다.Vue를 사용하여 markdown editor 사용 예제를 만들어줘.ChatGPT가 시키는 대로 해 봤습니다.코드의 편집은 Visual Studio Code (vscode)를 사용합니다. vscode는 광범위한 프로그래밍 언어를 지원하며 현재 사용할 수 있는 가장 인기 있는 코드 편집기 중 하나로서 다양한 기능을 제공합니다.1. 프로젝트 폴더 만들기C:\2024\my-project 2. Vue CLI 설치npm install -g @vue/cli 3. Vue Project 만들기vue create markdown-editor? Please pick a preset: Manually select features? Check the features needed for you..