본문 바로가기
반응형

분류 전체보기1062

리액트 - 캡처한 이미지 여러 개 업로드하기 (Upload Captured Images to GitHub) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크 Git / GitHub 전체 링크 참고- multer로 이미지 업로드하기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 이전 글을 응용해서 여러 개의 캡처된 이미지를 업로드해 보자 여러 개의 이미지를 다루기 때문에 useState는 배열로 관리한다.const [imageDataUrls, setImageDataUrls] = useState([]); 그리고 붙여넣기 이벤트가 발생할 때마다 배열에 이미지 URL을.. 2024. 1. 17.
리액트 - 캡처한 이미지를 깃허브에 업로드하기 (Upload Captured Image to GitHub) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크Git / GitHub 전체 링크 참고- 이미지 캡처해서 웹에 붙여넣기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 이번에는 이미지 파일을 업로드하지 말고, 캡처한 이미지를 깃허브에 올려보자. 링크를 참고하여 캡처한 이미지를 먼저 웹 페이지에 붙여 넣는 코드에서 보완해 나가자import React, { useState } from "react";const Capture = () => { const [ima.. 2024. 1. 17.
리액트 - 깃허브에 업로드된 이미지 삭제하기 (Delete an Uploaded Image on GitHub) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크Git / GitHub 전체 링크 참고- RESTful API로 파일 삭제하기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 이제 업로드된 이미지를 리액트에서 지우고, 깃허브에서 파일을 삭제해 보자. 먼저 아이콘 버튼을 알맞은 이미지로 교체하자. DeleteOutlineIcon으로 수정하였다.import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';.. 2024. 1. 17.
리액트 - 깃허브 API로 이미지 업로드하기 (Upload Images with GitHub RESTful API) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크Git / GitHub 전체 링크 참고- multer로 이미지 업로드하기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 아래와 같이 깃허브 API를 이용하여 이미지 파일을 업로드하고, 다시 이미지를 잘 불러오는지 확인해 보자. 테스트하기 편하게 이전 글의 코드를 유지하고 깃허브 리포지토리에서 이미지 파일 하나만 남겨두었다. ReactImageList.jsimport React, { useEffect, useS.. 2024. 1. 17.
리액트 Material - 깃허브 리포지토리 이미지 불러오기 (Load GitHub Repository Images with Image List) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크 Git / GitHub 전체 링크 참고- https://mui.com/material-ui/react-image-list/- RESTful API로 파일 읽기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 링크를 참고하여 아래 예시 코드를 실행해 보자.import * as React from "react";import Box from "@mui/material/Box";import ImageList from.. 2024. 1. 17.
리액트 - 이미지 캡처해서 웹에 붙여넣기 (Capture and Paste Image) 리액트 전체 링크 아래 결과는 링크에서 확인할 수 있다. 이미지를 캡처하여 웹 프론트엔드에 붙여넣기를 해보자. 아래와 같이 div 태그로 이미지를 붙여넣을 영역을 만든다. onPaste는 Ctrl + V (붙여넣기) 를 할 경우 동작하는 이벤트다. 이미지 붙여넣기 {image && } onPaste는 useState와 함께 아래와 같이 동작한다. 클립 보드에 존재하는 데이터 중 "image"를 찾는다. (originalEvent는 옛 브라우저에서 사용된다.) 그리고 해당 이미지를 Blob 객체로 만들어서 FileReader로 Load한다. const [image, setImage] = useState(null); const handleImagePaste = (event) => { const items =.. 2024. 1. 15.
Node JS - exec으로 Git Push 하기 Node JS 전체 링크 Git / GitHub 전체 링크 원격 저장소에 변경된 내용을 주기적으로 Push를 하거나, 리액트 등에서 특정 이벤트가 발생했을 때 Push를 한다고 가정해 보자. 먼저 필요한 명령어를 shell script로 만들어 둔다. (test.sh) #!/bin/bash # shell script가 있는 디렉토리 이동 cd "D:/github/auto-test" # Git 저장소 초기화 git init # 원격 저장소의 main 브랜치 fetch git fetch origin main # 로컬 저장소의 main 브랜치로 원격 저장소의 main 브랜치 병합 git merge origin/main # 변경된 모든 파일을 스테이징 git add . # 커밋 생성 git commit -m ".. 2024. 1. 14.
Git Bash - 윈도우 사용 중인 포트 강제 종료하기 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) Git / GitHub 전체 링크 리액트를 종료했음에도 새로 시작할 경우 아래와 같이 현재 포트가 사용 중인 경우가 있다.$ npm run start> react-material@0.1.0 start> react-scripts start...Something is already running on port 3000. 이런 경우 강제로 사용 중인 포트를 종료해 보자. Git Bash에서 netstat -ano | grep [Port Number]를 입력해보자. $ netstat -ano | grep 3000 TCP 0.0.0.0:3000 0.0.0.0:0 LISTENING 32.. 2024. 1. 14.
깃허브 액션 - 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 scheduleon: schedule: - cron: '*/10 * * * *' jobs: ten_minutes_schedule_job: runs-on: ubuntu-latest steps: - name: Display current time .. 2024. 1. 7.
반응형

티스토리툴바