1. 컴포넌트에서 Redux Store에 접근하는 방법 import store from './app/store'; import { Provider } from 'react-redux'; ReactDOM.render( , document.getElementById('root') ); 특정 컴포넌트에서 Redux Store에 접근하고자 할 경우 해당 컴포넌트를 Provider 컴포넌트로 감싸야 함. Provider 컴포넌트는 Redux Store를 store 속성으로 가지므로 우리가 구성해준 Store를 전달해주면 됨. 위 코드에서 App 컴포넌트와 그 하위 컴포넌트들은 useSelector(), useDispatch() hook을 통해 우리가 정의한 Redux Store(./app/store.js 파일)에..
1. Thunk Middleware 앞서 Reducer는 Side-effect가 없는 순수함수여야 함을 알았음. 하지만, 네트워크 통신, 데이터 내보내기, setTimeout()와 같은 타이머 등 Side-effect가 없는 애플리케이션은 존재하지 않기 때문에 Redux에서 Side-effect를 다룰 수 있는 방법이 필요함. 이러한 Side-effect를 처리하기 위해 disptach()가 Store에 작업을 전달하기 전에 특수한 일을 할 수 있도록 disptach를 커스텀하는 함수인 Middleware라는 개념이 도입됨. Middleware는 UI 컴포넌트와 Store의 연결 다리 역할을 하기 때문에 Middleware에는 일반 객체가 아닌 값(ex. Promise)이 전달될 수 있고(순수함수일 필요..
1. 변수 State 선언하기 가장 기본적인 hook으로, 클래스형 컴포넌트에서만 가능했던 가변적인 상태를 함수형 컴포넌트에서도 가능하게 함. const [ count, setCount ] = useState(initialValue); useState(initialValue)로 state 초기값을 설정할 수 있는데 initialValue는 state의 초기값으로 설정할 값을 넣어주면 됨. useState() 함수를 호출하면 ① state 변수(count)와 ② state를 갱신할 수 있는 함수(setCount) 배열을 반환함. // 1. 함수형 컴포넌트의 state 초기화 const [count, setCount] = useState(0); // 2 . 클래스형 컴포넌트의 state 초기화 class E..
1. useRef() 사용하기 React는 Virtual DOM을 사용해 요소를 한꺼번에 렌더링하므로 DOM을 직접 조작할 때보다 속도가 빠르지만, 요소 focus, 미디어 조작, 애니메이션 적용 등 DOM 요소의 주소값을 활용해야 하는 경우 DOM을 조작할 수밖에 없음. 그럴 때 사용 가능한 Hook이 useRef(). A. 특정 DOM 요소 선택하기 javascript에서 DOM 요소를 선택하기 위해 Element.querySelector(), Element.getElementById()같은 메서드를 사용하는데 React에서도 동일한 개념으로 ref라는 것을 사용함. function App() { const checkBox = useRef(null); // ... return ( ); }; useRe..
1. 미들웨어(Middleware) 요청 및 응답 객체, 다음 미들웨어 함수에 대한 접근 권한을 갖는 함수. 클라이언트에서 요청이 오고 그 응답을 보내기까지 그 사이에서 실행되는 각각의 콜백함수를 의미함. POST 요청의 body를 얻어내고자 할 때, 모든 응답에 CORS 헤더를 붙여서 전송해야 할 때, 요청 헤더에 사용자 인증 정보가 담겨있는지 확인하는 등 요청을 처리하기 전에 필요한 사전 작업을 하고자 할 경우, 미들웨어를 이용하면 간단하게 구현할 수가 있음. (req, res, next) => { /* ... */ } 미들웨어는 HTTP Request 객체, Response 객체, 다음에 실행될 미들웨어를 가리키는 next 3개의 parameter를 가지는데 함수 블록 안에서 Request, Res..
1. fs/Promise API const { open } = require('fs/promises'); 동기적(Synchronous)으로 작동하는 fs 모듈도 있지만 비동기적(Asynchronous)으로 작동하는 fs 모듈을 기준으로 설명함. 2. FileHandle 인스턴스 fsPromises.open() 메서드의 반환값은 FileHandle 인스턴스로, 각각의 파일은 해당 파일을 식별하기 위한 숫자값인 File Descriptor(fd)를 가짐. 위 이미지에서 파일의 fd 값은 30. 또한, FileHandle 인스턴스는 Event Emitter의 인스턴스이고, 'close' 이벤트를 사용할 수 있음. const file = open('./test.json'); file.on('close', () ..
useEffect()는 클래스형 컴포넌트에서의 componentDidMount(), componentDidUpddate(), componentWillUnmount()메서드와 비슷한 역할을 하는hook으로, 컴포넌트가 렌더링이 된 이후(또는 제거되기 전) 특정 작업(Side Effect)을 수행하도록 할 수 있는 함수. ※ Side Effect란? 함수 내부의 어떠한 구현이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect를 가진다고 말할 수 있음. Side Effect를 가지는 함수는 입력이 같다하더라도 결과는 달라질 수 있음. 이와 반대로 Side Effect 없이 함수의 입력이 같을 때 결과도 동일한 함수를 순수 함수라고 함. ex. Fetch API, localStorage, Se..
1. Stream 네트워크를 통해 대용량의 데이터를 주고받을 상황이 생기게 되면서, 모든 데이터를 한번에 전송하고 한번에 처리하는 방식은 한계에 다다름. 수 GB나 되는 유투브 영상을 전부 받아와야 할 때까지 기다려야 한다면 얼마나 끔찍할까. 이러한 문제를 해결하기 위해 데이터를 잘게 쪼개 목적지에 데이터를 계속적으로 보내고, 목적지에서 잘게 쪼개진 데이터를 계속 처리하면 모든 데이터가 도착하기까지 기다릴 필요 없이 데이터에 접근하는 게 가능함. 이렇게 물줄기가 흐르듯이 데이터 조각들이 네트워크를 따라 흐르는 현상을 Stream이라고 함. Node.js에는 대표적으로 쓰기가 가능한 Writable Stream, 읽기가 가능한 Readable Stream, 쓰기/읽기 모두 가능한 Duplex Stream ..
1. Events # Node.js의 API들은 비동기적으로 작동하는 이벤트를 기반으로 이루어져 있음. 특정한 이벤트를 발생시키는 객체를 Emitter, 해당 이벤트가 발생할 때 실행되는 함수를 listener라고 함. 그러한 Emitter 객체들은 모두 EventEmitter의 인스턴스인데, EventEmitter는 다음과 같은 특징을 가짐. A. Event Emitter에 setImmediate()와 같은 Asynchronous 함수를 사용한 이벤트 리스너가 없는 이상 자신에 등록된 이벤트 리스너를 등록된 순서대로 실행함.(Synchronous) B. Javascript에서와 같이 listener 함수가 반환하는 값은 무시됨. 2. Event Emitter # Javascript에서 eventTarg..
JavaScript/Redux 2022. 7. 6. 11:04
1. 컴포넌트에서 Redux Store에 접근하는 방법 import store from './app/store'; import { Provider } from 'react-redux'; ReactDOM.render( , document.getElementById('root') ); 특정 컴포넌트에서 Redux Store에 접근하고자 할 경우 해당 컴포넌트를 Provider 컴포넌트로 감싸야 함. Provider 컴포넌트는 Redux Store를 store 속성으로 가지므로 우리가 구성해준 Store를 전달해주면 됨. 위 코드에서 App 컴포넌트와 그 하위 컴포넌트들은 useSelector(), useDispatch() hook을 통해 우리가 정의한 Redux Store(./app/store.js 파일)에..
JavaScript/Redux 2022. 7. 2. 17:27
1. Thunk Middleware 앞서 Reducer는 Side-effect가 없는 순수함수여야 함을 알았음. 하지만, 네트워크 통신, 데이터 내보내기, setTimeout()와 같은 타이머 등 Side-effect가 없는 애플리케이션은 존재하지 않기 때문에 Redux에서 Side-effect를 다룰 수 있는 방법이 필요함. 이러한 Side-effect를 처리하기 위해 disptach()가 Store에 작업을 전달하기 전에 특수한 일을 할 수 있도록 disptach를 커스텀하는 함수인 Middleware라는 개념이 도입됨. Middleware는 UI 컴포넌트와 Store의 연결 다리 역할을 하기 때문에 Middleware에는 일반 객체가 아닌 값(ex. Promise)이 전달될 수 있고(순수함수일 필요..
JavaScript/React 2022. 7. 2. 14:28
1. 변수 State 선언하기 가장 기본적인 hook으로, 클래스형 컴포넌트에서만 가능했던 가변적인 상태를 함수형 컴포넌트에서도 가능하게 함. const [ count, setCount ] = useState(initialValue); useState(initialValue)로 state 초기값을 설정할 수 있는데 initialValue는 state의 초기값으로 설정할 값을 넣어주면 됨. useState() 함수를 호출하면 ① state 변수(count)와 ② state를 갱신할 수 있는 함수(setCount) 배열을 반환함. // 1. 함수형 컴포넌트의 state 초기화 const [count, setCount] = useState(0); // 2 . 클래스형 컴포넌트의 state 초기화 class E..
JavaScript/React 2022. 7. 1. 18:15
1. useRef() 사용하기 React는 Virtual DOM을 사용해 요소를 한꺼번에 렌더링하므로 DOM을 직접 조작할 때보다 속도가 빠르지만, 요소 focus, 미디어 조작, 애니메이션 적용 등 DOM 요소의 주소값을 활용해야 하는 경우 DOM을 조작할 수밖에 없음. 그럴 때 사용 가능한 Hook이 useRef(). A. 특정 DOM 요소 선택하기 javascript에서 DOM 요소를 선택하기 위해 Element.querySelector(), Element.getElementById()같은 메서드를 사용하는데 React에서도 동일한 개념으로 ref라는 것을 사용함. function App() { const checkBox = useRef(null); // ... return ( ); }; useRe..
JavaScript/Redux 2022. 6. 28. 19:47
1. Slice Reducer 구성하기 export default function appReducer(state = initialState, action) { switch (action.type) { // Reducer를 1개만 정의했는데도 코드가 무척 장황함 case 'todos/todoAdded': { return { ...state, todos: [ ...state.todos, { id: nextTodoId(state.todos), text: action.payload, completed: false } ] } } default: return state } } Reducer에 추가하는 로직이 많아지면 ① switch 문에 여러 개의 case를 작성해야 할 뿐만 아니라, Immutable하게 Stat..
JavaScript/Node.js 2022. 6. 24. 19:51
1. 미들웨어(Middleware) 요청 및 응답 객체, 다음 미들웨어 함수에 대한 접근 권한을 갖는 함수. 클라이언트에서 요청이 오고 그 응답을 보내기까지 그 사이에서 실행되는 각각의 콜백함수를 의미함. POST 요청의 body를 얻어내고자 할 때, 모든 응답에 CORS 헤더를 붙여서 전송해야 할 때, 요청 헤더에 사용자 인증 정보가 담겨있는지 확인하는 등 요청을 처리하기 전에 필요한 사전 작업을 하고자 할 경우, 미들웨어를 이용하면 간단하게 구현할 수가 있음. (req, res, next) => { /* ... */ } 미들웨어는 HTTP Request 객체, Response 객체, 다음에 실행될 미들웨어를 가리키는 next 3개의 parameter를 가지는데 함수 블록 안에서 Request, Res..
JavaScript/Node.js 2022. 6. 22. 19:42
1. fs/Promise API const { open } = require('fs/promises'); 동기적(Synchronous)으로 작동하는 fs 모듈도 있지만 비동기적(Asynchronous)으로 작동하는 fs 모듈을 기준으로 설명함. 2. FileHandle 인스턴스 fsPromises.open() 메서드의 반환값은 FileHandle 인스턴스로, 각각의 파일은 해당 파일을 식별하기 위한 숫자값인 File Descriptor(fd)를 가짐. 위 이미지에서 파일의 fd 값은 30. 또한, FileHandle 인스턴스는 Event Emitter의 인스턴스이고, 'close' 이벤트를 사용할 수 있음. const file = open('./test.json'); file.on('close', () ..
JavaScript/React 2022. 6. 17. 09:49
useEffect()는 클래스형 컴포넌트에서의 componentDidMount(), componentDidUpddate(), componentWillUnmount()메서드와 비슷한 역할을 하는hook으로, 컴포넌트가 렌더링이 된 이후(또는 제거되기 전) 특정 작업(Side Effect)을 수행하도록 할 수 있는 함수. ※ Side Effect란? 함수 내부의 어떠한 구현이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect를 가진다고 말할 수 있음. Side Effect를 가지는 함수는 입력이 같다하더라도 결과는 달라질 수 있음. 이와 반대로 Side Effect 없이 함수의 입력이 같을 때 결과도 동일한 함수를 순수 함수라고 함. ex. Fetch API, localStorage, Se..
JavaScript/Node.js 2022. 6. 16. 22:43
1. Stream 네트워크를 통해 대용량의 데이터를 주고받을 상황이 생기게 되면서, 모든 데이터를 한번에 전송하고 한번에 처리하는 방식은 한계에 다다름. 수 GB나 되는 유투브 영상을 전부 받아와야 할 때까지 기다려야 한다면 얼마나 끔찍할까. 이러한 문제를 해결하기 위해 데이터를 잘게 쪼개 목적지에 데이터를 계속적으로 보내고, 목적지에서 잘게 쪼개진 데이터를 계속 처리하면 모든 데이터가 도착하기까지 기다릴 필요 없이 데이터에 접근하는 게 가능함. 이렇게 물줄기가 흐르듯이 데이터 조각들이 네트워크를 따라 흐르는 현상을 Stream이라고 함. Node.js에는 대표적으로 쓰기가 가능한 Writable Stream, 읽기가 가능한 Readable Stream, 쓰기/읽기 모두 가능한 Duplex Stream ..
JavaScript/Node.js 2022. 6. 16. 20:59
1. Events # Node.js의 API들은 비동기적으로 작동하는 이벤트를 기반으로 이루어져 있음. 특정한 이벤트를 발생시키는 객체를 Emitter, 해당 이벤트가 발생할 때 실행되는 함수를 listener라고 함. 그러한 Emitter 객체들은 모두 EventEmitter의 인스턴스인데, EventEmitter는 다음과 같은 특징을 가짐. A. Event Emitter에 setImmediate()와 같은 Asynchronous 함수를 사용한 이벤트 리스너가 없는 이상 자신에 등록된 이벤트 리스너를 등록된 순서대로 실행함.(Synchronous) B. Javascript에서와 같이 listener 함수가 반환하는 값은 무시됨. 2. Event Emitter # Javascript에서 eventTarg..