본문 바로가기

전체 글370

[Tiptap + Nuxtjs] 에디터 구현하기

Tiptap https://tiptap.dev/ 에러 RangeError: Adding different instances of a keyed plugin (plugin$) 기능 만들기 Youtube 넣기 작업 결과 https://tiptap.dev/api/nodes/youtube YouTube – Tiptap Editor tiptap.dev 컴포넌트 코드 import { Editor, EditorContent } from '@tiptap/vue-2'; import StarterKit from '@tiptap/starter-kit'; import Youtube from '@tiptap/extension-youtube'; export defualt { name: "TiptapComponent", mount.. 2022. 7. 13.

[React] 왜 컴포넌트에서는 React를 호출하는가

import React from 'react'; // ... 리엑트 함수 컴포넌트를 만들면, 항상 React를 임포트해줘야 합니다. 그 이유는 runtime에 빌드된 파일 안에서 React.createElement를 찾지 못하는 오류가 발생하기 때문임. 2022. 7. 9.

checkbox 기본 아이콘 크기 키우기

input[type='checkbox'] { zoom: 2; } 2022. 7. 7.

영어 문장

Thanks for your patience. Thanks in advance! 2022. 7. 7.

[javascript]Object.entries(객체)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries Object.entries() - JavaScript | MDN Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다). developer.mozilla.org Object.entries(객체) 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. 예시 코드 const object1 = { a1: '김치', a2: '불고기' .. 2022. 7. 6.

[React] 하위 컴포넌트에서 상위컴포넌트로 이벤트 전달 방법

리액트에서 하위 컴포넌트가 상위 컴포넌트의 함수를 실행하는 방법 상위 컴포넌트 export default function 상위 컴포넌트() { const [isEditMode, setIsEditMode] = useState(false); function closeEditMode() { setIsEditMode(false); } return ( ) } 하위 컴포넌트 export default function 하위컴포넌트({ closeEdit }) { async function editTweet(event) { event.preventDefault(); try { 서버로 무언가 submit closeEdit(); 👈 이 부분이 상위 컴포넌트의 함수를 실행시킴 } catch (error) { alert(err.. 2022. 7. 6.

[fireStore] 최신 버전편. document field 업데이트하기. React 적용

firebase 최신 문법으로 적용함. Javascript + React 웹 애플리케이션 document에 속한 field 값 수정하기 문서: https://firebase.google.com/docs/firestore/manage-data/add-data#set_a_document Cloud Firestore에 데이터 추가 | Firebase Documentation 의견 보내기 Cloud Firestore에 데이터 추가 다음과 같은 몇 가지 방법으로 Cloud Firestore에 데이터를 쓸 수 있습니다. 문서 식별자를 명시적으로 지정하여 컬렉션 내의 문서 데이터를 설정합니다. 컬 firebase.google.com 적용 코드 import { getFirestore, collection, setDoc.. 2022. 7. 6.

[vue-advance-cropper] cropper를 이미지 전체로 적용하기

개요 요구사항으로 이미지 전체를 cropper로 덮고 시작하자는 개선사항이 들어왔다. *cropper 참고 https://norserium.github.io/vue-advanced-cropper/components/cropper.html#props 개선 전 cropper가 이미지 부분만 잡고있다. 해결 방법 결과 cropper가 이미지 전체를 잡게 되었다. 2022. 7. 5.

[React] 버튼에 클릭 이벤트 함수 설정하기

onClick useState 사용방법 아래 코드 처럼 작성하면 바로 저 버튼이 화면에 렌더링되는 순간 함수가 실행된다. 클릭하지 않아도 말이다. 수정 취소 해결방법 괄호 빼고 넣어줘야, 클릭 후에 함수가 호출하게 할 수 있다. 수정 취소 2022. 7. 5.

Vue github package 만들기

작업 순서 1. 깃허브 래포 생성 2. vue-cli로 vue 프로젝트 생성 3. package.json 수정 (깃헙 오너이름: the user or organization account that owns the repository containing your project.) name키에는 @깃헙 오너이름/프로젝트 이름 private 키는 false로 수정 repository 키에 해당 프로젝트 깃헙 레포지토리 url 입력 publishConfig 키 추가 "publishConfig": { "registry":"https://npm.pkg.github.com" }, npm build-lib 명령어 터미널에서 실행 완성본 { "name": "@깃헙원격지이름/vue-cropper", "author": { .. 2022. 6. 29.

티스토리툴바