본문 바로가기
반응형

개발/React176

리액트 - 쿠키로 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.
리액트 - 로그인한 사용자만 댓글 기능 사용하기 with react-comments-section (GitHub OAuth Login) 리액트 전체 링크 Git / GitHub 전체 링크 참고 - https://www.npmjs.com/package/react-comments-section - https://riyanegi.github.io/react-comments-documentation/ - Toast UI Editor with OAuth to Access GitHub - 깃허브 OAuth 콜백 처리하기 - GitHub OAuth 인증 토큰으로 로그인 상태 관리하기 - 댓글 기능 만들기 with react-comments-section - 로그인한 사용자만 댓글 기능 사용하기 - GitHub RESTful API로 댓글 저장하기 - 리액트 쿠키로 GitHub OAuth 로그인 인증 관리하기 - Mui Pagination으로 댓글 페.. 2023. 11. 15.
리액트 - 댓글 기능 만들기 with react-comments-section (React Comments and Reply) 리액트 전체 링크 참고 - https://www.npmjs.com/package/react-comments-section - https://riyanegi.github.io/react-comments-documentation/ - 댓글 기능 만들기 with react-comments-section - 로그인한 사용자만 댓글 기능 사용하기 - GitHub RESTful API로 댓글 저장하기 - 리액트 쿠키로 GitHub OAuth 로그인 인증 관리하기 - Mui Pagination으로 댓글 페이지로 나누기 react-comments-section으로 댓글 기능을 구현해보자. 위의 동작을 위한 코드는 다음과 같다. 링크의 예제는 타입 스크립트를 사용하지만, 여기서는 타입 스크립트를 제거하였다. import.. 2023. 11. 15.
리액트 - Handsontable 깃허브 연동하기 (data, style, comment, merge 저장하기) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크 Git / GitHub 전체 링크  참고- .env 환경 변수 파일 관리하기- Toast UI 에디터로 깃허브 마크다운 저장하기 - 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 구현 (콤마, 줄바꿈, 따옴표 처리)- Mu.. 2023. 9. 30.
리액트 - Handsontable 셀 스타일 로컬 스토리지에 저장하기 (전체 코드) 리액트 전체 링크 참고 - 로컬 스토리지 사용 방법과 세션 스토리지 비교 - 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 로컬 스토리지.. 2023. 9. 30.
리액트 - Mui 토글 버튼으로 Handsontable 셀 스타일 편집 기능 만들기 리액트 전체 링크 참고 - Mui Toggle Button으로 편집기 버튼 만들기 with React Color Picker - 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 관리하기 - Col.. 2023. 9. 30.
리액트 - Handsontable Column Width, Row Height 로컬 스토리지에 저장하기 리액트 전체 링크 참고 - 로컬 스토리지 사용 방법과 세션 스토리지 비교 - 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 로컬 스토리지.. 2023. 9. 30.
리액트 - Mui Drawer로 Handsontable Option 관리하기 리액트 전체 링크 참고 - https://mui.com/material-ui/react-drawer/ - 오브젝트 순회하기 (Iterate JavaScript Object) - 로컬 스토리지 사용 방법과 세션 스토리지 비교 - 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 구현 (콤마, 줄바.. 2023. 9. 30.
반응형