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

깃 초기화git init 경로명깃 상태 확인git status간단하게 깃 상태 확인git status -s깃 저장소 복제git clone 원격저장소URL 새폴더이름로그 확인git log커밋 비교git diff원격 저장소 별칭 확인git remote원격 저장소 별칭과 주소git remote -v원격 저장소와 연결git remote add 별칭 URL등록한 원격 저장소 삭제git remote rm 별칭커밋 가져오기git pull 또는 git fetch커밋 전송하기git push 별칭 브랜치 이름현재 브랜치 확인git branch브랜치 생성git branch 브랜치이름브랜치 이동git checkout 브랜치이름스태시 저장git stash스태시 읽기git stash pop브랜치 병합git merge 브랜치이름리..

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