Front-end/React

[React] ckEditor5 사용법 및 미리보기 기능 구현

구현 결과 설치 npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic react를 위한 ckeditor 패키지를 설치하고, 여러 버전 중 classic Editor를 구현할 것이므로 classic을 설치 ckeditor 화면에 띄우기 css로 에디터 크기를 지정해주지 않으면 화면에 넙대대하게 나온다. ckeditor.css css 설정 /* ----------------------------------- */ /* CKEditor 크기 조정 */ /* ----------------------------------- */ /* 텍스트입력태그 */ .ck.ck-editor__editable:not(.ck-editor__n..

[React] 윈도우 리사이징 예제로 알아보는 throttle

throttle (쓰로틀링)이란? 연속된 이벤트가 들어오게 되면 과부하가 걸리거나 쓸데없는 API 호출을 하는 등의 일이 생긴다. 그걸 방지하고자 적용하는게 일정한 시간간격에만 이벤트를 감지하고 그 외의 시간에는 무시하는 게 쓰로틀링 기법이다. (인식) -----3초간 무시----- (인식) -----3초간 무시------ (인식) 대표적으로 윈도우 리사이징, 스크롤 이벤트에 쓰로틀링이 많이 사용된다. 예를 들어 Intersection Observer로 구현되기도 하지만 throttle로 구현할 수도 있는 무한 스크롤이 있다. '연속된 이벤트가 들어오는데 특정 함수를 3초 간격으로만 호출하기' 이런 상황에 쓰로틀링을 적용할 수 있다. throttle 구현하기 이미 콜백함수가 실행된지 delay초가 지나지..

[React] React에서 불변성을 지켜야 하는 이유, 불변성이란?

불변성이란? react에서는 불변성을 지켜야 한다고 말한다. 불변성이 무엇인지부터 알아보자. 불변성은 어떤 객체나 배열의 내부 값이 직접 변경되지 않아야 한다는 것을 의미한다. 불변성을 지키기 위해서는 새로운 배열, Object를 생성해서 할당한다. let arr1 = [1, 2, 3]; arr1.push(4);// 배열을 직접 건드렸으므로 불변성을 해치게 된다. arr1 = [1, 2, 3, 4];// 새로운 배열을 할당했다. 참조값이 바뀌게 된다. // or arr1 = [...arr1, 4]; arr1 = arr1.concat(4); 어떤 배열이 불변성을 지킨다면 그 배열은 immutable 하다고 말하기도 한다. 불변성은 immutability라고 한다. React에서 불변성을 지켜야 하는 이유 ..

[react] Redux 시작하기

1. Redux를 쓰는 이유 Redux는 상태 관리 라이브러리이다. React에서 데이터는 위에서 아래로만 흐를 수 있다. 그래서 일일이 props 내리기나 state 끌어올리기를 해야 한다. 이렇듯 React에서 컴포넌트끼리의 데이터 이동은 복잡한 단계를 거쳐야 하기 때문에 store라는 저장소에 상태를 한데 모아놓고 관리하는 개념이 생겼다. 상태를 가져오고 변경하는 것은 모두 store만 통하면 된다. 그리고 상태 변경 로직도 컴포넌트에 count + 1 처럼 직접 작성하지 않고, reducer란 곳에 미리 'INCREASE란 이름이 들어오면 count + 1을 저장해라' 처럼 명세해 놓기 때문에 만약 의도한 값이 나오지 않는 에러가 발생하면 컴포넌트 단이 아니라 상태 가공부분(reducer)를 디버..

[React] react-router-dom v6 브라우저 뒤로가기 이벤트 감지 (history.action 대체)

useNavigationType 기존에 react-router-dom v5에서 history.action === 'POP' 과 같이 뒤로가기를 감지했던 것을 대체할 수 있다. v6가 되면서 history는 여러개의 hook으로 분리되었다. 이제 popstate 이벤트가 발생했는지 pushstate 이벤트가 발생했는지는 useNavigationType()을 통해 알 수 있다. 활용 예 1 react-router를 이용해 검색을 처리했더니 뒤로 가기를 하면 이전 화면이 아니라 이전 쿼리 페이지로 가는 현상이 발생했다. 예를 들어 /search?q=apple 페이지에서 뒤로가기를 하면 이전 쿼리였던 /search?q=appl 페이지로 가는 식이다. 그래서 검색결과 페이지에서 뒤로가기 이벤트가 발생한다면 메인으..