본문 바로가기
반응형

github57

리액트 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 (Toast UI Markdown Editor) 리액트 전체 링크 Git / GitHub 전체 링크 참고 - Toast UI 에디터로 깃허브 마크다운 저장하기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 Toast UI Editor에서 캡처 이미지를 포함하여 깃허브의 README.md를 수정해 보자. Toast UI 에디터로 깃허브 마크다운 저장하기를 참고하여 아래 코드에서 시작하자. 이 코드는 auto-test 리포지토리의 README.md를 편집할 수 있다. import React, { useEffect, useRef, useState .. 2024. 1. 17.
리액트 - 캡처한 이미지 여러 개 업로드하기 (Upload Captured Images to GitHub) 리액트 전체 링크 Git / GitHub 전체 링크 참고 - multer로 이미지 업로드하기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 이전 글을 응용해서 여러 개의 캡처된 이미지를 업로드해 보자 여러 개의 이미지를 다루기 때문에 useState는 배열로 관리한다. const [imageDataUrls, setImageDataUrls] = useState([]); 그리고 붙여넣기 이벤트가 발생할 때마다 배열에 이미지 URL을 추가한다. const handleImagePaste = (event.. 2024. 1. 17.
리액트 - 캡처한 이미지를 깃허브에 업로드하기 (Upload Captured Image to GitHub) 리액트 전체 링크 Git / GitHub 전체 링크 참고 - 이미지 캡처해서 웹에 붙여넣기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 이번에는 이미지 파일을 업로드하지 말고, 캡처한 이미지를 깃허브에 올려보자. 링크를 참고하여 캡처한 이미지를 먼저 웹 페이지에 붙여 넣는 코드에서 보완해 나가자 import React, { useState } from "react"; const Capture = () => { const [image, setImage] = useState(null); const.. 2024. 1. 17.
리액트 - 깃허브에 업로드된 이미지 삭제하기 (Delete an Uploaded Image on GitHub) 리액트 전체 링크 Git / GitHub 전체 링크 참고 - RESTful API로 파일 삭제하기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 이제 업로드된 이미지를 리액트에서 지우고, 깃허브에서 파일을 삭제해 보자. 먼저 아이콘 버튼을 알맞은 이미지로 교체하자. DeleteOutlineIcon으로 수정하였다. import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; ... 깃허브에 업로드된 이미지를 지우기 위해 fileLoad를 .. 2024. 1. 17.
리액트 - 깃허브 API로 이미지 업로드하기 (Upload Images with GitHub RESTful API) 리액트 전체 링크 Git / GitHub 전체 링크 참고 - multer로 이미지 업로드하기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 아래와 같이 깃허브 API를 이용하여 이미지 파일을 업로드하고, 다시 이미지를 잘 불러오는지 확인해 보자. 테스트하기 편하게 이전 글의 코드를 유지하고 깃허브 리포지토리에서 이미지 파일 하나만 남겨두었다. ReactImageList.js import React, { useEffect, useState } from "react"; import Box from .. 2024. 1. 17.
깃허브 액션 - Schedule로 반복 작업하기 Git / GitHub 전체 링크 참고 - https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#schedule 아래의 yml을 repo의 .github/workflow에 추가해 보자. (just-10-minutes.yml) name: Every 10 Minutes schedule on: schedule: - cron: '*/10 * * * *' jobs: ten_minutes_schedule_job: runs-on: ubuntu-latest steps: - name: Display current time run: | echo "Current Time" echo "UTC : $(date +"%Y-%m-%dT%H:%.. 2024. 1. 7.
깃허브 액션 - Push 될 때 메일 보내기 (Send Email using GitHub Actions) Git / GitHub 전체 링크 참고 - Node JS + jest를 GitHub Actions로 실행하기 - nodemailer로 구글, 네이버, 다음 카카오 메일 보내기 - 메일 알림 설정하기 깃허브 액션을 이용하여 repo에 push될 때마다 메일을 보내보자. 먼저 링크를 참고하여 아래의 sendEmail.js를 repository에 저장하자. 참고로 gmail의 경우 from을 설정할 필요가 없다. const nodemailer = require('nodemailer'); async function sendEmail() { const transporter = nodemailer.createTransport({ service: "gmail", secure: false, auth: { user: p.. 2023. 12. 16.
리액트 - 쿠키로 GitHub OAuth 로그인 인증 관리하기 with react-cookie 리액트 전체 링크 Git / GitHub 전체 링크 참고 - 로컬 스토리지 사용 방법과 세션 스토리지 비교 - 댓글 기능 만들기 with react-comments-section - 로그인한 사용자만 댓글 기능 사용하기 - GitHub RESTful API로 댓글 저장하기 - 리액트 쿠키로 GitHub OAuth 로그인 인증 관리하기 - Mui Pagination으로 댓글 페이지로 나누기 현재 로그인 인증은 로컬 스토리지를 이용하여 처리하였다. react-cookie를 이용하여 로그인 인증 정보를 관리해보자. 로컬 스토리지와 쿠키의 차이는 다음과 같다. 로컬 스토리지 쿠키 용량 최소 5MB 이상 최대 4KB 전송 서버에 자동 전송 X (직접 구현) HTTP 요청 헤더에 자동 포함 수명 만료 기간 미설정시.. 2023. 11. 15.
리액트 - GitHub RESTful API로 댓글 저장하기 with react-comments-section 리액트 전체 링크 Git / GitHub 전체 링크 참고 - https://www.npmjs.com/package/react-comments-section - https://riyanegi.github.io/react-comments-documentation/ - RESTful API로 파일 읽기 - RESTful API로 파일 쓰기 - RESTful API로 파일 삭제하기 - 댓글 기능 만들기 with react-comments-section - 로그인한 사용자만 댓글 기능 사용하기 - GitHub RESTful API로 댓글 저장하기 - 리액트 쿠키로 GitHub OAuth 로그인 인증 관리하기 - Mui Pagination으로 댓글 페이지로 나누기 깃허브 RESTful API를 이용하여 댓글을 저장.. 2023. 11. 15.
반응형

티스토리툴바