React

Next.js를 사용함에 앞서 React.js 와 Next.js 의 차이에 대해 알아봅시다.React.js 와 Next.js 는 두 가지의 큰 차이가 있습니다. 1. Framwork vs LibraryReact는 JavaScript 기반의 라이브러리이고 Next.js는 React 기반의 프레임워크입니다. 라이브러리와 프레임워크 궁극적인 차이는 "제어 흐름 주도권을 누가 가지고 있느냐" 입니다. 제어 흐름 주도권이란 무엇인가?프레임워크는 개발자에게 응용 프로그램을 만들기 위한 뼈대를 제공하며, 제어 흐름을 프레임워크가 관리합니다. 그에 반해 라이브러리는 개발자가 필요한 기능을 호출하여 사용하며, 제어흐름은 개발자가 직접 관리해야 합니다. 다시 말해, 프레임워크(Next)는 제어권을 가지고 있지만 라이브러리..

1. Throttling & Debouncing이란? Throttling 이란? 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것 주로 사용되는 예: 무한스크롤 Debouncing 이란? 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하도록 하는 것 주로 사용되는 예: 입력값 실시간 검색, 화면 resize 이벤트 메모리 누수(Memory Leak)란? 필요하지 않은 메모리를 계속 점유하고 있는 현상 setTimeout 이 메모리 누수(Memory Leak)를 유발하는 지? 상황에 따라 메모리 누수를 일으킬 수도 있..

1. React Query란? (1) 개념 리액트 쿼리란? React Query는 React 애플리케이션에서 데이터를 관리하기 위한 JavaScript 라이브러리입니다. 이 라이브러리는 서버에서 데이터를 가져오고 업데이트하는 등의 비동기 작업을 쉽게 다룰 수 있도록 도와줍니다. React Query는 상태 관리, 캐싱, 재시도, 인터벌 업데이트 등 다양한 기능을 제공하여 애플리케이션의 성능을 최적화하고 사용자 경험을 향상시킬 수 있도록 도와줍니다. (2) 기존 미들웨어의 한계 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-Saga 등 미들웨어를 채택해서 사용할 수 있지만 다음과 같은 문제가 있습니다. 보일러 플레이트 : 코드량이 너무 많아요. 규격화 문제 : R..

1. Custom hook이란? (1) input 갯수만큼 늘어나는 useState, event handler 들 // src/App.jsx import React from "react"; import { useState } from "react"; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(""); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useState(""); c..

1. thunk에서 Promise 다루기 json-server를 띄우고 Thunk 함수를 통해서 API를 호출하고 서버로부터 가져온 값을 Store에 dispatch 하는 기능입니다. 시작에 앞서 아래 작업을 먼저 진행해주세요. 1. json-server 설치 및 서버 가동 (db.json) { "todos": [] } 2. Slice로 todos 모듈 추가 구현 // src/redux/modules/todosSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { todos: [], }; export const todosSlice = createSlice({ name: "todos", initialState, redu..

1. Redux 미들웨어 (1) 미들웨어란? 리덕스에서 dispatch를 하면 action 이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환합니다. 근데 미들웨어를 사용하면 이 과정 사이에 하고 싶은 작업들을 넣어서 할 수 있습니다. 만약 counter 프로그램에서 더하기 버튼을 클릭했을 때 바로 +1를 더하지 않고 3초를 기다렸다가, +1이 되도록 구현하려면 미들웨어를 사용하지 않고서는 구현할 수 없습니다. 왜냐하면 dispatch가 되자마자 바로 action이 리듀서로 달려가서 새로운 state를 반환해버리기 때문이죠. 즉 여기서 “3초를 기다리는 작업" 이 작업을 미들웨어가 해주는 것 입니다. 보통 리덕스 미들웨어를 사용하는 이유는 서버와의 통신을 위해서 사용하는 것이 대부분이고, 또한 ..

1. axios interceptor의 개념과 필요성 (1) 상황을 통해 살펴보는 interceptor의 필요성 axios.get(""); axios.post("", todo); axios.delete(`http://localhost:3001/todos/${todoId}`); 이렇게 호출하는 부분이 리액트 앱에 300개 정도 존재한다고 가정해 봅시다. 그런데, 며칠 후 어떠한 이유 때문에 호출하는 서버가 변경되었어요. 변경 전 : http://localhost:3001 변경 후 : htto://localhost:4000 자, 그러면 300군데를 모두 찾아서 변경해줘야 되겠죠. 엄청난 인적 리소스 낭비입니다. 또한, 매번 요청을 할 때마다 console.log를 통해서 어떤 로깅을 하려 해요. 그렇다면 우..

1. Axios (1) Axios란? 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있습니다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하시면 됩니다. (2) Axios 설치하기 CRA를 통해서 새로운 프로젝트를 생성하고, 터미널에 아래의 명령어를 입력해서 axios를 설치합니다. yarn add axios 2. json-server 설정 API 서버는 json-server를 사용하겠습니다. 프로젝트 내에서 3001 포트로 서버를 가동시키겠습니다. (1) 테스트용 db.json 설정 { "todos": [ { "id": "1", "title": "react" } ] } 3. GET (1) Axios ..

1. 리덕스툴킷이란? (1) 리덕스툴킷 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 입니다. 줄여서 RTK 라고도 합니다. (2) 즉 새로운 것이 아닙니다. 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 일일히 손으로 만들어 줘야 했던 ducks 패턴의 요소들이 어느정도 자동화 되었습니다. 컴포넌트에서 useSelector를 통해서 사용하는 것은 모두 똑같습니다. 바뀐 부분은 그저 모듈 파일 뿐이죠. 리덕스 툴킷은 리덕스의 구조나 패러다임이 모두 똑같습니다. 2. 일반 리덕스와 ..

1. react-router-dom 사용 방법 1. react-router-dom이란? 페이지를 구현할 수 있게 해주는 패키지 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하는 데 사용되는 라이브러리입니다. React 애플리케이션에서 페이지 간의 전환 및 URL에 대한 동적인 라우팅을 처리하는 데 도움이 됩니다. 2. react-router-dom 설치하기 (1) 패키지 설치 vscode 터미널에서 아래 코드를 입력해서 패키지를 설치할 수 있습니다. yarn add react-router-dom 3. react-router-dom 사용하기 (1) 사용방법 순서 아래 순서대로 코드를 작성하여, react-router-dom을 사용해보겠습니다. 페이지 컴포넌트 생성 Router.js 생성 및 r..