본문 바로가기

개발(Development)/React(리액트)34

[React] create-react-app (CRA) 기초 정리 (Feat. 환경변수) Create-React-App(CRA) 란? - 리액트 개발환경을 쉽게 구축해준다.(by 페이스북 리액트팀) - 대략 아래의 것들 + 알파가 자동으로 세팅된다. webpack(모듈+라이브러리 번들링) babel(jsx 컴파일) jest(테스트) eslint(코드형상관리) polyfill(구형 브라우저 미지원 문법 등 대응) HMR(Hot Module Replacement: 재시작 없이 변경사항 반영) CSS 후처리(SASS 컴파일, 벤더접두사prefix 등) - 위의 것들을 알아서 설정해주므로 매우 편리하지만, eslint 등의 설정 변경이 불편하다는 단점은 있다. CRA 사용법 - React npx create-reat-app 폴더명(현재경로는 .) - React + TypeScript npx crea.. 2022. 8. 8.
[React] 리액트 기초 동작 원리(Feat. Virtual DOM : 가상돔이란?) 리액트란? 자바스크립트 UI 라이브러리이다. 좀더 친절하게 요약하면, "상태값이 변경되거나, 부모가 재렌더링 될 때마다 UI를 자동으로 업데이트해주는 JS 라이브러리" 이다. 그리고 이를 위해 "가상DOM 을 통해 변경된 부분만 효율적으로 업데이트" 해주는 구조를 채택했다. 사실 리액트 자체는 이게 다다. 자칫하면 잊기 쉬운 리액트의 알몸을 간략하게 정리해둔다. # 리액트는 자바스크립트 UI 라이브러리다. 1. 리액트는 컴포넌트의 1) 상태값이 변경되거나 부모가 재렌더링되면, 2) UI를 자동 업데이트 해주는 라이브러리다. * 즉, state, redux store 등의 상태값이 변경되거나, 부모 컴포넌트가 재렌더링 되면, * 리액트가 해당 컴포넌트 함수를 자동으로 재호출하여 재렌더링 해준다. 2. 이 .. 2022. 8. 6.
[React] Toast-UI Editor/Viewer 유튜브 동영상 삽입/표시 방법 Toast-UI 에디터, 뷰어에서 유튜브를 삽입하고, 표시하는 방법을 정리한다. 1. Toast-UI Editor 유튜브 삽입 방법 - 마크다운 모드에서 iframe 으로 유튜브 동영상을 삽입하고, 미리보기(preview) 하는 방법 2. Toast-UI Viewer 유튜브 표시 방법 - iframe 으로된 유튜브 공유 태그를 토스트 뷰어에서 렌더링하는 방법 1. Toast-UI Editor 유튜브 삽입 방법 - Editor 컴포넌트에 customHTMLRenderer 속성을 추가하고, iframe 을 입력할 수 있도록 정의해준다. import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor.css.. 2022. 8. 6.
[React] create-react-app 리액트 버전 변경 및 에러 처리 방법 npx create-react-app 으로 리액트 프로젝트를 세팅하면, 항상 최신 버전의 react, react-dom 으로 설치가 된다. 그러나 다른 라이브러리와 호환이 안되는 등의 이슈로 인해, react의 버전을 변경해야 할 때가 있다. 혹은, GitHub 레퍼지터리 등에서 clone/pull 해온 프로젝트에서 npm install || yarn install 을 실행하면 버전이 서로 안 맞는다는 식의 에러코드가 쏟아질 때가 있다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! Found: react@18.0.0 npm ERR! node_modules/react npm ERR! react@"^18.. 2022. 6. 23.
[React] Toast-UI Viewer 글자 크기, 행 간격, 마진 등 CSS 조정 방법 리액트에서 Toast-UI Viewer에 html문서를 렌더링하면, 아래처럼 글자 크기, 행간 간격, 마진 등이 자동 적용 되는 이슈가 있다. 확인해보면 toast-ui 자체에서 설정된 css 값임을 알 수 있다. 원치 않는 margin이 위아래로 10px 적용되어 있는데, 바꾸고 싶다면, CSS로 조정해주면 된다. # Toast-ui Viewer CSS 조정 방법 다양한 방법이 있겠지만, 필자는 편의상 App.css 파일에서 아래와 같이 !important 로 지정하여 우선순위를 높여주었다. (CSS Selector 는 크롬 inspect/검사 기능 등을 통해 파악하면 된다) .toastui-editor-contents p, .toastui-editor-contents h1, .toastui-edito.. 2022. 5. 31.
[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.

티스토리툴바