시작하기 전 내용이 많거나 큰 js 페이지를 전송할 때 저사양 장치를 사용 중이거나 저속 네트워크를 연결해서 로드되는 시간이 오래걸립니다. 이럴 때 필요한 것이 코드 분할입니다. React.lazy함수와 React-router-dom 라이브러리를 사용하면 Route 기반 코드 분할을 설정할 수 있습니다. 지금부터 React.lazy함수와 React-router-dom 라이브러리에 대해 간략하게 알아보겠습니다. (사용 방법을 잊지 않기 위해 매우 간략하게 기록했습니다. 자세한 내용은 참고 사이트에서 확인해주시면 감사하겠습니다.) React-router-dom 설치 1 React-router-dom 이란? Router를 사용해서 페이지를 이용할 때 사용하는 라이브러리입니다. 2 설치하는 방법 npm inst..
1. 문제 발생 error: Your local changes to the following files would be overwritten by checkout: git pull origin master 를 하던 도중 위와 같은 오류가 발생하였다. 2. 문제 해결 (1) : git stash ▶ 먼저 git stash 를 해서 스택에 저장되어 있는 작업들을 확인해준다. git stash ▶ 스택에 저장된 내용이 있다면 아래의 명령어를 통해 git pull 을 정상 작동 시킬 수 있다. # git stash && git pull origin master && git stash pop 3. 문제 해결 (2) : git add ▶ git stash 를 통해 확인하였다면 push 할 때처럼 git add 해주..
[ 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..
깃 초기화 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 브랜치이름 스태시 ..
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..
