livlog

the old process -> wasteful Offloading in Node.js refers to the practice of delegating certain tasks to separate processes or threads, instead of executing them in the main event loop of Node.js. The purpose of offloading is to improve the performance and scalability of Node.js applications, especially when dealing with heavy computational tasks or I/O operations. There are different ways to ach..

Open Weather Map API I will use the free option to build an app. Before starting to build, I will check this API first with Postman Put API key and other keys then we can get the values. Now make the project and components first to show the API data later. import React, { createContext } from "react"; export const WeatherContext = createContext({}); export default function WeatherProvider(childr..

Organize the directory first. To make a table we make cell and row jsx files. We will put the selection of time near the timetable so for that, we will make an array of times. Use Material-ui to make a table format. import React from "react"; import { TableContainer, Typography, Table, TableHead, TableBody, TableRow, TableCell, } from "@mui/material"; const hourData = Array.from({ length: 11 }, ..

In react, we try to use 'Ref' instead of using 'id'. import React, { useRef } from "react"; import "./draggable.css"; export default function Draggable(children, handleRef, onMove) { const dragRef = useRef(null) return ( {children} ) } In this code, we use 'useRef' to make use of 'id' in regular code. Element.getBoundingClientRect() getBoundingClientRect() Return value The returned value is a DO..

The goals 💪🏻Handling Async Tasks with Redux ✌🏻Where to Put Our Code 👍🏻The Redux DevTools Sigining Provider in index.js so we can use it everywhere. When we try to make toggle button, we can use 'useSelector'. In store folder, we can organize the function we need separated by the types. createSlice A function that accepts an initial state, an object of reducer functions, and a "slice name", and a..

The goals 💪🏻What is Redux? ✌🏻Redux Baisics & Using Redux with React 👍🏻Redux Toolkit When we use the reducer function for the first time, since it doesn't know the initial state, it can't read the state and occur some errors. So we should give the initial value to the state when we use the reducer function for the first time. So if we set the value and run the code, then we can see it works well...

When to mock API? Let's look at the most common reasons to mock an API. Development Software is often being developed in an agile, competitive environment: shifting deadlines, parallel implementations, continuous delivery. Sometimes waiting on the API to be done is simply not an option. Most likely you are using some sort of mocking already: static fixtures, hard-coded state, or a third-party li..

Onsen UI Ant Design UI React Sementic Bootstrap Material UI Tailwind CSS React Spring Framer Motion

The goals 💪🏻Check around 20 libraries of React ✌🏻Understand React through library How to choose library Emontion Sources https://bundlephobia.com/ Bundlephobia | Size of npm dependencies Bundlephobia helps you find the performance impact of npm packages. Find the size of any javascript package and its effect on your frontend bundle. bundlephobia.com

Hooks UseEffect (Hook) Custom Hooks Composition 컴포넌트 내에서 컴포넌트를 모아서 출력하는 것 HOC Memoization Sources https://reactjs.org/docs/hooks-intro.html Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org https://reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces reactjs.org https://reactjs.org/docs/compositio..