전체 글

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

1. 중앙값 구하기 정답 function solution(array) { return array[Math.floor(array.sort((a,b)=>b-a).length/2)]; } 풀이 배열안의 값을 크기의 순서대로 정렬 했을 때 중앙값을 구해야 하므로 우선 sort를 이용해 array를 내림차순 이나 오름차순 정렬 해준다. 그 후 배열의 길이를 2로 나누고 Math.floor 메소드를 이용해 값을 내림 해준다. 그 내림한 값은 array 의 index 번호로 들어가게 되고 중앙값을 리턴하게 된다. 정리 어떠한 배열의 중앙값을 구할 때는 배열안의 값들을 정렬해준 뒤 중앙값을 구하면 쉽게 구할 수 있다. 2. 문자 반복 출력하기 정답 function solution(my_string, n) { let a..

1. 피자 나눠 먹기 (3) 정답 function solution(slice, n) { return Math.ceil(n / slice) } 풀이 어찌됐든 n명의 사람이 slice 조각 만큼 자른 피자를 한 조각 이상씩 먹어야 하므로 못 먹는 사람이 존재해선 안된다. 10명의 사람이 7조각으로 자른 피자를 먹는다고 가정했을 때 최소 2판이 필요하다. 이는 10/7 = 1.xx 가 나오게 될 것이다. 여기서 key point 는 1.xx 에서 Math.ceil 이라는 올림 메소드를 사용해 피자가 최소 몇판이 필요한지를 구할 수 있게 된다. 그러므로 답은 Math.ceil(n/slice)을 return 시켜주면 된다. 정리 올림 메소드: Math.ceil() 반올림 메소드: Math.round() 내림 메소..

1. 나이 출력 정답 function solution(age) { var answer = 0; answer = 2022 - age +1; return answer; } 풀이 2022년 기준이므로 2022에 나이를 빼주고 1을 더해줘야 원하는 값이 나오게 된다. 2. 양꼬치 정답 function solution(n, k) { let mok = Math.floor(n / 10) return ((k - mok) * 2000) + (n * 12000); } 풀이 Math.floor 메소드를 사용해 몫을 구해주고 몫을 음료 개수와 빼줘 가격을 낮춰 음료 가격을 구해주고 인분과 12000을 곱해 양꼬치 가격을 구해줘 둘이 더한 값을 출력해 주었다. 3. 두수의 곱 정답 function solution(num1, n..

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를 통해서 어떤 로깅을 하려 해요. 그렇다면 우..