React에서 Side Effect는 보통 useEffect() 내부에 넣어 처리하는데 useEffect()는 dependency로 지정한 State가 변경되고 렝더링까지 완료된 이후에 실행됨. 이러한 특성을 이용하면 어떠한 상호작용을 했을 때 알림으로 나타나는 Toast 알림을 쉽게 구현할 수 있음. 일정 시간 후에 토스트를 제거해야 하므로 setTimeout() 타이머를 사용해야 하는데, 타이머 API는 Side Effect이므로 useEffect()에서 처리해줘야 함. 1. Toast 생성 이벤트 핸들러 만들기 토스트는 상위, 하위 컴포넌트에서 상호작용이 발생했을 때 나타나야 하므로 최상위 컴포넌트 App에 두는 편이 좋음. App 컴포넌트에서 토스트를 담을 State를 만들고 토스트를 추가해주는 ..
1. Nullish 병합 연산자 a ?? b a가 null 또는 undefined이면 b를 반환, 아니라면 a를 그대로 반환 어떠한 값이 null, 문자열 중에 하나일 때, 빈 문자열도 falsy값이므로 아래 코드처럼 if 문을 단순하게 작성해주면 안 됨. if (checkAll) { // checkAll이 문자열일 때 실행...? } typeof 연산자를 이용해 해당 변수가 문자열인지 확인하는 방법도 가능하지만 if (typeof checkAll === 'string') { // checkAll이 문자열일 때 실행 } ES6에서 도입된 Nullish 병합 연산자를 이용하면 조금 더 간단하게 작성해줄 수가 있음. if (checkAll ?? false) { // checkAll이 문자열일 때 실행 } [..
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', () ..
JavaScript/React 2022. 7. 9. 20:40
1. Props를 State에 바로 할당할 때는 주의해야 함 # A. 예시1 function Task(props) { const [dueDate, setDueDate] = useState(props.dueDate); // Props를 State의 초기값으로 할당하고 있음 const [title, setTitle] = useState(props.title); // Props를 State의 초기값으로 할당하고 있음 const onChange = (e) => { /* ... */ }; return ( /* ... */ ); } 컴포넌트가 TaskList > TaskListSection > Task 구조로 되어있을 때, Task에서 할일 만료일 dueDate를 변경하면 onChange 이벤트 핸들러에 의해 St..
JavaScript/React 2022. 7. 9. 16:24
React에서 Side Effect는 보통 useEffect() 내부에 넣어 처리하는데 useEffect()는 dependency로 지정한 State가 변경되고 렝더링까지 완료된 이후에 실행됨. 이러한 특성을 이용하면 어떠한 상호작용을 했을 때 알림으로 나타나는 Toast 알림을 쉽게 구현할 수 있음. 일정 시간 후에 토스트를 제거해야 하므로 setTimeout() 타이머를 사용해야 하는데, 타이머 API는 Side Effect이므로 useEffect()에서 처리해줘야 함. 1. Toast 생성 이벤트 핸들러 만들기 토스트는 상위, 하위 컴포넌트에서 상호작용이 발생했을 때 나타나야 하므로 최상위 컴포넌트 App에 두는 편이 좋음. App 컴포넌트에서 토스트를 담을 State를 만들고 토스트를 추가해주는 ..
JavaScript 2022. 7. 6. 21:45
1. Nullish 병합 연산자 a ?? b a가 null 또는 undefined이면 b를 반환, 아니라면 a를 그대로 반환 어떠한 값이 null, 문자열 중에 하나일 때, 빈 문자열도 falsy값이므로 아래 코드처럼 if 문을 단순하게 작성해주면 안 됨. if (checkAll) { // checkAll이 문자열일 때 실행...? } typeof 연산자를 이용해 해당 변수가 문자열인지 확인하는 방법도 가능하지만 if (typeof checkAll === 'string') { // checkAll이 문자열일 때 실행 } ES6에서 도입된 Nullish 병합 연산자를 이용하면 조금 더 간단하게 작성해줄 수가 있음. if (checkAll ?? false) { // checkAll이 문자열일 때 실행 } [..
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', () ..