본문 바로가기
반응형

개발/React175

리액트 - 깃허브에 업로드된 이미지 삭제하기 (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.
리액트 - useLocation으로 페이지 이동시 스크롤 상단으로 초기화하기 (Scroll to Top on Page Transition) 리액트 전체 링크 리액트에서 페이지를 이동할 때, 스크롤을 상단으로 옮겨보자. 테스트를 위해 아래와 같은 라우터를 만든다. Scroll1.js는 다음과 같다. (Scroll2는 Component의 이름만 다르다.) import React from "react"; const Scroll1 = () => { const numbers = Array.from({ length: 100 }, (_, index) => index + 1); return ( {numbers.map((number) => ( Scroll 1 : {number} ))} ); }; export default Scroll1; 스크롤이 만들어지도록 태그를 100개 생성하였다. Scroll1에서 Scroll2로 번갈아가며 움직여보자. 위의 결과대로.. 2023. 12. 16.
리액트 - Toast UI Editor로 메일 보내기 with nodemailer 리액트 전체 링크 Node JS 전체 링크 참고 - body-parser를 이용해 데이터 전송 받기 - Toast UI 에디터로 깃허브 마크다운 저장하기 - nodemailer로 구글, 네이버, 다음 카카오 메일 보내기 nodemailer의 html 설정으로 어느 정도 형식이 있는 메일을 보낼 수 있다. 리액트에서 Toast UI Editor를 이용하면 getHTML() 으로 html 태그를 쉽게 얻을 수 있다. 먼저 링크를 참고하여 express로 nodemailer 라우터를 구축하자. ./routes/post_man.js 메일이 전송되지 않은 경우 try catch를 이용해 false를 send하도록 하였다. const express = require("express"); const router = .. 2023. 12. 10.
리액트 - IP 변환하기 (IP Converter) 리액트 전체 링크 참고 - 정수를 IP로 변환하기 아래와 같은 IP 변환기를 만들어보자. 위의 결과는 링크에서 확인할 수 있다. JavaScript IP 변환 링크를 참고하여 IP 관련 함수를 JavaScript로 구현해보자. - IPv4 Invalid Check - IPv6 Invalid Check - IPv6 Invalid Check 축약형 - Integer to IPv4 - IPv4 to Integer - Integer to IPv6 - IPv6 to Integer - IPv6 Long to Short - IPv6 Short to Long IPv4 Invalid Check 정규 표현식을 이용하여 패턴을 확인한 후, 각 숫자가 255 이하인지 체크하는 코드도 추가하였다. const isValidIPv.. 2023. 12. 9.
React Material - Mui Pagination으로 댓글 페이지로 나누기 리액트 전체 링크 참고 - https://mui.com/material-ui/react-pagination/ - 댓글 기능 만들기 with react-comments-section - 로그인한 사용자만 댓글 기능 사용하기 - GitHub RESTful API로 댓글 저장하기 - 리액트 쿠키로 GitHub OAuth 로그인 인증 관리하기 - Mui Pagination으로 댓글 페이지로 나누기 아래 그림은 24개의 Comments (댓글 13 + reply 11)이다. ... 댓글이 많아질수록 화면이 커져서 스크롤을 해야 하기 때문에 Material UI의 Pagination을 적용해 페이지를 나눠보자. Mui Pagination 링크를 참고하여 Pagination을 임시로 추가해보자. import Pagi.. 2023. 11. 19.
리액트 - 쿠키로 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.
반응형

티스토리툴바