본문 바로가기

전체 글99

flymodal 1.2.1 - react 용 modal 콤포넌트 리액트용 모달 콤포넌트 flymodal 이 1.2.1 으로 업데이트 되었습니다.UI는 그대로지만, 호출하는 방법이 간략하게 바뀌었습니다. flymodal 최신 버전 설치npm i flymodal@latest 토스트 메세지 띄우기import flyModal from 'flymodal';import 'flymodal/dist/flymodal.css';const App = () => { const showToast = () => { flyModal.showToast('This is a toast message.'); }; return ( toast.. 2026. 8. 25.
flyeditor 1.1.0 - react 용 위지윅 웹에디터 flyeditor 가 1.1.0 으로 업데이트 되었습니다.(flyeditor는 리액트용 웹에디터 콤포넌트로 누구나 무료로 설치해서 사용할 수 있는 MIT라이센스 입니다.) 설치는 아래와 같이 최신버전으로 설치하면 됩니다.npm i flyeditor@latest 업데이트 내용- 소스코드 삽입툴 추가- 유튜브영상 삽입툴 추가- 기본 예제 코드 변경 설치해보면 소스코드와 유튜브영상 삽입 툴이 추가되어 있습니다. (그림에는 좌측 하단에 있으며, 상단으로 옮길 수도 있습니다.) 기본 예제import React, { useState } from 'react';import FlyEditor from 'flyeditor';import 'flyeditor/dist/flyeditor.css';const MyEditor.. 2026. 8. 25.
react 용 위지윅 웹에디터 - flyeditor FlyEditorFlyEditor는 React 환경에서 간편하게 사용할 수 있는 위지윅(WYSIWYG) 웹에디터 컴포넌트입니다. 주요 기능 (Features)자유로운 모드 전환: editable 속성을 통해 편집 모드와 읽기 전용(Viewer) 모드를 손쉽게 전환할 수 있습니다.다양한 이미지 업로드 방식 지원:단일 및 다중 파일 업로드 콜백 지원 (onUploadImage, onUploadImages)에디터 내 직접 드래그 앤 드롭(Drag & Drop) 업로드 지원외부 상태(insertImageSource)를 통한 동적 이미지 URL 직접 삽입 기능자유로운 커스텀 툴바 (Toolbar): 가로(toolsH) 및 세로(toolsV) 툴바 항목을 원하는 구성으로 자유롭게 배치 및 제한할 수 있습니다.커스텀.. 2026. 8. 21.
react 용 modal 콤포넌트 (ts) - flymodal flymodal * react 용 modal 콤포넌트 (typescript)- 토스트메세지 띄우기- 대화상자 띄우기리액트 상태값, 랜더링 어쩌구 복잡한거 없이 그냥 함수 호출로 간단히 토스트, 다이얼로그 창 띄우기 좋다. * DEMOhttps://disketch-apps.pages.dev/flymodal/ * npm 링크https://www.npmjs.com/package/flymodal * 설치npm i flymodal* 임포트import flyModal from 'flymodal';import 'flymodal/dist/flymodal.css'; * 토스트 메세지 띄우기const showToast = (pos: 'top' | 'center' | 'bottom' = 'center') => { f.. 2026. 8. 4.
무료 api 서버 운영 - supabase 아래는 supabase 의 요금제 안내이다. 위 무료 항목을 확인해보면,무제한 api 호출월 5만명의 액티브유저500메가 데이터베이스 (postgresql)5G 트래픽 (아웃바운드)1기가 스토리지 개발용이거나 개인적으로 사용하는 용도로 좋다.(상업용사이트라도 초기에는 무료로 운영하다가 이용자가 많아지면 요금 업그레이드하면 되므로 부담이 없다.) 주의할 점 : 무료계정은 1주일동안 이용내역이 없으면 정지된다. (정지되면 관리페이지에 접속하여 해제할 수 있다.) * 핵심 : cloudflare pages 와 supabase 를 같이 사용하면 동적인 웹사이트를 무료로 운영할 수 있다. 2026. 5. 19.
무료로 정적 웹페이지 운영 하기 : cloudflare pages 아래는 cloudflare pages 요금제 안내인데, unlimited 가 돋보인다. 위 안내에 따라 cloudflare 의 pages 를 이용하여 정적인 파일들을 올려놓고 무료로 웹사이트를 운영할 수 있다.정적인 페이지라는건 html, css, image 등 소스를 직접 수정하지 않으면 변하지 않는 페이지를 뜻한다. (서버에 파일을 저장하거나, 데이터베이스를 이용하는 등의 동적인 서버 처리는 불가능하므로 동적인 처리를 하려면 firebase나 supabase 와 같은 클라우드 서비스를 추가적으로 이용해야 한다.) 깃허브에 리액트 소스를 올리고 cloud flare pages 에 연결하면 소스 커밋 시 자동으로 빌드되고 배포되어 편리하다.웹사이트를 운영할 도메인을 구입했다면 도메인도 연결 가능하고(ht.. 2026. 5. 19.
vscode - 특정 프로젝트에만 vscode 설정값 적용 (ex. .prettierrc) {"prettier.configPath": ".prettierrc","editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode"}프로젝트의 루트 경로에 .vscode/settings.json 폴더와 파일을 생성해 다음과 같이 특별히 적용할 내용을 추가할 수 있다. 2026. 5. 19.
vite 으로 리액트 프로젝트 시작하기 vite 으로 리액트 프로젝트 시작하기npm create vite@latest my-react-app 1. 위 명령어 입력 후 'y' 로 진행 2. React 선택 (키보드 방향키로 위/아래 이동하고 "React" 항목에 Enter) 3. typescript 를 사용할것이므로 아래와 같이 "Typescript + React Compiler" 항목 Enter(React Compiler 를 사용하면 useMemo, useCallBack 을 자동으로 적용해주므로 선택) 4. 아래와 같이 설치 후 바로 시작 "Yes" 선택 5. 설치 중... 6. 설치 완료 메세지 (브라우저에 아래 주소 입력하여 페이지 확인) 7. 확인 (아래 Count is 0 버튼 클릭하면 숫자가 증가하는것 확인할 수 있다.).. 2026. 5. 19.
리눅스 버전 확인, 리눅스 커널 버전 확인 리눅스 버전 확인 (아래 세가지 방법)cat /etc/os-releaselsb_release -a/etc/*-release 리눅스 커널 버전 확인uname -a 끝. 2025. 11. 2.
비정상 사용자 ip 로 접속 차단하기 리눅스 서버 운영중 비정상 트래픽이 발생하는 경우가 있다. 이 경우 근본적인 원인을 찾아 수정하는것이 맞겠지만, 우선 급한대로 해당 접속ip 를 먼저 차단하려면 비정상적인 접속자의 ip 를 확인하고 아래와 같이 접속을 차단한다.route add -host xxx.xxx.xxx.xxx reject 차단된 ip 의 해제는 아래와 같이 하면 된다. route del -host xxx.xxx.xxx.xxx reject 끝. 2025. 11. 2.
mariaDB 사용자 등록 / 패스워드 / 권한 설정 mariaDB 사용자 등록 / 패스워드 / 권한 설정 1. 사용자 등록create user 'userid'@'localhost' identified by '12345678'; 2. 사용자 패스워드 변경SET PASSWORD FOR ‘userid’@‘localhost’ = PASSWORD('12345678'); 3. 데이터 베이스 사용 권한 설정GRANT ALL PRIVILEGES ON dbname.* TO 'userid'@'localhost' IDENTIFIED BY '12345678'; 4. 위 내용을 서버 내부(localhost)에서만 접속하용하므로, 외부접속을 허용하게 하거나, 특정 ip에서 접근을 허용하게 하려면 위 내용 중 'localhost' 부분에 '%' 나 '123.123.123.12.. 2025. 10. 23.
특정 날짜 필드에 입력된 날짜 값을 1년 전으로 업데이트 특정 필드의 날짜 값을 1년 전으로 업데이트 (입력되어 있는 값을 기준으로 1년 전으로) update table set 필드명 = DATE_SUB(필드명, INTERVAL 1 YEAR) where ...... ; 끝. 2025. 10. 16.

티스토리툴바