본문 바로가기

개발(Development)273

[React] Router v6: useNavigate() 파라미터 전달&취득 방법 - useLocation() # useNavigate() 파라미터 전달, useLocation() 파라미터 수신 방법 react-router-dom v6 에서 1. useNavigate() 로 페이지를 이동하면서 파라미터를 전달하는 방법 2. useLocation() 으로 파라미터를 취득하는 방법 을 정리한다. 1. 페이지 이동시, 파라미터 전달 방법 1) useNavigate() 훅으로 navigate 함수를 취득한다. 2) navigate() 함수의 첫번째 인자에 이동할 경로, 두번째 인자의 state 속성에 파라미터를 넣어준다. - navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } ) 아래 예제코드는, 버튼을 클릭하면 '/test' 경로로 이동하면서 id, job을 인자로 넘긴다. imp.. 2022. 5. 28.
[React] Router v6 리다이렉트 및 경로 이동 처리(새로고침X): 404에러 페이지 렌더링 활용 # React-Router-Dom V6 리다이렉션 및 경로이동 처리 방법 일반 자바스크립트에서는 window.location 을 이용해 특정 경로로 이동시킬 수 있다. 리액트에서도 물론 이용 가능하지만, 페이지가 새로고침되는 이슈가 있다. 이 글은 리액트 라우터 v6 에서 새로고침 없이 경로 이동 및 리다이렉션 처리 방법을 정리한다. 방법은 2가지 인데, 1. 컴포넌트 내부에서 useNavigate hook을 사용는 방법과 2. useNavigate을 사용할 수 없을 때, Navigation 컴포넌트를 사용하는 방법이다. 이를 이용해 없는 주소로 접근시, 404에러 페이지 리다이렉션 처리도 가능하다. 1. useNavigate 훅 useNavigate() 를 호출하면, 경로 이동 처리를 할 수 있는 "함.. 2022. 5. 23.
[React] Toast-UI Editor 게시물 수정 방법(에디터 html/markdown표시) # Toast-UI Editor 게시물 수정 방법(== 에디터에 HTML/Markdown 표시) Toast-UI Editor 로 작성된 HTML/Markdown 문서를 DB에 저장했다가, 글 수정 기능 등을 구현하기 위해 다시 Editor 로 불러와 노출해야 하는 경우가 있다. *** 그냥 HTML이나 Markdown으로 작성된 글을 Viewer로 띄우는 방법은 아래글 참고. [React] Toast UI Viewer 사용 방법: HTML태그, Markdown 표시 뷰어 이 글은 Toast-UI Editor의 "에디터 편집 영역" 에 HTML이나 Markdown을 표시하는 방법을 정리한다. 아래의 코드 한줄이면 끝이다. // 1. HTML을 에디터에 표시 설정 Editor.prototype.getInst.. 2022. 5. 18.
[React] Toast-UI Editor 이미지 파일 서버 업로드 방법 (base64 인코딩 X) # Toast-UI Editor 이미지 파일 서버 업로드 방법 일반적으로 이미지를 관리하는 방식은 첨부 이미지 파일은 서버 디스크에 저장해두고, 해당 경로만 DB에 저장해두는 것이다. 그러나 Toast-UI Editor 에서 이미지를 첨부하면 img 태그의 src에 이미지 데이터 전체가 base64로 인코딩 되어 주입된다. Markdown 의 경우에도 형식은 다르지만 결과적으로 동일하다. 만약 이 상태 그대로 DB에 저장해두면, 레코드 한 줄마다 몇 Mb씩 차지하는 곤란한 상황이 발생할 수 있다. 우리가 원하는 건. 1. 이미지 파일은 서버로 전송하고, 2. 파일이 저장된 경로만 DB에 저장해두고, img 태그의 src 속성값으로 사용하는 것 일 것이다. 지금부터 Toast-UI Editor 에서 첨부한.. 2022. 5. 16.
[React] Toast-UI Editor 이미지 업로드/드래그 첨부 막기 방법 # Toast-UI Editor 이미지 업로드 기능 제거 방법 Toat-UI Editor에서 이미지를 업로드하면, multipart 형식으로 파일 첨부가 되는 것이 아니라 이미지 데이터 자체를 base64로 인코딩하여 img 태그의 src로 주입해버린다. 사이즈가 큰 이미지 파일을 이 상태 그대로 DB에 저장하고 싶지 않다면, 다른 방식을 생각해야 할 것이다. 이 글에서는 Toat-UI Editor의 이미지 첨부 자체를 막는 방법을 정리한다. * 이미지를 첨부 파일로 서버에 전송하는 방법은 아래글 참고 [React] Toast-UI Editor 이미지 파일 서버 업로드 방법 (base64 인코딩 X) 방법은 코드 한줄이다. Editor.prototype.getInstance().removeHook('ad.. 2022. 5. 16.
[React] Toast UI Viewer 사용 방법: HTML태그, Markdown 표시 뷰어 # Toast-UI Viewer 사용 방법 리액트 환경에서 HTML태그나 Markdown으로 작성된 내용을 Toast-UI Viewer 로 표시하는 방법을 정리한다. (너무나 간단하다) Toast-UI Editor 로 작성한 글을 HTML이나 Markdown 으로 "취득"하는 방법은 아래 글 참고. [React] Toast UI Editor기본 사용 방법 1. 설치 - Toast-UI 에디터의 React Wrapper 버전을 설치한다. - Viewer 도 여기에 설치되어 있다. 이미 설치했다면 생략하자. npm install @toast-ui/react-editor 2. 사용 - Viewer 컴포넌트와 CSS를 임포트해주고 - Viewer 컴포넌트의 initialValue 프롭에 표시할 내용을 넣어준다... 2022. 5. 16.
[React] Toast-UI Editor 폰트 컬러(글자 색상) 설정 color-syntax 플러그인 사용 방법 # Toast-UI Editor 폰트 컬러(글자 색상) 설정 플러그인 추가 방법 리액트에서 Toast-UI Editor 사용시, 글자 색깔을 설정할 수 있는 color-syntax 플러그인 사용법을 정리한다. (기본 툴바 옵션에 제공되지 않아, 플러그인을 설치하고 사용해야 한다. 매우 간단하다) - 공식 깃허브: https://github.com/nhn/tui.editor/tree/master/plugins/color-syntax * Toast-UI Editor 자체의 기본 사용 방법은 아래 글을 참고하자. [React] Toast UI Editor기본 사용 방법 1. 설치 - 리액트에서 사용할 경우, @toast-ui/editor-plugin-color-syntax 플러그인을 설치해준다. npm ins.. 2022. 5. 16.
[React] Toast UI Editor기본 사용 방법 # Toast UI Editor기본 사용 방법 리액트에서 Toast-UI 에디터를 사용하는 방법을 정리한다. 공식홈: https://ui.toast.com/tui-editor React Wrapper 깃허브: https://github.com/nhn/tui.editor/tree/master/apps/react-editor 1. Editor 설치 - 리액트에서 사용할 것이므로, toast ui editor의 React Wrapper 버전을 설치한다. npm install @toast-ui/react-editor 2. 컴포넌트 적용 - 컴포넌트와 스타일을 임포트하고, - 일반 컴포넌트 처럼 사용하면서 옵션을 설정해준다. (옵션에 대해선 주석 설명 참고) import { useRef } from 'react'.. 2022. 5. 16.
[React] Toast-UI 에디터 관련 에러: Failed to parse source map # toast-ui editor 사용 관련 에러 해결 방법: Failed to parse source map [ 문제 상황 ] 리액트 환경에서 @toast-ui/react-editor 를 설치 후, Editor 컴포넌트를 사용하면, 별다른 문제가 보이진 않는데...(아직?) 아래와 같은 에러코드가 떠서 개발자의 마음을 심히 불편하게 하는 경우가 있다. [ 에러 코드 ] WARNING in ./node_modules/@toast-ui/editor/dist/toastui-editor-viewer.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from '/node_modules/@t.. 2022. 5. 15.

티스토리툴바