IT_susu

function p(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(ms); }); }); } (async function main() { try { const ms = await p(1000); } catch (error) { console.log(error); } })(); async function 에서 return되는 값은 Promise.resolve함수로 감싸서 리턴된다. function p(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(ms); }); }); } async function asyncP() { return '..

생성자를 통해서 promise를 만들 수 있다, 파라미터로 excutor라는 함수를 받는다. excutor 함수는 resolve와 reject함수를 인자로 받는다. new Promise((resolve, reject) => {}); 생성자 함수로 promise 객체를 만드는 순간 pending상태가 된다. resolve함수가 실행되면 fulfilled 상태 reject함수가 실행되면 reject상태 사용방법1 const p = new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, 1000); }); p.then(() => { console.log('1000ms 후에 fulfilled가 실행됩니다.'); }); 사용방법2 then을 설정하..

typescript 설치 npm install -g typescript compile option tsc 파일명 --target 버전명 : 해당 버전으로 컴파일 tsc 파일명 --lib 라이브러리명 : 해당 라이브러리를 포함하여 컴파일 tsc 파일명 --module commonjs : commonjs 모듈로 컴파일(node.js에서 모듈 컴파일을 commonjs로 하기 때문에) tsconfig.json ts 컴파일 옵션을 정의해놓는 곳. { "include": [ // 컴파일 포함요소 "src/**/*.ts" ], "exclude": [ // 컴파일 제외요소 "node_modules" ], "compilerOptions": { // typescript compile options "module": "co..

1.1 자바스크립트의 이벤트를 먼저 봅니다. Rxjs의 Observer Pattern은 자바스크립트의 이벤트 등록과 유사합니다. 타겟이 되는 Dom에 addEventListener를 이용하여 이벤트와 이벤트가 발생할 때 실행할 함수를 저장해두고, 지켜보고 있다가 이벤트가 감지되면 해당 이벤트를 실행시킵니다. 1.2 Observer Pattern을 봅니다. 이벤트 = 관찰 대상 = 옵저버 객체 이벤트가 발생 = 옵저버 객체들을 서브젝트 객체에 등록해놓고 이들의 상태가 변경된 것을 감지 이벤트가 발생할 때 실행할 함수 실행 = 옵저버들의 메서드 호출? 2.1 함수형 프로그래밍 기본적으로 코딩을 하는 방식은 명령형 프로그래밍입니다. 위에서 아래로 코드가 흘러가며 조건문과 반복문으로 분기를 하는 방식입니다. 처..

1. 배우는 이유 이번에 이직한 회사에서 Rxjs를 사용하고 있어서 처음 접해봤습니다. 사실 이게 뭔지 잘 모르지만 사용해야하니 알아야 합니다. 러닝커브가 높다고 들었지만 어쩌겠습니까. 넘어야 할 산이기에. 2. rxjs의 배경 rxjs의 근본은 리액티브 프로그래밍에서 나온다고 합니다. 이런 접근법도 처음 보긴 해요. 리액티브 프로그래밍... 첨에 잘못 읽어서 반응형 프로그래밍인 줄 알았습니다;; 아니면 리액트와 관련한건가? 이런 무지한... 3. 리액티브 프로그래밍이란 리액티브 선언문을 읽어봐도 뭔말인지 이해가 가지 않습니다. 이벤트나 배열 같은 데이터 스트림을 비동기로 처리해 변화에 유연하게 반응하는 프로그래밍 패러다임이라는데, 설명해 주실 분? 4. 리액티브 프로그래밍의 핵심단어 데이터 스트림과 변..

미들웨어란? 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행하는 것. 리듀서는 순수함수로 관리되므로 그 외의 사이드 이펙트를 처리하는 데 도움이 됨. 액션 -> 미들웨어 -> 리듀서 -> 스토어

1. ui와 연결하기 위해서 react-redux의 connect로 감싸줌. - state와 dispatch 연결 mapStateToProps : store에 있는 state를 props로 연동해준다. mapDispatchToProps: dispatch 함수를 props로 연동해준다. 2. bindActionCreators로 dispatch 함수 리턴하는 부분을 편리하게 써줄 수도 있지만 최종판은 아래와 같다 export default connect( (state) => ({ number: state.test.number, }), { increase, decrease, }, )(Login); 리덕스 더 편하게 사용하기 1. redux-actions action creators 의 변화 // before ..

src/index.js 에서 1. store 생성 createStore로 스토어 만듦 2. provider 컴포넌트로 프로젝트에 리덕스 연결 3. redux devTools의 설치 및 적용

정규표현식이란 특정한 규칙을 가진 문자열의 집합을 표현하기 위해 쓰이는 형식언어 입니다. \B : 문자와 공백사이가 아닌 값 / /g : 문자열 내의 모든 패턴을 찾는다. ?= : (긍정형)전방탐색. ?=뒤에 올 것을 찾음 ?! : 부정형 전방탐색. 앞에서 지정한 것과 같지 않을 것을 찾음. d{number} : 숫자{몇 개} + : 하나 이상 찾기

전역적으로 사용할 데이터가 있을 때 유용한 기능 1) context 만들기 createContext함수를 이용해 생성. 인자값으로 기본 상태 지정. import { createContext } from 'react'; const ColorContext = createContext({ color: 'black' }); export default ColorContext; 2) consumer context를 사용하는 곳. render props 형태로 넘겨야 함 import React from 'react'; import ColorContext from '../contexts/color'; const ColorBox = () => { return ( { value => ( ) } ) } export defa..