본문 바로가기
반응형

개발/React176

리액트 - Handsontable Selected Options 리액트 전체 링크 참고 - Project Settings (전체 코드) - True / False Options - Selected Options - Number Options - width, height, placeholder, sort - 주석, comment, memo, tooltip - Merge Cells, 셀 합치기 - Search 구현 - Columns Data Type - Cell 커스터마이징 - afterSelection으로 수식 입력줄 구현하기 - Download CSV 구현 (콤마, 줄바꿈, 따옴표 처리) - Mui Drawer로 Handsontable Option 관리하기 - Column Width, Row Height 로컬 스토리지에 저장하기 - Mui 토글 버튼으로 셀 스타일 편.. 2023. 9. 29.
리액트 - Handsontable True / False Options 리액트 전체 링크 참고 - Project Settings (전체 코드) - True / False Options - Selected Options - Number Options - width, height, placeholder, sort - 주석, comment, memo, tooltip - Merge Cells, 셀 합치기 - Search 구현 - Columns Data Type - Cell 커스터마이징 - afterSelection으로 수식 입력줄 구현하기 - Download CSV 구현 (콤마, 줄바꿈, 따옴표 처리) - Mui Drawer로 Handsontable Option 관리하기 - Column Width, Row Height 로컬 스토리지에 저장하기 - Mui 토글 버튼으로 셀 스타일 편.. 2023. 9. 29.
리액트 - Hansontable Customizing with GitHub 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크 해당 프로젝트는 링크에서 확인할 수 있다. 이전 프로젝트 참고- Hansontable로 csv 편집기 만들기 - Project Settings (전체 코드)- True / False Options- Selected Options- Number Options- width, height, placeholder, sort- 주석, comment, memo, tooltip- Merge Cells, 셀 합치기- Search 구현- Columns Data Type- Cell 커스터마이징- afterSelection으로 수식 입력줄 구현하기- Download CSV 구현 (콤마, 줄바꿈, 따옴표 처리)- Mui Drawer로 H.. 2023. 9. 29.
리액트 - Mui Toggle Button으로 편집기 버튼 만들기 with React Color Picker 리액트 전체 링크 참고 - https://mui.com/material-ui/react-toggle-button/ - https://casesandberg.github.io/react-color/ - Mui 토글 버튼으로 셀 스타일 편집 기능 만들기 편집기에서 사용하는 버튼을 Mui Toggle Button으로 만들어보자. 링크의 예제를 참고하면 아래와 같이 만들 수 있다. import React, { useState } from "react"; import { styled } from "@mui/material/styles"; import Box from "@mui/material/Box"; import FormatAlignLeftIcon from "@mui/icons-material/FormatAli.. 2023. 9. 27.
리액트 - 파일 편집 후 메일 알림이 가도록 수정하기 with GitHub RESTful API 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크Git / GitHub 전체 링크 참고- Toast UI 에디터로 깃허브 마크다운 저장하기- RESTful API로 브랜치 SHA 구하기- RESTful API로 브랜치 만들고 삭제하기- RESTful API로 PR 만들고 병합하기- 메일 알림 설정하기 아래의 토스트 UI 에디터는 메인에서 직접 commit하기 때문에 code owners에게 메일 알림이 가지 않는다.import React, { useEffect, useRef, useState } from "react";import Box from "@mui/material/Box";import Button from "@mui/material/Button";// Gi.. 2023. 9. 2.
리액트 - 로컬 스토리지 유효기간 설정하기 (Setting Local Storage Expiration Time) 리액트 전체 링크 참고 - 로컬 스토리지 사용 방법과 세션 스토리지 비교 - 두 날짜 사이의 시간 차이 구하기 로컬 스토리지의 유효 기간을 설정해 보자. 아래는 10초 뒤에 로컬 스토리지에서 값이 제거되는 예제다. 로컬 스토리지 만료 기간 설정하기 로컬 스토리지는 만료 기간이 따로 존재하지 않는다. 따라서 값을 저장할 때, 유효기간을 함께 설정한다. const setLocalStorageTimer = (key, value, time) => { let now = new Date(); let item = { value: value, expireTime: now.getTime() + time, }; localStorage.setItem(key, JSON.stringify(item)); }; Date 객체에서 .. 2023. 8. 21.
리액트 - 새 창으로 로그인해서 현재 상태 유지하기 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크 참고- 깃허브 OAuth Access 토큰 발급 받기- Toast UI 에디터로 깃허브 마크다운 저장하기 - GitHub OAuth Project Settings- Material UI로 깃허브 로그인 프로필 만들기- 깃허브 OAuth 콜백 처리하기- 인증 토큰 획득 서버 구현하기- 인증 토큰으로 로그인 상태 관리하기- 로그인 정보를 활용하여 Commit Message 남기기- 새 창으로 로그인해서 현재 상태 유지하기 로그인이 되지 않은 상태에서 편집을 하다가,로그인 버튼을 누르면  callback으로 인해 편집된 내용이 사라지게 된다. 현재 상태를 유지한 채로 로그인을 하려면 window.open을 이용해 새 창을.. 2023. 8. 19.
리액트 - GitHub OAuth 로그인 정보를 활용하여 Commit Message 남기기 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크 참고- 깃허브 OAuth Access 토큰 발급 받기- Toast UI 에디터로 깃허브 마크다운 저장하기 - GitHub OAuth Project Settings- Material UI로 깃허브 로그인 프로필 만들기- 깃허브 OAuth 콜백 처리하기- 인증 토큰 획득 서버 구현하기- 인증 토큰으로 로그인 상태 관리하기- 로그인 정보를 활용하여 Commit Message 남기기- 새 창으로 로그인해서 현재 상태 유지하기 이제 인증 정보를 이용하여 README.md를 수정한 유저를 커밋 메시지에 추가해보자.SimpleToastEditor 수정 SimpleToastEditor에서 GitHub RESTful POST API.. 2023. 8. 19.
리액트 - GitHub OAuth 인증 토큰으로 로그인 상태 관리하기 (GitHub OAuth Login Status) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크 참고- 깃허브 OAuth Access 토큰 발급 받기- Toast UI 에디터로 깃허브 마크다운 저장하기 - GitHub OAuth Project Settings- Material UI로 깃허브 로그인 프로필 만들기- 깃허브 OAuth 콜백 처리하기- 인증 토큰 획득 서버 구현하기- 인증 토큰으로 로그인 상태 관리하기- 로그인 정보를 활용하여 Commit Message 남기기- 새 창으로 로그인해서 현재 상태 유지하기 이제 로그인이 되면 버튼을 로그아웃으로 변경하고 프로필 사진도 변경해보자로그인 체크 함수 이전 글에서 로그인 이후 얻은 정보를 로컬 스토리지에 저장하였다.localStorage.setItem("GITH.. 2023. 8. 19.
반응형

티스토리툴바