Sweet But Psycho

📌Promise 프로미스 객체는 비동기 작업 처리에 사용되는 객체이다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용! 일반적으로 웹 어플리케이션을 구현할 때, 서버에서 데이터를 요청하고 받아오기 위해 $.get('url 주소/products/1', function(response){ }); 같은 API를 사용한다. 위 API 가 실행되면 서버에 데이터를 요청하게 되는데 여기서 데이터를 받아오기도 전에 데이터를 받아온 것마냥 화면에 데이터를 표시하려고 하면 오류가 발생한다. 이 문제점을 해결하기 위한 것이 프로미스이다. 1. 비동기 처리를 위해 프로미스 대신 콜백 함수를 사용한 것이다. //서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨준다. function getD..

📌switch switch 문은 if문 같은 조건문이다. 인자로 들어온 expression의 결과 값에 대해 case 와 비교하여 코드를 실행한다. switch(expression){ case value1 : //expression의 결과가 value1일 때, 실행되는 부분 case value2 : //expression의 결과가 value2일 때, 실행되는 부분 default : //아무것도 결과가 일치하지 않을 때, 실행되는 부분 } 📌사용 예시 const expr = '메론 메롱'; switch(expr){ case '오렌지 먹은지 오랜지: console.log('Oranges 상큼'); break; case '딸기당근수박': console.log('참외메론게임'); break; case '메론 메..

📌리덕스를 왜 쓸까? 컴포넌트의 데이터를 관리할 때, 서버에서 가져온 데이터를 이용하여 새로운 결과물을 만드는 경우에 사용한다. (컴포넌트마다 공통되는 데이터를 통합적으로 관리하는 경우에는 컨텍스트를 사용한다. ) property : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터 state : 컴포넌트의 state를 저장하고 변경할 수 있는 데이터 context : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터 redux : 서버에서 받은 데이터를 앱 전체에 전달하거나 관리함. (노드의 세션 같은 것인가) 📌redux의 동작 과정 component는 dispatch 함수를 통해 action 을 reducer에 넘겨준다. action은 리듀서에서 처리해야 할 작업의 이름과 ..

입력한 데이터를 화면에 바로 렌더링해보자. 📌useReducer useState보다 다양한 컴포넌트 상황에 따라 다른 값으로 업데이트해주고 싶을 때 사용한다. reducer 함수는 현재 상태, 업데이트를 위해 필요한 정보를 담은 값 (action)을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜줘야 한다. 리덕스에서 사용하는 액션 객체에는 아래와 같이 반드시 어떤 액션인지 알려주는 type field가 꼭 있어야 하지만 { type : '뭐시기', } useReducer 에서 사용하는 액션 객체는 꼭 type을 지니고 있을 필요는 없다. 그리고 굳이 객체가 아니라 문자열이나 숫자여도 상관없다. ✔ Counter.js useReducer를 사용했을..

평균값을 구해보자. 📌Average.js import React, {useCallback, useMemo, useRef, useState} from 'react'; const getAverage = (numbers)=>{ console.log('평균값 계산 중'); if(numbers.length === 0) return 0; const sum = numbers.reduce((a, b)=>a+b); return sum/numbers.length; }; getAverage 함수에 numbers 배열 인자를 받으면 reduce 함수에 의해 numbers의 모든 원소 값을 합산하고 이 반환값을 변수 sum에 할당한다. getAverage 함수의 반환값은 sum/numbers.length이 된다. 따라서 모든 ..

📌Array.prototype.map() : 배열 내의 모든 요소 각각에 대해서 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. const array1 = [1, 4, 9, 16]; //pass a function a map const map1 = array1.map(x=>x*2); //map 함수 안에 배열 원소에 2를 곱하고 출력하는 함수를 실행하고 이를 새로운 배열의 형태로 만든다. console.log(map1); //하면 expected output : [2, 8, 18, 32]; 아래 코드는 다음과 같이 분석할 수 있다. {list.map((value, index) => { {value}; })} 배열 list의 원소에 대한 value와 index를 인자로 받아서 li 태그를 형성하..

onChange 함수를 다음과 같이 정의하고 const onChange = (e) => { setNumber(e.target.value); }; input 태그 안에 value와 onChange를 다음과 같이 정의한다. input 창에 'ㅇ'이라는 글자를 입력했을 때 onChange 함수가 실행되면서 이벤트 객체를 반환한다. 반환된 이벤트가 onChange 함수에서 실행될 때 받은 인자 e의 객체 구조와 e.target의 구조와 e.target.value의 구조를 보면 아래와 같다. ✔ e의 객체 구조 console.log(e); //output is SyntheticBaseEvent { _reactName: "onChange", _targetInst: null, type: "change", native..

props란 ? 컴포넌트 속성을 나타내는 데이터! 함수 컴포넌트와 클래스 컴포넌트 모두 컴포넌트 자체 props를 수정해서는 안된다!!! 수정할 수 있는 것은 state이다. props 를 다룰 때에는 순수함수처럼 동작해야 한다. 👉순수함수는 입력값을 바꾸지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수이다. function pureFunc(a, b){ return a + b; } function notPureFunc(account, amount){ account.total -= amount; return amount } 📌함수형 컴포넌트 function Welcome(props){ return Hello, {props.name} } 해도 되고 const Mycomponent = ({nam..

1. 선언방식 📌 함수형 컴포넌트 import React from "react"; function App() { const name = "react"; return {name}; } export default App; 📌클래스형 컴포넌트 -class 키워드가 필요하다. -component로 상속 받아야 한다. -render() 메서드가 반드시 필요하다. class App extends Component { render() { const name = "react"; return {name}; } } export default App; 2. 일반적 차이 📌함수형 컴포넌트 state, lifeCycle 관련 기능을 사용할 수 없다. 👉Hook을 통해 해결 가능 메모리 자원을 클래스형 컴포넌트보다 덜 사용한다...

이벤트루프는 싱글스레드 내에 존재한다. 그렇다면 하나의 작업 수행을 완료하기 전에 다른 작업을 수행하지 못하여 한 번 실행했을 때와 두 번 실행했을 때 걸리는 시간이 두 배 차이가 나야 한다. 하지만 crypto 모듈을 예로 실험했을 때 각각 672ms, 679ms 로 차이가 별로 나지 않는 이유는 바로 스레드풀때문이다. ✓ Thread Pool 스레드풀을 사용하는 모듈로는 crypto, zlib, dns. lookup 등이 있다. 스레드풀의 기본 개수는 4개로 다음 예제를 통해 확인할 수 있다. 스레드풀이 작업을 동시에 처리하므로 8 개 작업 중에서 어느 것이 먼저 처리될지 모른다. 하지만 5~8 의 소요시간이 1~4 의 소요시간보다 약 2 배인 것을 확인할 수 있다. 따라서 처음 네 작업이 동시에 실..