Script

Custom Hook이란? 예를들어, input을 구현하고 useState로 각 input의 value를 관리하는 코드가 있다고 가정해보자. 이때, input의 개수가 증가할수록 useState와 이벤트핸들러도 같이 증가하고 코드의 불필요한 중복이 생겨나게 될 것이다. 이를 위해 리액트에서 제공하는 useState, useEffect 같은 내장 훅을 사용해서 사용자만의 훅을 만드는 것을 말한다. custom hook의 예시- useInput 커스텀 훅을 사용할때는 use~~라고 명명하는 컨벤션을 따른다. 여기서는 input에 관한 커스텀훅을 만들 것이므로 useInput이라는 컴포넌트를 생성한다. // src/hooks/useInput.js import React, { useState } from "re..

thunk에서 Promise 다루기 extraReducers extraReducers란 reducer에서 바로 구현되지 않는 기타 Reducer 로직을 구현할 때 사용하는 기능이다. 보통 thunk 함수를 사용할 때 extraReducers를 사용한다. 이때 통신 진행중,실패,성공에 대한 케이스를 모두 상태로 관리하는 로직을 구현한다. 서버와의 통신은 100% 성공하는 것이므로 각 경우에 맞게 서비스가 어떻게 동작할지 정해주어야 한다. pending, fullfilled, rejected로 나눌 수 있다. 우리가 thunk 함수에서 thunkApI.fulfillWithValue(data.data)라고 작성하면 fulfilled로 디스패치 된다. action을 콘솔에 찍어보면 fullWithValue(da..

Redux 미들웨어 미들웨어란? 리덕스에서 distpatch를 하면 action이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환한다. 여기서 미들웨어를 사용하면 이 과정 사이에 우리가 하고싶은 작업들을 넣어서 기능하게 할 수 있게된다. 즉, 기능을 넣을 수 있는 중간다리 역할을 하는 것이라고 볼 수 있다. ex) 계산기 기능에서 3초뒤에 연산이 완료되도록 하는 작업 보통 우리가 리덕스 미들웨어를 사용하는 이유는 서버와의 통신의 이유가 크다. 그중에서도 많이 사용되는 것이 Redux-thunk라는 것이다. thunk thunk란? thunk를 사용하면 우리가 dispatch를 할 때 단순 객체가 아닌 함수를 dispatch 할 수 있게 된다. 따라서 함수 안에 하고자 하는 작업을 넣을 수 있고,..

TCP - TCP는 두 컴퓨터 간에 데이터를 주고받는 신뢰성 있는 양방향 스트림을 제공한다. - 인터넷 서비스와 애플리케이션은 TCP를 전송 메커니즘으로 사용하지만, 기능별로 특정한 자신만의 프로토콜을 갖는다. HTTP - HTTP는 웹 브라우저와 서버에 사용되는 간단한 프로토콜이다. - 사용자가 링크를 클릭하면 브라우저는 서버 80번 포트에대해 TCP/IP 연결을 열고 , 특정 페이지를 요청하는 짧은 메시지를 보낸다. 텔넷과 SSH: 원격 로그인 텔넷 텔넷(telnet)이란 사용자의 컴퓨터에서 네트워크를 이용하여 원격지에 떨어져 있는 서버에 접속하여 자료를 교환할 수 있는 프로토콜을 말한다. 텔넷은 통신(tel)과 네트워크(net)라는 두 단어의 축소이며 인터넷에서 사용되는 주요 네트워크 프로토콜 중 ..

Axios Axios란? 공식문서에 따르면 axios란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있다. 다시말해, http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하면 되겠다. Axios 설치 yarn add axios Axios를 사용하기 위해 지난에 배운 json-server를 가동시켜 주자. 예시를 위해 아래와 같이 설정해주었다. { "todos": [ { "id": "1", "title": "react" } ] } GET Axios get get은 서버의 데이터를 조회할 때 사용한다. 기본적인 사용법은 아래와 같다. // url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있다. // config는 ax..

1. json-server란? json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지이다. json-server를 사용하는 이유는 BE에서 실제 DB와 API Server가 구축될 때까지, FE 개발에 임시적으로 사용할 mock data를 생성하기 위함이다. 설치하기 yarn add json-server 2. json-server 사용하기 json-server가 간단한 패키지이긴 하지만, 말그대로 서버이다. 따라서 리액트와는 별개로 따로 실행을 해줘야 한다. 리액트도 start 하고, json-server도 start 해야 한다는 것이다. 그래야만 리액트와 json-server가 서로 통신할 수 있다. json-server 실행하기 yarn json-server --watch db...