웹소켓을 사용하면 서버와 브라우저 간 연결을 유지한 상태로 데이터 교환 가능 데이터는 패킷(packet) 형태로 전달전송은 양방향으로 이루어짐(커넥션 중단과 추가 HTTP 요청 없음) 데이터 교환이 지속적으로 이뤄져야 하는 서비스에 적합ex. 온라인 게임이나 주식 트레이딩 시스템 특수 프로토콜 ws, wss웹소켓 커넥션 생성(즉시 연결)let socket = new WebSocket("ws://tempServer.co.kr");let socket = new WebSocket("wss://tempServer.co.kr");ws와 wss는 http와 https 관계와 유사보안과 신뢰성 측면에서 wss가 좀 더 신뢰할만함 ws암호화되지 않은 채 전송되어 데이터가 그대로 노출됨오래된 프락시 서버는 웹소켓을 인지..
이전 프로젝트 리팩터링 중 프로젝트 실행, 리로딩, 빌드가 느려 vite로 변경했는데 그 과정 기록입니다. 실수 시 롤백을 위해 새 브랜치에서 작업합니다. git switch -c vite 작업 순서 vite, @vitejs/plugin-react 플러그인 설치 vite.config.js 파일 생성 js 파일을 jsx 파일로 변경 index.html 위치 루트 폴더로 옮기고 script 태그 추가하기 %PUBLC_URL%로 참조하는 파일들을 /로 바꿔주기 환경 변수 변경 package.json scripts 추가 (선택) react-scripts 삭제 1. vite, @vitejs/plugin-react 플러그인 설치 npm install -D vite @vitejs/plugin-react 2. vite..
Context API 작은 규모의 프로젝트에서 사용하면 좋은 React Hook Context 사용 방법 1. Context 만들기 createContext(기본값) - Provider가 없는 경우 사용할 default 값(initial X) // LevelContext.js import { createContext } from 'react'; export const LevelContext = createContext(1); 2. Context 제공하기 만들어놓은 Context.provider로 Context를 전달하고 싶은 자식 요소 감싸기 → 트리에 동일한 Context가 여럿 있을 때 자식 요소는 UI 트리에서 가장 가까운 Context 값을 사용 import { LevelContext } from..
rc-rate React Rate Component 리액트 별점 컴포넌트 라이브러리 원하는 모양으로 별점 컴포넌트를 만들 수 있다 1. 설치 npm i rc-rate 2. import import Rate from 'rc-rate'; import 'rc-rate/assets/index.css'; 3. 코드 console.log(v)} /> value: 값 지정. 상태를 줘서 사용 allowHalf: 별 반 점 허용 character: 원하는 모양(string, ReactNode)을 내려 주면 됨(color를 입힐 수 있어야 함. 문자, svg) onChange: 별점을 받아 실행할 함수를 할당 ... 4. 크기, 색상 변경 &.rc-rate { font-size: 20px; // width: 20px; ..
[React] react-chartjs-2로 만든 Bar chart에 데이터레이블 추가하기(플러그인)
react-chartjs-2로 Bar 차트 만들기 chartjs-plugin-datalabels 플러그인 적용은 6.부터 1. 라이브러리 설치 # 리액트차트js2, 차트.js, datalabels 플러그인 npm install react-chartjs-2 chart.js chartjs-plugin-datalabels 2. 기본 틀 만들기 // Bar.js 파일 import { Chart as ChartJS, CategoryScale, BarElement, LinearScale, } from 'chart.js'; ChartJS.register(CategoryScale, BarElement, LinearScale); 3. 옵션 설정 // Bar.js const options = { maintainAspect..
기존 원본을 변화시키는(mutable) 배열 메서드의 immutable 버전이 나옴 array.toReversed() ⓜ array.reverse() : 기존 배열의 순서를 뒤집음 → 기존 배열 참조 리턴 기존 배열의 순서가 반대인 새 배열 리턴 array.toSorted([함수]) ⓜ array.sort([함수]) : 기존 배열을 정렬 → 기존 배열 참조 리턴 기존 배열을 정렬한 새 배열 리턴 array.toSpliced(시작인덱스, 삭제할개수[, 추가할요소]) ⓜ array.splice(시작인덱스, 삭제할개수[, 추가할요소]) : 기존 배열 시작인덱스부터 두 번째 인자 개수만큼 삭제 → 삭제된 요소가 담긴 배열 리턴 기존 배열에서 시작인덱스부터 두 번째 인자 개수만큼 삭제된 새 배열 리턴 (삭제된 요..
atom, selector로 상태를 정의하고 useRecoilState 등으로 불러와서 사용 상태 정의 atom 기본적인 상태 단위 key: 상태를 구분할 특수한 값 default: 초기값 const fontSizeState = atom ({ key: 'fontSizeState', default: 초기값 }) ... const [fontSize, setFontSize] = useRecoilState(fontSizeState); effects: 부수 효과. localStorage 저장이 필요한 경우 사용 setSelf: 로컬 키를 불러와서 상태로 저장하는 함수 onSet: 상태 변경 시 실행될 함수 newValue: 새 상태 oldValue: 기존 상태 isReset: 초기화 여부(set함수로 defaul..
React-query API 호출을 통해 서버 데이터를 가져오고 캐싱 값 업데이트(자동) 에러 핸들링 read → useQuery create/update/delete → useMutation import { QueryClient, QueryClientProvider } from 'react-query' ... const queryClient = new QueryClient() return ( ) QueryClient : query, mutation 관리, 캐싱, 데이터를 효율적으로 가져오고 업데이트하는데 사용 ReactQueryDevTools : 개발할 때만 사용(=콘솔) useQuery 첫 번째 인자 문자열 혹은 배열, 두 번째 인자 api 호출 함수, 세 번째 인자 옵션 객체 useQuery('un..
리듀서 내부에서 같은 슬라이스의 다른 리듀서 사용하기 // 슬라이스명.caseReducers.리듀서명(인자) // state를 사용해야한다면 인자로 state를 전달해주어야 함 customSlice.caseReducers.updateInfo(custom, product, true); 리듀서 내부에서 콘솔 출력했는데 proxy로 나오는 경우, current로 감싸서 확인하기 import { current } from '@reduxjs/toolkit'; ... reducers: { updateInfo: (state, action) => { console.log(current('내용')) }, } * 참고 caseReducers current 2023.04.19