hubring

async/await Promise를 더욱 쉽게 사용할 수 있도록 해주는 ES8문법. 이 문법을 사용하려면 함수의 앞부분에 async 키워드를 추가하고, 해당 함수 내부에서 Promise 앞부분에 await 키워드를 사용한다. 이렇게 하면 Promise가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있다. function increase(number){ const promise = new Promise((resolve, reject)=>{ setTimeout(()=>{ const result = number+10; if(result > 50){ const e = new Error('NumberTooBig'); return reject(e); } resolve(result); }, 1000); ..

Promise Promise는 콜백 지옥 같은 코드가 형성되지 않게 하는 방안으로 ES6에 도입된 기능 콜백지옥 예 function increase(number, callback){ setTimeout(()=>{ const result = number+10; if(callback){ callback(result) } }, 1000) } increase(0, result =>{ increase(result, result =>{ increase(result, result =>{ increase(result, result =>{ ... }) }) }) }); 여러 작업을 연달아 처리하기 위해 함수를 여러번 감싸는 것이 아닌 .then을 사용하여 그다음 작업을 설정하도록 하여 콜백지옥에서 벗어남. functio..

리액트 라우터 라이브러리 설치 yarn add react-router-dom 프로젝트에 라우터 적용 src/index.js 파일 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import { BrowserRouter } from 'react-router-dom' ReactDOM.render( , document.getElementById('root') ); serviceWorker.unregister(); react-router-dom에 내장된 BrowerRouter 컴포..

Ref DOM을 직접적으로 건드려야 할 경우 Ref를 사용한다. 컴포넌트 내부에서 DOM을 직접 접근해야할 경우 ref를 사용, 먼저 ref를 바로 사용하지 않고 원하는 기능을 구현할 수 있는지 반드시 고려한 후 사용. 서로다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용한다면 잘못된 설계로 유지 보수가 힘들어짐. 컴포넌트 끼리 교류할 때는 언제나 데이터를 부모 자식 흐름으로 교류 효율적인 교류를 위해 리덕스 혹은 Context API를 이용할 수 있음. DOM을 사용해야하는 상황 - 특정 input에 포커스 주기 - 스크롤 박스 조작하기 - Canvas 요소에 그림그리기 등 클래스형 컴포넌트에서 Ref 사용 import React, { Component } from 'react'; import './..

이벤트 핸들링 주의 사항 1. 이벤트 이름은 카멜 표기법 작성 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌 함수 형태의 값을 전달함. 3. DOM 요소에만 이벤트를 설정 가능 => 만약 직접 만든 컴포넌트에 설정할 경우 이벤트가 아닌 props로 값 전달됨. 이벤트 종류 Clipboard, Touch, Composition, UI, Keyboard, Wheel, Focus, Media, Form, Image, Mouse, Animation, Selection, Transition 이벤트 핸들링 매뉴얼 https://reactjs.org/docs/handling-events.html Handling Events – React A JavaScript library for building us..

https://boxfoxs.tistory.com/395 React - Functional Component의 장점, Hook React 16.8 버전부터 FC - Functional Component(함수형 컴포넌트)에 State를 사용할 수 있도록 해 주는 Hooks 라는 개념이 생겼습니다. 스스로 Hooks 는 별로 중요한 기능이 아니라고 생각했었지만, React 개발자 boxfoxs.tistory.com 힘수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 편하며 메모리 자원도 덜 사용함 또한 프로젝트를 완성하여 빌드한 후 배포할 경우 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작음 (하지만 성능과 파일 크기 면에서 사실상 큰 차이는 없음..) 함수형 컴포넌트는 State와 LifeCyc..

vscode에서 Reactjs code snippets 확장 설치 해당 확장 패키지를 다운로드 받으면 간단한 키 입력으로 React 구문을 자동 생성해 줄 수 있다. 클래스 형태로 만들어진 컴포넌트 생성 (js파일) rcc 함수형 컴포넌트 생성 rsc 객체 안에서 사용되는 [e.target.name]: 문법은 속성 계산명 이라는 문법 handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }); } https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer 객체 초기자 객체는 new Object(), Object.create()..

Nodejs 웹팩,바벨을 이용하기 위해선 설치해주어야 한다. 윈도우의 경우 아래 링크에서 다운로드 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org macOS or Linux의 경우 nvm이용 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash nvm install --lts yarn Node를 설치하면 npm이 설치됨. 대신 yarn을 사용하는 것을 추천 조금 개선된 버전의 npm이라 생각하면 됨. -> 더 나은 속도, 더 나은 최신 시스템을 사용하기..