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

[ 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..

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...

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..

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..

* 그동안 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..

LifeCycle API 란?LifeCycle API 는 React에서 생명주기이다 무슨 말이냐면 Component가1. 나타날 때2. 업데이트 될 때3. 사라질 때 등 중간중간 과정에서 작업을 할 때 사용되기 때문이다. LifeCycle API 의 종류는 매우 많다 (사진 참고)LifeCycle API 종류 소개 (사진 참고)1. Mounting: Component가 우리 브라우저 상에 나타날 때 2. Updating: Component의 Props가 바뀌거나 어떤 내용이 바뀌었을 때, 업데이트 될 때 3. Unmounting: Component가 우리 브라우저 상에서 사라질 때 4. LifeCycle API 소개constructor우리가 만든 함수가 처음 브라우저 상에 나타날 때 가장 먼저 사용되는 ..

State란?- state는 Component 내부에 있고 Component 안에서 바뀔 수 있는 값- 값이 바뀔 때마다 Component는 리렌더링(개발자가 작성한 문서가 브라우저에서 출력되는 과정)됨- 값을 변경할 때에는 setState라는 함수를 사용함Props 와 State 비교- Props는 부모가 자식한테 넘겨주는 값을  State는 자기 자신이 가지고 있는 값을 의미한다.  - Props는 읽기 전용, State는 수정도 가능 - 이때 State는 자기 자신이 가지고 있는 값을 변경할 수도 있다. (with. setState 함수)State 사용법1. State 을 이용한 카운터 만들기 (1) App.js 와 Counter.js 를 만듦(2) Counter.js 내용import React, ..