본문 바로가기
728x90
반응형

분류 전체보기539

[명동교자] 명동은 명동교자먹으러 가는곳이다. 그렇다 명동교자 명동 근본 맛집 명동 방문 필수 식당 명동 교자는 워낙 유명하다. 난 본점만 간다. 근본은 본점이다, 이날은 신세계에서 가방을 보러 갔던날이다. 돈을 준데도 가방을 못사는 이런 상황 기분이 상했지만 명동교자 한그릇이면 화가 풀린다. 이것은 근본이다. 무슨 말이 필요한가. 명동교자는 늘 사람이 많다 = 장사가 잘된다 = 맛있다. 칼국수 최강 맛집이라 감히 말하겠다. 사실 맛집 추천할것도 없다 그냥 자랑하고싶어서 올려본다. 명동 길거리에서 이상한거 사드시지말고 명동교자 방문 하시길 감히 추천해본다. 주차 불가 맛 최강맛집 가격 괜찮은편 재방문의사 O 2023. 8. 29.
[대시보드] amcharts 라이브러리 사용 리액트 Bar 차트 amcharts 로 차트를 생성하는 코드이다. amcharts 중 버전 5 사용 amcharts 를 install 하고 import 해준다. import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; 데이터 구조 let data = { {category : '기억' , value : 1 } , {category : '니은' , value : 1 } , {category : '디귿' , value : 1 } , .... .... {category : '히읏' , value : .. 2023. 8. 27.
[포천 맛집] 은빛호수 계곡 닭백숙 갬성 발담그고 닭백숙 먹기 여름 휴가 국룰 포천 맛집 서울 근교 계곡 맛집 은빛 호수 서울 근교 에 계곡 갬성 오지는곳을 발견했다 계곡에 발담그고 백숙먹으며 더위를 이겨내기에 최고의 장소 방문 은 2022년 (작년)에 했다. 포스팅이 늦었다는건 내가 게으르다는것 예약은 필수 *** 예약하고 도착해서 자리를 안내받았다. 4명이 방문했다 (시어머니를 모시고 갔던 날) 도착해서 자리를 안내받고 닭백숙 + 닭도리탕을 주문했다. 재빠르진않고 계곡 식당이 그러하듯 천천히 찬 세팅이 되었다. 그래도 찬도 이쁘게 종류별로 많이 나오고 신경 많이 쓴 느낌 양이 너무 많을 꺼같은데 내 남편의 신념이 너무 강했다. "모자른것보다 남기는게 낫다." 작은 백숙아니고 토종닭이다. 굉장히 크고 부드럽진않다. 백숙이 부드럽지않다 해서 맛없다는 뜻은 아니다. 맛은 있음 계곡이.. 2023. 8. 25.
ReactQuill 리액트 글쓰기 에디터 이미지 드롭하여 삽입하기 ReactQuill 을 사용하면서 기본만 사용하기엔 불편한 부분들이 많다. 정말 쉬운 작업으로 이미지를 드롭하여 인서트 할수 있는 기능을 소개한다. import ReactQuill , {Quill} from "react-quill" import '../../assets/css/quill.snow.css' import { ImageDrop } from "quill-image-drop-module"; Quill.register("modules/imageDrop", ImageDrop); const modules = useMemo(()=>{ return { // table: true, // tableUI: true, toolbar: { container: toolbarOptions, }, // ImageResi.. 2023. 8. 14.
react-quill 리액트 글쓰기 에디터 이미지 서버에 저장후 url 연결 하기 [base64 문제 해결 too large data] react-quill을 사용해서 글 내에 이미지를 삽입하면 자동으로 base64변환해서 사이즈가 커진다. 이미지 핸들러를 이용하여 이미지를 서버나 클라우드에 저장하고 url을 사용하여 String으로 저장되는 contents의 크기를 줄이기로했다. import React, { useEffect, useMemo, useRef, useState } from "react" import ReactQuill , {Quill} from "react-quill" import '../../assets/css/quill.snow.css' quill 을 사용할떄 필요한 기본 들만 임포트 해줘도 충분하다. const quillRef = useRef(null); useEffect(() => { const quill = qui.. 2023. 8. 11.
리액트 글쓰기 라이브러리 사용 해서 에디터 만들기 react-quill 에디터 이미지 파일 리사이즈 react-quill 은 리액트에디터 라이브러리중 하나이다 여러개의 에디터 라이브러리가 있지만 사실상 리액트에디터 라이브러리중 유일하게 한국어를 지원하는 라이브러리 이기 때문에 유일하게 사용가능 하다. (2023년기준) 여러 모듈도 지원하고 라이브러리 사용이 간편하다. 이미지 추가시, base64 로 변황되어 String값으로 들어간다 에디터 (이미지 리사이즈 없이) 기본 코드 import React, { useState } from "react" import ReactQuill from "react-quill" import '../../assets/css/quill.snow.css' function Reactquill({id, value, setVlaue, isDisable}) { const modul.. 2023. 8. 10.
[React] 새창 Pop up 데이터 넘겨주는 방법 const childPopup = useRef() const onPopup = () => { const url = `/preview` childPopup.current = window.open(url, "_blank"); // "noopener, noreferrer" childPopup.current.param = param } . . . 미리보기 param 을 넘겨주면 새창 컴포넌트에 props 에 param이 담겨있다. 신기방기 childPopup.current.param = param 2023. 7. 19.
[React] 새창 Pop up 열기 리액트에서 새창팝업 띄우는 방법은 두가지가 있다. 1. import React, { useState } from 'react'; import { Link } from "react-router-dom" const ButtonPreview = (props) => { return ( 미리보기 ); }; export default ButtonPreview; Link태그 사용하여 타겟을 _blank를 주는방식 이 경우 라우터에 /preview 경로 파일을 연결해준다. js파일만 세팅해주면 간단하게 사용가능하지만 우리는 대부분 리액트를 사용할때, 컴포넌트들을 화면에서 분리하고 그 컴포넌트만 랜더링 하기때문에 디폴트 레이아웃이 잡혀있을것이다. 나의 경우 새창은 디폴트레이아웃과 상관없는 화면음으로 다른 방법을 사용했다.. 2023. 6. 13.
Docker로 리액트앱 생성하기 Ctrl + ~ 터니널 실행 $ docker run -it --name node-01 node:17-alpine3.15 ash Unable to find image 'node:17-alpine3.15' locally 17-alpine3.15: Pulling from library/node df9b9388f04a: Already exists 1bedfac31d6a: Pull complete 6463b5f3dbb1: Pull complete 885e68a88c76: Pull complete Digest: sha256:76e638eb0d73ac5f0b76d70df3ce1ddad941ac63595d44092b625e2cd557ddbf Status: Downloaded newer image for node:17-.. 2023. 5. 1.
728x90
반응형