Project

파이 메뉴 만들기 (Unity)

로그인 폼 만들기 (React)

Hansontable로 csv 편집기 만들기 (React)

파일 관리 시스템 만들기 (Node JS + React)

---

파이 메뉴 만들기 (Pie / Radial Menu)

 

(1) 중심 게이지 만들기

(2) 버튼 만들기

(3) Tooltip 만들기

(4) Text 자동 크기 조절

(5) 버튼 배치하기

(6) 버튼에 이벤트 연결하기

---

로그인 폼 만들기

 

전체 코드

 

- 아이디 한글 입력 불가 처리

- 아이디 저장

- 비밀번호 표시

- Caps Lock 감지

- useReducer로 Input 관리

---

React Toast UI Editor with OAuth to Access GitHub

 

Toast UI + GitHub OAuth
 
(1) Toast UI로 에디터 만들기 (React Editor with Toast Editor 3.0)
(2) Toast UI 에디터 글자색 변경 플러그인 추가하기 (Add Color Syntax Plugin Toast UI Editor)
(3) Toast UI 에디터 테이블 병합 플러그인 추가하기 (Add Table Merged Cell Plugin Toast UI Editor)
(4) Toast UI 에디터 저장하고 초기화하기 (Save and Initialize Toast UI Editor)
(5) Toast UI 에디터로 깃허브 마크다운 저장하기 (Toast UI Editor with GitHub RESTful API)

(6) 깃허브 - OAuth Access 토큰 발급 받기 (How to get GitHub OAuth Token)

(7) GitHub OAuth Project Settings

(8) Material UI로 깃허브 로그인 프로필 만들기

(9) 깃허브 OAuth 콜백 처리하기 (GitHub OAuth Callback)

(10) Node JS - 인증 토큰 획득 서버 구현하기 (GitHub Access Token Server with Node JS)

(11) GitHub OAuth 인증 토큰으로 로그인 상태 관리하기 (GitHub OAuth Login Status)

(12) GitHub OAuth 로그인 정보를 활용하여 Commit Message 남기기

(13) 새 창으로 로그인해서 현재 상태 유지하기

---

React - Hansontable로 csv 편집기 만들기

 

(1) Project Setting

(2) Drag & Drop

(3) 선택한 경로의 파일 불러오기

(4) Drop한 파일 읽기

(5) 선택한 경로의 파일 읽기

(6) csv 파일 파싱하기

(7) App.js에서 파싱된 csv 파일 받기

(8) handsontable 설치하기

(9) useEffect를 이용하여 handsontable 연동하기

(10) handsontable basic options

(11) handsontable setting options

(12) table의 dummy 행과 열을 추가하기

(13) Download CSV

(14) handsontable methods

(15) callback function으로 선택한 Cell 보여주기 / 수정하기

(16) colWidths 옵션 / csv 파일 파싱 보완

(17) redux로 File Upload 상태 관리하기

(18) File Upload에 대한 이벤트 보완

(19) 불러오기 버튼 추가하기

---

Hansontable Customizing with GitHub

 

(1) Project Settings (전체 코드)
(2) True / False Options
(3) Selected Options
(4) Number Options
(5) width, height, placeholder, sort
(6) 주석, comment, memo, tooltip
(7) Merge Cells, 셀 합치기
(8) Search 구현
(9) Columns Data Type
(10) Cell 커스터마이징
(11) afterSelection으로 수식 입력줄 구현하기
(12) Download CSV 구현 (콤마, 줄바꿈, 따옴표 처리)
(13) Mui Drawer로 Handsontable Option 관리하기

(14) Column Width, Row Height 로컬 스토리지에 저장하기

(15) Mui 토글 버튼으로 셀 스타일 편집 기능 만들기

(16) 셀 스타일 로컬 스토리지에 저장하기 (전체 코드)

(17) Handsontable 깃허브 연동하기 (data, style, comment, merge 저장하기)

---

Node js, React 파일 관리 시스템 만들기

 

(1) Project Setting

(2) fetch로 GET 요청하고 응답 받기
(3) 파일과 폴더 목록 불러오기
(4) 원하는 확장자의 파일만 불러오기
(5) 최상위 폴더 목록으로 option 만들기
(6) option을 toggle button으로 변경하기
(7) Local Storage로 현재 version 기억하기
(8) 각 version별 country 폴더 불러오기
(9) csv 파일 목록 불러오기
(10) csv 파일 handsontable로 연동하기
(11) AutoSizeInput에 파일 이름 연동하기
(12) axios post로 파일 저장하기
(13) shelljs를 이용하여 server의 파일 삭제하기
(14) multer를 이용하여 여러 개의 파일 업로드하기

 

Hansontable로 csv 편집기 만들기 + 파일 관리 시스템 만들기 code

handsontable-csv.zip

0.02MB

 

 

깃허브에서 코드 확인하기

---