시작하기 전 내용이 많거나 큰 js 페이지를 전송할 때 저사양 장치를 사용 중이거나 저속 네트워크를 연결해서 로드되는 시간이 오래걸립니다. 이럴 때 필요한 것이 코드 분할입니다. React.lazy함수와 React-router-dom 라이브러리를 사용하면 Route 기반 코드 분할을 설정할 수 있습니다. 지금부터 React.lazy함수와 React-router-dom 라이브러리에 대해 간략하게 알아보겠습니다. (사용 방법을 잊지 않기 위해 매우 간략하게 기록했습니다. 자세한 내용은 참고 사이트에서 확인해주시면 감사하겠습니다.) React-router-dom 설치 1 React-router-dom 이란? Router를 사용해서 페이지를 이용할 때 사용하는 라이브러리입니다. 2 설치하는 방법 npm inst..
[ React에서 텍스트 에디터 사용하는 가장 쉬운 방법 ] 1 아래의 사이트에 접속 https://ckeditor.com/docs/ckeditor5/latest/index.html CKEditor 5 documentation Learn 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.com 2..
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-fontawesome 2. import 해주기 FontAwesome 을 사용하기 위해 선언을 하나 해준다. import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 3. 변수명을 스네이크 표기법-> 카멜 표기법으로 변경해주기 사용할 FontAwesome 의 아이콘은 아래의 링크와 같다. https://fon..
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 : 브라우저와 서버사이에서 오..
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 = { ..
* 그동안 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-tutorials cd react-tutorials 2. create react app 설치 및 폴더 생성 npx cr..
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 ..
