- JavaScript
- React
- Hooks
- 최적화
- Handsontable로 csv 편집기 만들기
- Handsontable Customizing with GitHub
- React Material UI
- Toast UI + 이미지 업로드
- GitHub OAuth
- react-comments-section
- React File Browser (Chonky 파일 브라우저)
- React Chat UI (chat-ui-kit-react)
- Socket.IO (Client)
- CSS
- 환경 설정
- 라이브러리
JavaScript
JavaScript test setting
파일 다운로드 (File Download)
깊은 복사 (Deep Copy)
파일 선택(input)과 버튼 연결하기
input 에서 자동 완성 끄기, 캐시 삭제하기
html input 태그에서 비밀번호 표시 여부 설정하기
텍스트를 클립보드에 복사하기 (Copy to Clipboard in Javascript)
펼침 연산자로 문자열을 배열로 바꿔 수정하기 (Change String using Spread Operator)
공백 제거하기 (Delete Whitespace)
HTML 태그를 제거하고 텍스트만 추출하기 (Remove HTML Tags and Extract Text)
길이가 같은 두 배열을 합치기 (Zip Array using Currying)
전치 행렬 구하기 (Transpose 2D Array)
this
Symbol
Promise resolve, reject
Promise all, race
async await
시간 지연 함수 setTimeout, sleep
객체 속성 기술자 (Object Property Descriptor)
태그드 템플릿 리터럴 (Tagged Template Literals)
자기 자신을 정의하는 함수 (Lazy Function Definition)
매개변수 기본값 (Default Function Parameter)
단축 속성명 (Shorthand Property Names)
배열 정렬하기 (Sorting)
배열에 포함된 원소 판단하기
오브젝트 순회하기 (Iterate JavaScript Object)
로컬 스토리지 사용 방법과 세션 스토리지 비교 (Local vs Session Storage)
디폴트 매개변수 (Default Parameters)
두 날짜 사이의 시간 차이 구하기
React
리액트 프로젝트 추가하기 (new repository)
gh-pages로 리액트 프로젝트 배포하기
gh-pages로 배포된 프로젝트에 리액트 라우터 적용하기
Hash Router로 gh-pages 배포하기
Github Desktop에서 리액트 프로젝트 받아오기
유니티 WebGL을 React에 배포하기
유니티 WebGL + React 라우터 적용하기
리액트에서 Unity 오브젝트 컨트롤하기 (Communication from React to Unity)
Unity에서 리액트로 이벤트 호출하기 (Communication from Unity to React)
WebGL로 빌드된 유니티 전체 화면으로 변경하기 (Entering Fullscreen Unity WebGL in React)
Netlify로 리액트 프로젝트 배포하기
Netlify로 배포된 프로젝트에 리액트 라우터 적용하기
Netlify 배포 에러 해결하기 (Netlify Build and Deploy Error)
로그인 폼 만들기 Login Form
깃허브 RESTful API로 파일 편집기 만들기 (Simple GitHub Code Management with React)
깃허브 RESTful API 한글 깨짐 현상 해결하기
마크다운을 HTML로 변환하기 (Convert Markdown to HTML in React)
깃허브 마크다운 스타일 적용하기 (Github Markdown Style)
카테고리 필터 Category Filter
FAQ 카테고리 만들기
useRef를 이용하여 타이머 만들기
줄 번호가 있는 Text Area 예제 (Add Line Numbers to HTML)
같은 Link를 클릭해도 새로고침 되도록 하기 (리액트 라우터 useLocation)
Indexed DB로 로컬에 데이터 저장하기 (How to use Indexed DB in React)
Indexed DB로 깃허브 RESTful API PUT 최신 정보 유지하기
useLocation으로 페이지 이동시 스크롤 상단으로 초기화하기 (Scroll to Top on Page Transition)
리덕스로 로그인 상태 관리하기 (Managing Login State with Redux)
Context API로 상태 관리하기 (Managing State with Context API)
recoil로 상태 관리하기 (Managing State with recoil)
SWR로 상태 관리하기 (Managing State with SWR)
URL query string 받아오기
배열을 json으로 분리하기 (react json import)
리액트 html 코드 삽입하기 (dangerouslySetInnerHTML)
같은 이름의 파일 재업로드 (같은 파일 다시 열기)
ㄱ 한자 1 특수 문자로 공백 추가하여 띄어쓰기
POST 방식으로 서버에 폼 데이터 전송하기 (Send Form Data to Server with POST)
요청한 원래 URL로 리다이렉션하기 (Redirect Back to Original URL)
키보드 이벤트를 감지하여 복사 방지하기 (Detect Copy Keyboard Event)
파일 다운로드 경과 확인하기 (Check File Download Process)
로컬 스토리지 유효기간 설정하기 (Setting Local Storage Expiration Time)
Node 서버 작업 진행 상황 확인하기 (Checking Progress of Node Server Task)
Toast UI Editor로 메일 보내기 with nodemailer
이미지 캡처해서 웹에 붙여넣기 (Capture and Paste Image)
react-diff-viewer-continued로 텍스트 비교하기 (Compare Text with Diff Viewer)
crypto-js로 문자열 암호화/복호화하기 (Encrypting/Decrypting String)
Hooks
useEffect로 useState 콜백 함수 만들기 (How to Make Callback after useState Hook in React)
useRef로 특정 위치로 포커스 이동하기 (Use Ref Hook Focus)
useRef로 useState 이전 값 저장하기 (usePrevious)
모든 페이지의 로컬 스토리지 변경 감지하기 (useLocalStorage)
마우스가 일정 시간 움직이지 않는 경우 새로고침하기 (useEffect with Mouse Move Event)
페이지 가시성 확인하기 (useEffect with Visibility Change Event)
최적화
React.memo, useMemo, useCallback으로 최적화하기
debounce vs throttle로 최적화하기 with useMemo (lodash-es)
Handsontable로 csv 편집기 만들기
(9) useEffect를 이용하여 handsontable 연동하기
(10) handsontable basic options
(11) handsontable setting options
(15) callback function으로 선택한 Cell 보여주기 / 수정하기
(16) colWidths 옵션 / csv 파일 파싱 보완
(17) redux로 File Upload 상태 관리하기
Handsontable 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 저장하기)
Handsontable Context Menu 커스터마이징 (Fix Issue for Disappearing Comments)
React Material UI
버튼 색깔, 아웃라인 변경하기 (Change Mui Button Color on Hover)
아이콘으로 버튼 만들기 (Make Button with Icons)
Mui Table 옵션 설정하기 (Customizing Material React Table)
Mui Table 세로 줄 변경하기 (Enable Column Ordering)
withStyles로 TreeView css 커스터마이징 하기 (Customize TreeView css Style using withStyles)
Auto Complete로 목록 관리하기 (Show Autocomplete Drop-Down List)
Mui Toggle Button으로 편집기 버튼 만들기 with React Color Picker
비동기 함수 로딩 중 보여주기 (Mui Loading CircularProgress with Async Function)
파일 다운로드 경과 로딩 과정 보여주기 (Mui Loading Circular Progress with File Download)
Stepper로 워크 플로우 관리하기 (Managing Workflows with Mui Stepper)
런타임에 Tab 추가, 삭제하기 (Mui Dynamic Tabs)
Alert로 플로팅 메시지 만들기 (Floating / Toast Message with Mui Alert)
Mui Tree View로 파일, 폴더 뷰 만들기 (Mui Directory Tree View)
Node JS로 경로를 가져와서 Mui Tree View로 파일, 폴더 뷰 만들기 (Mui Directory Tree View with Node JS)
Mui 파일, 폴더 뷰 확장 / 선택하기 (Controlled Mui Tree View)
Mui로 파일 브라우저 만들기 (React File Browser with Mui)
경로를 가져와서 파일 브라우저 만들기 (React File Browser with Mui + Node JS)
파일 브라우저에서 파일 다운로드하기 (React File Download with Node JS)
파일 브라우저 정렬하기 (Sorting File Browser Items)
파일 브라우저에서 폴더 이벤트 추가하기 (Folder Click Event in File Browser)
파일 브라우저에 검색 기능 추가하기 (Add Search Files with Autocomplete at File Browser)
파일 검색 후 Tree View 포커싱 (Focus Tree View with useRef)
Mui Tree View 더블 클릭으로 펼치기 (Expanded Tree View with Double Click)
Toast UI
Toast UI로 에디터 만들기 (React Editor with Toast Editor 3.0)
Toast UI 에디터 글자색 변경 플러그인 추가하기 (Add Color Syntax Plugin Toast UI Editor)
Toast UI 에디터 테이블 병합 플러그인 추가하기 (Add Table Merged Cell Plugin Toast UI Editor)
Toast UI 에디터 저장하고 초기화하기 (Save and Initialize Toast UI Editor)
Toast UI 에디터로 깃허브 마크다운 저장하기 (Toast UI Editor with GitHub RESTful API)
파일 편집 후 메일 알림이 가도록 수정하기 with GitHub RESTful API
Socket.IO로 Toast UI Editor 동시 편집하기
이미지 업로드
깃허브 리포지토리 이미지 불러오기 (Load GitHub Repository Images with Image List)
깃허브 API로 이미지 업로드하기 (Upload Images with GitHub RESTful API)
깃허브에 업로드된 이미지 삭제하기 (Delete an Uploaded Image on GitHub)
캡처한 이미지를 깃허브에 업로드하기 (Upload Captured Image to GitHub)
캡처한 이미지 여러 개 업로드하기 (Upload Captured Images to GitHub)
Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 (Toast UI Markdown Editor)
GitHub OAuth
깃허브 - OAuth Access 토큰 발급 받기 (How to get GitHub OAuth Token)
깃허브 OAuth 콜백 처리하기 (GitHub OAuth Callback)
Node JS - 인증 토큰 획득 서버 구현하기 (GitHub Access Token Server with Node JS)
GitHub OAuth 인증 토큰으로 로그인 상태 관리하기 (GitHub OAuth Login Status)
GitHub OAuth 로그인 정보를 활용하여 Commit Message 남기기
react-comments-section
댓글 기능 만들기 with react-comments-section (React Comments and Reply)
로그인한 사용자만 댓글 기능 사용하기 with react-comments-section (GitHub OAuth Login)
GitHub RESTful API로 댓글 저장하기 with react-comments-section
쿠키로 GitHub OAuth 로그인 인증 관리하기 with react-cookie
React File Browser (Chonky 파일 브라우저)
파일 브라우저 만들기 (React File Browser with chonky)
chonky 기본 설정 확인하기 (Default ConfigOptions)
액션 추가하고 다크 모드 구현하기 (Add ChonkyActions for Dark Mode)
커스텀 액션 추가하기 (Add Custom Actions)
Chonky 파일 맵 만들기 (Make Chonky File Map)
리포지토리의 폴더 정보 저장하기 (Chonky File Map)
깃허브 리포지토리를 파일 브라우저로 불러오기 (Chonky Browser with GitHub Repository)
useNavigate로 Toast UI Editor 이동하기 (Toast UI Editor with Chonky Browser)
React Chat UI (chat-ui-kit-react)
chat-ui-kit-react로 채팅창 UI 만들기 (React Chat UI)
로그인 + 채팅방 UI 만들기 (React Chat Room UI)
채팅방 들어오고 나갈 때 표시하기 (Message Separator)
Socket.IO (Client)
webSocket으로 로그인 유저 관리하기 (Managing Logged-in Users with WebSocket)
Socket.IO로 로그인 유저 관리하기 (Managing Logged-in Users with Socket.IO)
Socket.IO로 Toast UI Editor 동시 편집하기
with React Chat UI (chat-ui-kit-react)
Socket.IO로 채팅하기 (Chatting with Socket.IO)
Socket.IO Room으로 채팅방 관리하기 (Managing Chat Room)
Socket.IO namespace로 채팅방 관리하기 (Managing Chat Room using namespace)
Socket.IO로 중복 로그인 제한하기 (Limiting Connections with the Same ID)
Socket.IO Middleware로 중복 로그인 방지하기 (Limiting Connections using Socket.IO Middleware)
with Handsontable
스프레드시트 공동 작업하기 Project Settings (Real-Time Collaboration with Handsontable Spreadsheet)
Handsontable에 Socket.IO 적용하기 (Handsontable with Socket.IO)
변경된 셀만 데이터 전송해서 최적화하기 (Data Optimization with Socket.IO)
행 / 열 이동 및 크기 변경 연동하기 (Sync Row / Column Movement and Size Adjustment)
다른 클라이언트가 선택한 셀 표시하기 (Highlighting Cells Selected by Another Client)
CSS
배경 이미지 꽉 채우기
Input 태그 감추기 (How to Hide Input Tag)
간단한 accordion 만들기
pre 태그로 입력한 그대로 보여주기
styled-components로 타이핑 효과 만들기 (Make Simple Typing Effect with styled-components)
환경 설정
리액트 라우터 react router (최신 node ver)
window pm2 react 구동시 syntax error 해결방법
jsconfig.json로 component import 자동완성
리액트 package.json에서 port 변경
React - Node 서버 프록시 설정
.env 환경 변수 파일 관리하기
라이브러리
Ant Design - https://ant.design/
React Material UI - https://mui.com/material-ui/getting-started/
스프레드 시트(handsontable) - https://handsontable.com/docs/6.2.2/tutorial-features.html
Toast UI Editor - https://nhn.github.io/tui.editor/latest/
CK Editor 5 - https://ckeditor.com/ckeditor-5/demo/
댓글 기능 - https://riyanegi.github.io/react-comments-documentation/
텍스트 diff viewer - https://aeolun.github.io/react-diff-viewer-continued/
팝업 - https://sweetalert2.github.io/
날짜 관리 - https://www.npmjs.com/package/dayjs
아이콘 - https://react-icons.github.io/react-icons/
채팅 UI - https://github.com/chatscope/chat-ui-kit-react
문자열 암호화 - https://www.npmjs.com/package/crypto-js
파일 브라우저 - https://chonky.io/
실시간 통신 - https://www.npmjs.com/package/socket.io-client
최적화 - lodash-es (debounce, throttle)
css - styled-components / classnames
댓글