[React] React.lazy 와 React Router 라이브러리 사용방법

시작하기 전내용이 많거나 큰 js 페이지를 전송할 때 저사양 장치를 사용 중이거나 저속 네트워크를 연결해서 로드되는 시간이 오래걸립니다. 이럴 때 필요한 것이 코드 분할입니다. React.lazy함수와 React-router-dom  라이브러리를 사용하면 Route 기반 코드 분할을 설정할 수 있습니다. 지금부터 React.lazy함수와 React-router-dom  라이브러리에 대해 간략하게 알아보겠습니다.(사용 방법을 잊지 않기 위해 매우 간략하게 기록했습니다. 자세한 내용은 참고 사이트에서 확인해주시면 감사하겠습니다.)React-router-dom 설치   1    React-router-dom 이란?Router를 사용해서 페이지를 이용할 때 사용하는 라이브러리입니다.   2   설치하는 방법np..

• format_list_bulleted React/활용
• · 2022. 5. 26.

[React] ckeditor 텍스트 에디터 리액트에 적용 (5단계)

[ React에서 텍스트 에디터 사용하는 가장 쉬운 방법 ]   1    아래의 사이트에 접속  https://ckeditor.com/docs/ckeditor5/latest/index.html CKEditor 5 documentationLearn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, customize it, create your own plugins and custom editors, change the UI or even bring your own UI to the editor. API reference and examples included.ckeditor.c..

• format_list_bulleted React/활용
• · 2022. 4. 13.

[React] 리액트에 폰트어썸 매우 쉽게 적용하기 (4단계)

1. npm 설치$ npm i @fortawesome/fontawesome-svg-core$ npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons$ npm i @fortawesome/react-fontawesome2. import 해주기FontAwesome 을 사용하기 위해 선언을 하나 해준다.import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";3. 변수명을 스네이크 표기법-> 카멜 표기법으로 변경해주기사용할 FontAwesome 의 아이콘은 아래의 링크와 같다.https://fontawesome...

• format_list_bulleted React/활용
• · 2022. 3. 14.

[React] 배열에 데이터 삽입 및 배열 렌더링 하기

0. 학습 들어가기 전(1) Object.assign 메소드Object.assign(target, ...sources)객체를 병합하는 메소드sources 들이 target에 병합되는 형식 (sources = 소스 오브젝트, target = 타겟 오브젝트)리턴 값은 타겟 오브젝트인 target이 됨var obj1 = {a};var obj2 = {b};var obj3 = {c};var addObj = Object.assign({}, obj1, obj2, obj3);console.log(addObj); // {a, b, c}(2) JSON.stringify 와 JSON.parse()JSON.stringify(value, replacer, space)JSON : 브라우저와 서버사이에서 오고가는 데이터의 형식JS..

• format_list_bulleted React/활용
• · 2022. 1. 9.

[React] input 상태 관리 방법

input 과 form를 이용한 이름, 전화번호 입력 만들기0. 확장 프로그램 설치Reactjs code snippets 확장팩이다이 확장팩을 사용하면 자바스크립트 파일에서 자동으로 컴포넌트를 자동 생성해준다 (rcc, rsc 단축키 사용 가능)rcc 단축키: 클래스 형태로 만들어진 컴포넌트 자동 생성rsc 단축키: 함수형 형태로 만들어진 컴포넌트 자동 생성1. 구조 만들기(1) 파일 생성src 디렉토리 안에 components 디렉토리를 생성하고 그 안에 PhoneForm.js 파일을 생성한다(2) PhoneForm.js 내용import React, { Component } from 'react';class PhoneForm extends Component { state = { nam..

• format_list_bulleted React/활용
• · 2021. 12. 28.

[React] Create react app 사용하는 방법 & 설치 오류 해결 방법

* 그동안 vscode 와 같은 에디터에서 학습하지 않고 https://codesandbox.io/s/6yoqonyo7r 에서 진행을 했었다* 에디터 vscode로 react 환경을 구축하는 방법은 아래와 같다필요한 도구 설치- node js (node js를 직접적으로 사용하지는 않지만 Webpack 과 Babel을 사용하기 위해 꼭 설치함)- yarn (추천)choco install yarn- vscode (에디터) Create react app 사용하는 방법* 해당 방법은 window 기준 입니다. 1. cmd 에서 폴더 생성 및 해당 폴더로 이동mkdir react-tutorialscd react-tutorials 2. create react app 설치 및 폴더 생성npx create-react..

• format_list_bulleted React/설치 및 환경 구축
• · 2021. 12. 26.