MySQL 설치 링크https://bitnami.com/download/files/stacks/wampstack/8.0.3-2/bitnami-wampstack-8.0.3-2-windows-x64-installer.exe?with_popup_skip_signin=1  Download WAMP packaged by BitnamiI just downloaded WAMP packaged by @bitnami. Check it out! https://bitnami.com/stack/wamp #applicationawesomeness Tweet will open in a new window Tweetbitnami.com MySQL 정상작동 확인 방법MySQL 이 정상적으로 작동하지 않는다면 이곳에서 Start가 되..

시작하기 전내용이 많거나 큰 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...

깃 초기화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..