본문 바로가기
반응형

개발/React176

리액트, Node JS - 인증 토큰 획득 서버 구현하기 (GitHub Access Token Server with Node JS) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크Node JS 전체 링크 참고- 깃허브 OAuth Access 토큰 발급 받기- Toast UI 에디터로 깃허브 마크다운 저장하기- 리덕스로 로그인 상태 관리하기 - GitHub OAuth Project Settings- Material UI로 깃허브 로그인 프로필 만들기- 깃허브 OAuth 콜백 처리하기- 인증 토큰 획득 서버 구현하기 - 인증 토큰으로 로그인 상태 관리하기- 로그인 정보를 활용하여 Commit Message 남기기- 새 창으로 로그인해서 현재 상태 유지하기 리액트에서 client secret은 더 이상 필요 없으므로, (보안상 들고 있어서도 안된다.) .env에서 삭제한다. .envREACT_APP.. 2023. 8. 19.
리액트 - 깃허브 OAuth 콜백 처리하기 (GitHub OAuth Callback) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크 참고- 깃허브 OAuth Access 토큰 발급 받기- Toast UI 에디터로 깃허브 마크다운 저장하기- URL query string 받아오기- 리덕스로 로그인 상태 관리하기 - GitHub OAuth Project Settings- Material UI로 깃허브 로그인 프로필 만들기- 깃허브 OAuth 콜백 처리하기- 인증 토큰 획득 서버 구현하기- 인증 토큰으로 로그인 상태 관리하기- 로그인 정보를 활용하여 Commit Message 남기기- 새 창으로 로그인해서 현재 상태 유지하기 깃허브 OAuth 토큰을 발급 받고 .env까지 설정해두자.(실제 환경에서 토큰은 서버를 통해 얻어야 한다.) 인증을 요청하게 .. 2023. 8. 19.
리액트 - Material UI로 깃허브 로그인 프로필 만들기 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크 참고- 깃허브 OAuth Access 토큰 발급 받기- Toast UI 에디터로 깃허브 마크다운 저장하기- https://mui.com/material-ui/react-avatar/ - GitHub OAuth Project Settings- Material UI로 깃허브 로그인 프로필 만들기- 깃허브 OAuth 콜백 처리하기- 인증 토큰 획득 서버 구현하기- 인증 토큰으로 로그인 상태 관리하기- 로그인 정보를 활용하여 Commit Message 남기기- 새 창으로 로그인해서 현재 상태 유지하기 Material UI의 Avatar를 이용하면 간단히 로그인 프로필을 만들 수 있다../page/GitHubLoginButt.. 2023. 8. 19.
리액트 - Toast UI Editor with OAuth to Access GitHub 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 프로젝트 전체 링크리액트 전체 링크 Git / GitHub 전체 링크  참고- 깃허브 OAuth Access 토큰 발급 받기- Toast UI 에디터로 깃허브 마크다운 저장하기 - GitHub OAuth Project Settings - Material UI로 깃허브 로그인 프로필 만들기 - 깃허브 OAuth 콜백 처리하기 - 인증 토큰 획득 서버 구현하기 - 인증 토큰으로 로그인 상태 관리하기 - 로그인 정보를 활용하여 Commit Message 남기기 - 새 창으로 로그인해서 현재 상태 유지하기 Toast UI 에디터에서 깃허브 마크다운을 저장할 때, RESTful API를 사용하기 위해 key와 owner를 고정시켰다.따라서 해.. 2023. 8. 19.
리액트 - .env 환경 변수 파일 관리하기 리액트 전체 링크 참고 - RESTful API로 파일 읽기 리액트를 개발할 때, 특정 정보는 github에 업로드 해서는 안되는 경우가 있다. (RESTful API를 위해 발급 받은 token 등) 아래의 token을 React에서 사용하다가 github에 업로드하면 보안에 좋지 않다. const token = "gh....................2mW61k" .env 파일로 환경 변수를 관리하면 위의 상황을 해결할 수 있다. 그러나, github에 업로드만 되지 않을 뿐, 배포를 하게 될 경우는 토큰이 노출된다. 따라서 실제 환경에서는 서버를 이용해 토큰을 얻어야 한다. .env 파일 생성 먼저 React App의 루트에 .env 파일을 생성한다. 그리고 commit / push가 되지 않도록.. 2023. 8. 15.
리액트 - Toast UI 에디터로 깃허브 마크다운 저장하기 (Toast UI Editor with GitHub RESTful API) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크Git / GitHub 전체 링크 참고- RESTful API로 파일 읽기- RESTful API로 파일 쓰기- 깃허브 RESTful API로 파일 편집기 만들기- 파일 편집 후 메일 알림이 가도록 수정하기 - Toast UI로 에디터 만들기- 글자색 변경 플러그인 추가하기- 테이블 병합 플러그인 추가하기- 에디터 저장하고 초기화하기- Toast UI 에디터로 깃허브 마크다운 저장하기- Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기- Socket.IO로 Toast UI Editor 동시 편집하기 토스트 에디터 예제 링크 토스트 UI 에디터로 로컬이 아닌 깃허브에 직접 파일을 저장하고 편집해 보자.h.. 2023. 7. 30.
리액트 - Toast UI 에디터 저장하고 초기화하기 (Save and Initialize Toast UI Editor) 리액트 전체 링크 참고 - 로컬 스토리지 사용 방법과 세션 스토리지 비교 - https://nhn.github.io/tui.editor/latest/tutorial-example16-i18n - Toast UI로 에디터 만들기 - 글자색 변경 플러그인 추가하기 - 테이블 병합 플러그인 추가하기 - 에디터 저장하고 초기화하기 - Toast UI 에디터로 깃허브 마크다운 저장하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 - Socket.IO로 Toast UI Editor 동시 편집하기 토스트 UI 에디터에서 저장하기 버튼을 누르면 편집한 내용이 저장되도록 해보자. initialValue 옵션 initalValue에 값을 넣어주면 해당 내용으로 에디터가 시작된다. let initC.. 2023. 7. 30.
리액트 - Toast UI 에디터 테이블 병합 플러그인 추가하기 (Add Table Merged Cell Plugin Toast UI Editor) 리액트 전체 링크 참고 - https://nhn.github.io/tui.editor/latest/tutorial-example10-editor-with-table-merged-cell-plugin - https://www.npmjs.com/package/react-scripts?activeTab=versions - Toast UI로 에디터 만들기 - 글자색 변경 플러그인 추가하기 - 테이블 병합 플러그인 추가하기 - 에디터 저장하고 초기화하기 - Toast UI 에디터로 깃허브 마크다운 저장하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 - Socket.IO로 Toast UI Editor 동시 편집하기 토스트 UI 에디터에 테이블을 Merge하는 기능을 추가해보자. 설치 ta.. 2023. 7. 30.
리액트 - Toast UI 에디터 글자색 변경 플러그인 추가하기 (Add Color Syntax Plugin Toast UI Editor) 리액트 전체 링크 참고 - https://nhn.github.io/tui.editor/latest/tutorial-example09-editor-with-color-syntax-plugin - Toast UI로 에디터 만들기 - 글자색 변경 플러그인 추가하기 - 테이블 병합 플러그인 추가하기 - 에디터 저장하고 초기화하기 - Toast UI 에디터로 깃허브 마크다운 저장하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 - Socket.IO로 Toast UI Editor 동시 편집하기 토스트 UI 에디터에 글자색을 변경하는 기능을 추가해보자. 설치 color-syntax 플러그인을 설치한다. npm install @toast-ui/editor-plugin-color-syntax 플.. 2023. 7. 30.
반응형

티스토리툴바