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

만들어진 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..

ChatGPT에게 물었습니다.그리고 시키는 대로 해 봤습니다.1. ChatGPT에게 물었습니다.Vue를 사용하여 markdown editor 사용 예제를 만들어줘.Create an example of using markdown editor using vue.Sure! I'll provide a complete example of a Vue application that uses the MarkdownEditor component. This example will set up a Vue project, create the Markdown editor component, and use it in the main application.네! 'MarkdownEditor' 구성 요소를 사용하는 Vue 애플리케이션..