짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법 (ex. 인스타그램 좋아요 버튼)

🌳 Throttling 이란?

짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것

🌳 Debouncing 이란?

짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하도록 하는 것 주로 사용되는 예: 입력값 실시간 검색, 화면 resize 이벤트

메모리 누수(Memory Leack)란? 필요하지 않은 메모리를 계속 점유하고 있는 현상

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

export default function Home() {
    const navigate = useNavigate();
    let timerId = null;

      const throttle = (delay) => {
        if (timerId) {
            // timerId가 있으면 바로 함수 종료
              return;
        }
          console.log(`API요청 실행! ${delay}ms 동안 추가요청 안받음`);
          timerId = setTimeout(() => {
            console.log(`${delay}ms 지남 추가요청 받음`);
              timerId = null;
        }, delay);
    };

      const debounce = (delay) => {
        if(timerId) {
            // 할당되어 있는 timerId에 해당하는 타이머 제거
              clearTimeout(timerId);
        }
          timerId = setTimeout(()=>{
            // timerId에
        })
    }
}

🌳 lodash 적용해보기

import { useState, useCallback } from "react";
import _ from "lodash";

function App() {
    const [searchText, setSearchText] = useState("");
      const [inputText, setInputText] = useState("");

      const handleSearchcText = useCallback(
        _.debounce((text) => setSearchText(text), 2000),
          []
    );

      const handleChange = (e) =>{
        setInputText(e.target.value);
          handleSearchText(e.target.value);
    };

      return (
        <div style={{paddingLeft: 20, paddingRight: 20,}}>
            <h1>디바운싱 예제</h1>
            <br />
            <input
              placeholder="입력값을 넣고 디바운싱 테스트를 해보세요."
              style={{ width: "300px" }}
              onChange={handleChange}
              type="text"
            />
            <p>Search Text: {searchText}<p>
            <p>Input Text: {inputText}</p>
        </div>
    );
}
export default App;

리액트 쿼리(React Query)는 리액트 애플리케이션 데이터 관리를 위한 상태 관리 라이브러리입니다. 리애트 쿼리는 API 호출, 상태 캐싱, 데이터 업데이트 및 동기화, 오류처리 등을 처리하는 간편하고 직관적인 방식을 제공합니다.

🌳 주요 키워드

🌱 Query

어떤 데이터에 대한 요청을 의미.

🌱 Mutation

어떤 데이터를 변경 (추가, 수정, 삭제)

🌱 Query Invalidation

Query를 invalidation. 즉, 무효화 시킨다는 의미.

무효화 시킨다는 것은? 기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있음. 그렇기 때문에 '최신 상태가 아닐 수'있다. → 기존의 쿼리를 무효화 시킨 후 최신화 시켜야 함.

react-query 설치 yarn add react-query

*QueryClientProvider *: 데이터를 읽어오는 기능(QueryClient)을 애플리케이션 전체에 주입하도록 하는 API

// App.jsx

import React from "react";
import Router from "./shared/Router";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

const App = () => {
    return (
        <QueryClientProvider client={queryClient}>
            <Router />;
        </QueryClientProvider>
    );
};

export default App;

🌳 조회 기능

// src>api>todos.js

import axios from "axios";

// 모든 todos를 가져오는 api
const getTodos = async () => {
    const response = await axios.get("http://localhost:3000/todos");
      return response;
};

export { getTodos };

// Todolist.jsx

import React from "react";

import { getTodos } from "../../../api/todos";
import { useQuery } from "react-query";

function TodoList({ isActive }){
      // useQuery(Querykey, 비동기 함수)
    const { isLoading, isError, data } = useQuery("todos", getTodos);

    if (isLoading) {
        return <p>로딩중입니다</p>;
    }

      if (isError) {
        return <p>오류가 발생하였습니다</p>;
    }

      return (
        .
          .
          .
    )
}

useQuery의 인자에 대해

첫 번째 인자 - Query Keys

• refetching 하는 데에 쓰인다. (invalidate)
• 캐싱(caching) 처리를 하는 데에 쓰인다.
• 애플리케이션 전체 맥락에서 이 쿼리를 공유하는 방법으로 쓰인다. (어느 컴포넌트 곳곳에 뿌려져 있어도 같은 key면 같은 쿼리 및 데이터를 보장한다.)
• 배열의 형태일 수도 있고, nested 객체일 수도 있다.
• 모든 Query keys는 Unique 해야 한다.

두 번째 인자 - 쿼리 함수

• 쿼리 함수는 promise 객체를 return 한다.
• promise 객체는 반드시 data를 resolve하거나 에러를 내야 한다. resove는 정상적으로 통신이 되었음을 의미.

useQuery의 결과물 - 객체

• 시작하면, isLoading이 true가 된다.
• 조회 결과 오류가 나면 isError가 true가 된다. isLoading은 false가 된다.
• 조회 결과 정상이 되면 isSuccess가 true가 된다. isLoading은 false가 된다.

🌳 추가 기능

// src > api > todos.js

import axios from "axios"

// .env를 활용하는게 더 바람직 함
const SERVER_URI = "http://localhost:4000";

const getTodos = async () => {
    const response = await axios.get(`${SERVER_URI}/todos`);
      return response.data
};

const addTodo = async (newTodo) => {
    await axios.post(`${SERVER_URI}/todos`, newTodo);
}

export {getTodos, addTodo};

// Input.jsx

import { addTodo } from "../../../api/todos";
import { QueryClient, useMutation } from "react-query";

function Input(){
    const queryClient = new QueryClient();

      const mutation = useMutation(addTodo, {
        onSuccess: () => {
            // Invalidate and refresh
              // todos라는 이름으로 만들었던 query를 invalidate 할 수 있음
              queryClient.invalidateQueries("todos");
        },
    });
}

invalidate의 과정 Input.jsx에서 값 입력으로 인해 서버 데이터가 변경됨 → onSuccess가 일어나면 기존의 Query인 "todos"는 무효화 → 새로운 데이터를 가져와서 "todos"를 최신화시킴 → TodoList.jsx를 갱신함 따라서 계속해서 리액트 앱은 최신 상태의 서버 데이터를 유지할 수 있게 된다.

무효화라는 뜻이 이해되지 않아서 chatGPT에게 물어본 결과 캐시된 데이터를 무효화(invalidate)시키면, 다음에 해당 데이터를 요청할 때 라이브러리는 새로운 데이터를 가져오게 됩니다. 이것은 캐시된 데이터를 사용하지 않고 서버로부터 새로운 데이터를 다시 요청하는 효과를 가지게 됩니다. 캐시된 데이터를 가져오지 않고 새로운 데이터를 강제로 다시 가져올 수 있습니다.

mutations query와는 다르게 mutation은 CUD에서 사용된다.

function App() {
    const mutation = useMutation(newTodo => {
        return axios.post('/todos', newTodo)
    })
    return (
        <div>
              {mutation.isLoading ? (
                'Adding todo...' 
            ) : (
                <>
                     {mutation.isError?(
                        <div>An error occurred: {mutation.error.message}</div>
                    ) : null}
                    {mutation.isSuccess ? <div>Todo added!</div> : null}
                    <button onClick={()=>{
                        mutation.mutate({ id: new Date(), title: 'Do Laundry'})
                    }}>
                        create Todo
                    </button>
                </>
            )}
          </div>
    )
}

mutation.mutate(인자)

• 인자는 반드시 한 개의 변수 또는 객체여야 해요.
• mutation.mutate(인자1, 인자2) → 오류

결과를 객체(object) 형태로 갖고 있다. 그 결과물 객체는 항상 아래 상태 중 하나에 속한다.

• isIdle
• isLoading
• isError
• isSuccess

리덕스에서 dispatch를 하면 action 이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환한다. → 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있다.

리덕스 미들웨어를 사용하는 이유 : 서버와의 통신

🍎 thunk

dispatch를 할 때 객체가 아닌 함수를 dispatch 할 수 있게 해준다.

dispatch (함수) → 함수실행 → 함수 안에서 dispatch (객체)

🌱 thunk 사용하기

createAsyncThunk 라는 API를 사용해서 thunk 함수를 생성할 수 있다. 이 API는 함수인데, 첫 번째 인자에는 Action Value, 두 번째 인자에는 함수가 들어간다.

두 번째 들어가는 함수에서도 인자를 꺼낼 수 있는데, 첫 번째 인자는 이 thunk 함수가 외부에서 사용되었을 때 넣은 값을 여기에서 조회할 수 있고, 두 번째 인자에서는 thunk가 제공하는 여러가지 API 기능들이 담긴 객체를 꺼낼 수 있다.

// thunk 함수는 createAsyncThunk 라는 툴킷 API를 사용해서 생성함.

export const __addNumber = createAsyncThunk(
    "ADD_NUMBER_WAIT",    
    (arg, thunkAPI)=>{},
)

// src/redux/modules/counterSlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export const __addNumber = createAsyncThunk(
    // 첫 번째 인자 : action value
      "addNumber",
      // 두 번째 인자 : 콜백함수
      (payload, thunkAPI) => {
        setTimeout(() => {
            thunkAPI.dispatch(addNumber(payload));
        }, 3000);
    }
);

const initialState = {
    number: 0,
};

const counterSlice = createSlice({
    name: "counter",
    initialState,
      reducers: {
        addNumber: (state, action) => {
            state.number = state.number + action.payload;
        },

          minusNumber: (state, action) => {
            state.number = state.number - action.payload;
        },
    },
});

export const { addNumber, minusNumber } = counterSlice.actions;
export default counterSlice.reducer;

// src/App.jsx

import React from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { minusNumber, __addNumber } from "./redux/modules/counterSlce";

const App = () => {
    const dipatch = useDispatch();
      const [number, setNumber] = useState(0);
      const globalNumber = useSelector((state) => state.counter.number);

    const onChangeHandler = (event) => {
    const { value } = event.target;
    setNumber(+value);
   };

  // thunk 함수를 디스패치한다. payload는 thunk함수에 넣어주면,
  // 리덕스 모듈에서 payload로 받을 수 있다.
  const onClickMinusNumberHandler = () => {
      dispatch(__addNumber(number));
  };

  const onClickMinusNumberHandler = () => {
      dispatch(minusNumber(number));
  };

  return (
      <div>
      <div>{globalNumber}</div>
      <input type="number" onChange={onChangeHandler} />
      <button onClick={onClickAddNumberHandler}>더하기</button>
      <button onClick={onClickMinusNuberHandler}>빼기</button>
    </div>
  );
};

export default App;

🌳 정리

• 리덕스 미들웨어를 사용하면, 액션이 리듀서로 전달되기전에 중간에 어떤 작업을 더 할 수 있다.
• Thunk를 사용하면, 객체가 아닌 함수를 dispatch 할 수 있게 해준다.
• createAsyncThunk()의 첫번째 자리에는 action value, 두번째에는 함수가 들어간다.
• 두 번째로 들어가는 함수에서 2개의 인자를 꺼내 사용할 수 있는데, 첫 번째 인자는 컴포넌트에서 보내준 payload이고, 두 번째 인자는 thunk에서 제공하는 여러가지 기능이다.

dispatch: thunk 함수안에서 dispatch를 할 때 사용 getState: thunk 함수안에서 현재 리덕스 모듈의 state 값을 사용하고 싶을 때 사용

🌳 Axios

' HTTP 클라이언트 라이브러리 ' node.js와 브라우저를 위한 Promise 기반 http 클라이언트 → http를 이용해서 서버와 통신하기 위해 사용하는 패키지

🌱 Axios 설치

yarn add axios

🌱 GET

Axios get get은 서버의 데이터를 조회할 때 사용

// url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있다.
axios.get(url[, config])    // GET

Axios config 공식문서 https://axios-http.com/kr/docs/req_config

우리가 사용하는 json-server API 명세서 확인하기 전체 정보나 상세 정보는 아래와 같이 path variable로 url을 작성

Plural routes

GET        /posts
GET        /posts/1

filter와 같은 기능을 위해서 GET 요청을 하고자할 때는 query로 보내라고 명시하고 있다.

Filter use . to access deep properies

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode

json-server에 있는 todos를 axios를 이용해서 fetching하고 useState를 통해서 관리하는 로직

// src/App.js
import React, { useEffect, useState } from "react";
import axios from "axios";

const App = () => {
    const [todos, setTodos] = useState(null);

    // axios를 통해서 get 요청을 하는 함수를 생성한다.
    // 비동기처리를 해야하므로 async/await 구문을 통해서 처리한다.
    const fetchTodos = async () => {
        const { data } = await axios.get("http://localhost:3001/todos");
          setTodos(data);    // 서버로부터 fetching한 데이터를 useState의 state로 set 한다
    };

  // 생성한 함수를 컴포넌트가 mount 됐을 때 실행하기 위해 useEffect를 사용한다.
  useEffect(() => {
    // effect 구문에 생성한 함수를 넣어 실행한다.
    fetchTodos();
  }, []);
}

🌱 POST

Axios POST

axios.post(url[, data[, config]])    // post

post는 보통 서버에 데이터를 추가할 때 사용 보통은 클라이언트의 데이터를 body 형태로 서버에 보내고자 할 때 사용.

const onSubmitHandler = async(todo) => {
    // 1. 이때 todos는 [{투두하나}]임
    await axios.post("http://localhost:3001/todos", todo);
    // 이때 서버에 있는 todos도 [{투두하나}]임

      // 근데 여기서 서버 요청이 끝나고 서버는 [{투두가}, {두개임}]

      setTodos([...todos, todo])    // 2. 만약 이게 없다면, go to useEffect
      // 4. 새로고침해서 진짜 현재 서버 데이터를 받아오기전에 상태를 똑같이 동기시켜줌
      // 5. 유저한테 서버에서 새로 받아온것처럼
}

useEffect(() => {
    fetchTodos();    // 3. 새로고침해서 여기를 다시 실행해줘야 서버값이 새로 들어옴 [{투두가}, {두개임}]
}, []);

🌱 DELETE

Axios delete

axios.delete(url[, config])    // Delete

DELETE는 저장되어 있는 데이터를 삭제하고자 요청을 보낼 때 사용.

const onClickDeleteButtonHandler = (todoId) => {
    axios.delete(`http://localhost:3001/todos/${todoId}`)
}

🌱 PATCH

Axios patch

axios.patch(url[, data[, config]])    // PATCH

patch는 보통 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드이다. http 환경에서 서로가 한 약속이자 문맥이기 때문에, 수정을 하고자 반드시 patch, put을 써야만 하는 것은 아니지만 이러한 약속들을 대부분의 개발자들이 지키고 있다.

const [editTodo, setEditTodo] = useState({
    title: "",
});

const onClickEditButtonHandler = (todoId, edit) => {
    axios.patch(`http://localhost:3001/todos/${todoId}`, edit)
}

🌳 Fetch

Fetch는 ES6부터 도입된 Javascript 내장 라이브러리. Promise 기반 비동기 통신 라이브러리.

fetch 단점

• 미지원 브라우저 존재
• 개발자에게 불친절한 response
• axios에 비해 부족한 기능

🌱 fetch와 axios의 차이점

데이터 읽어오기

fetch

const url = "http://jsonplaceholder.typicode.com/todos";
fetch(url)
.then((response) => response.json())    // 한 번 더 json화
.then(console.log);

fetch().then을 한 상태여도 여전히 JSON 포맷의 응답이 아니기 때문에 response.json()을 한 번 더 해주는 과정이 필요하다. 따라서, fetch로 데이터를 요청하는 경우 두 개의 .then()이 필요하다.

axios

const url = "http://jsonplaceholder.typicode.com/todos";
axios.get(url).then((response) => console.log(response.data));

axios는 응답(response)을 기본적으로 JSON 포맷으로 제공한다.

에러 처리 fetch

const url = "https://jsonplaceholder.typicode.com/todos";

fetch(url)
    .then((response)=>{
        if(!response.ok) {
            throw new Error(
                `This is an HTTP error: The status is ${response.status}`
            );
        }
          return response.json();
    })
    .then(console.log)
    .catch((err) => {
        console.log(err.message);
    });

axios

const url = "https://jsonplaceholder.typicode.com/todos";

axios
    .get(url)
    .then((response) => console.log(response.data))
    .catch((err) => {
        console.log(err.message);
    })

axios.get() 요청이 반환하는 Promise 객체가 갖고 있는 상태코드가 2xx의 범위를 넘어가면 거부(reject)를 한다. 따라서, 곧바로 catch() 부분을 통해 error handling이 가능하다.

const url = "https://jsonplaceholder.typiicode.com/todos";

// axios 요청 로직
axios
    .get(url)
    .then((response) => console.log(response.data))
    .catch((err) => {

      // 오류 객체 내의 response가 존재한다 = 서버가 오류 응답을 주었다
      if (err.response){
            const { status, config } = err.response;

            // 없는 페이지
            if (status === 404) {
                console.log(`${config.url} not found`);
            }
            // 서버 오류
            if (status === 500) {
                console.log("Server error");
            }

            // 요청이 이루어졌으나 서버에서 응답이 없었을 경우
      } else if (err.request) {
          console.log("Error", err.message);
        // 그 외 다른 에러
      } else {
          console.log("Error", err.message);
      }
    });

fetch의 경우, catch()가 발생하는 경우는 오직 네트워크 장애 케이스이다. 따라서 개발자가 일일히 then() 안에 모든 케이스에 대한 HTTP 에러 처리를 해야한다.

🍎 axios interceptor의 개념과 필요성

axios interceptor는 다음 두 상황에서 흐름을 가로채서 어떠한 코드 상의 관여를 할 수 있게 한다.

1. 요청(request)이 처리되기 전(= http request가 서버에 전달되기 전)
2. 응답(response)의 then(=성공) 또는 catch(=실패)가 처리되기 전

아래와 같은 요청 및 응답시에 필요한 작업들을 한꺼번에 처리.

• 요청 헤더 추가
• 인증 관리
• 로그 관련 로직 삽입
• 에러 핸들링

🌳 instance 만들기, baseURL 설정하기

const data = axios.get("http://localhost:4000/")

인스턴스(instance) : custom 설정이 되어 있지 않은 완전히 plain axios, 순수 axios

// src > axios > api.js

import axios from "axios";

// axios.create의 입력값으로 들어가는 객체는 configuration 객체이다.

const instance = axios.create({
    baseURL : "http://localhost:4000",
});

export default instance;

참고주소 https://axios-http.com/docs/req_config

axios.create는 Axios 라이브러리에서 사용되는 메서드 중 하나이다. 이 메서드를 사용하면 Axios의 인스턴스를 생성할 수 있으며, 이를 통해 HTTP 요청을 보내고 응답을 받을 수 있다.

// App.jsx

import {useEffect} from "react";
import api from "./axios/api";

function App() {
    useEffect(()=>{
        api
            .get("/cafe")
              .then((res) => {
                console.log("결과 => ", res.data)
            })
              .catch(() => {
                console.log("오류가 발생하였습니다!")
            });
    }, []);

      return <div>axios 예제</div>;
}

export default App;

서버의 정보가 http://localhost:4000 → http://localhost:5000 변경이 되어도, api.js 파일만 수정해주면 된다.

🌳 request, response

// src > axios > api.js

import axios from "axios";

const instance = axios. create({
    baseURL: "http://localhost:4000",
});

instance.interceptors.request.use(
    function (config) {
        // 요청을 보내기 전 수행
          console.log("인터셉트 요청 성공!");
          return config;
    }
      function (error) {
        // 오류 요청을 보내기 전 수행
          console.log("인터셉트 요청 오류!");
          return Promise.reject(error);
    }
);

instance.interceptors.response.use(
    function (response) {
        console.log("인터셉트 응답 받았어요!");
          // 정상 응답
          return response;
    },

      function (error) {
        console.log("인터셉트 응답을 받지 못하였어요!");
          return Promise.reject(error);
    }
);

요청과 응답 중간에 가로채서 어떠한 작업을 수행해 주는 것을 볼 수 있다.

🌳 더 적용할 수 있는 부분

• 요청 시, content-type 적용
• token 등 인증 관련 로직 적용
• 서버 응답 코드에 대한 오류 처리(controller)
• 통신시작 및 종료에 대한 전역 상태를 관리하여 spinner, progress bar 등 구현 가능

아주 간단한 DB와 API 서버를 생성해주는 패키지. 사용하는 이유: Backend에서 실제 DB와 API Server가 구축될 때까지 Frontend 개발에 임시적으로 사용할 mock data를 생성하기 위함.

🌱 설치

yarn 또는 npm을 이용해서 설치 yarn add json-server

json-server가 간단한 패키지이긴 하나, 말그대로 서버이기 때문에 리액트와는 별개로 따로 실행을 해줘야 한다. yarn json-server --watch db.json --port 4000

명령어를 입력하면, db.json이 자동으로 생성된다.

package.json에서 script는 어떤 역할을 할까? script에서 개발자가 원하는 명령어를 설정할 수 있다. script에 "start":"react-scripts start"로 등록이 되어있기 때문에 우리가 yarn start를 입력하는 것만으로도 "react-scripts start"이 실행되는 것

🍎 HTTP

웹 통신은 서버와 클라이언트간의 대화이다.

웹 통신은 약속(=프로토콜)이다

🌱 프로토콜

웹에서 서버 - 클라이언트간 주고 받은 상호간의 약속(프로토콜)을 HTTP 프로토콜이라고 한다.

🌱 요청(Request)과 응답(Response)

서버와 클라이언트가 서로 데이터를 주고 받기(대화하기) 위해서는 항상 '요청 (request)'을 해야하고 그에 따른 '응답(response)'을 준다.

🌱 URL에 대해서

• protocol
• domain(sub domain, domain name)
• resource path(path/page)
• query variable, path variable

🌱 메서드

Get - 조회 POST - 생성 PUT, PATCH - 수정(변경) DELETE - 삭제

🌱 상태코드

클라이언트가 서버에 어떤 요청(request)를 하고 나면, 서버는 그에 맞는 응답(response)을 제공한다. 그 때, 각 응답은 상태코드를 갖는다.

• 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행한다.
• 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용한다.
• 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요하다.
• 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없다.
• 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했다.

Flux 패턴은 소프트웨어 애플리케이션의 상태 관리와 데이터 흐름을 다루는 디자인 패턴 중 하나이다.

🌳 등장하게 된 이유

기존 보편적으로 사용하던 MVC 패턴(Model, View, Controller)이 View가 다양한 상호작용을 위해 여러 개의 Modal을 동시에 업데이트하고 Model 역시 여러 개의 View에 데이터를 전달하는 상황 발생. → 많은 의존성을 가지면 Model의 개수가 많아질수록 각 Model에서 발생한 이벤트가 애플리케이션 전체로 퍼져나갈 때 이를 예측하기 힘들어짐. 복잡한 데이터 흐름

MVC 패턴 Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여짐. 사용자가 View를 통해 데이터를 입력하면 View 역시 Model을 업데이트할 수 있다(양방향)

🌳 Flux 패턴에 대하여

1. 사용자 입력을 기반으로 Action 생성
2. Action을 Dispatcher에 전달
3. Store의 데이터를 변경
4. View 반영

🌱 Flux 패턴 요소

액션 (Action): 사용자 상호작용 또는 시스템 이벤트와 같은 외부 요인으로 인해 애플리케이션 상태, 데이터를 변경하기 위해 Dispatcher에게 전달되는 객체 또는 이벤트.

디스패처 (Dispatcher): 액션을 받아 상태 변경을 관리하고, 이벤트를 등록한 스토어에 전파하는 중앙 허브 역할을 하는 컴포넌트.

스토어 (Store): 애플리케이션의 상태와 비즈니스 로직을 포함하는 곳으로, 상태를 변경하고 앱의 뷰를 업데이트하기 위한 데이터 소스.

뷰 (View): 사용자 인터페이스를 표시하고 사용자 입력을 처리하는 부분.

참고 Blog https://bestalign.github.io/translation/cartoon-guide-to-flux/ https://taegon.kim/archives/5288 https://velog.io/@andy0011/Flux-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80

코드는 더 적게, 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것. 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘림 → 리덕스 툴킷을 통해 어느정도 자동화.

🌳 설치

CRA를 통해 새로운 프로젝트를 생성. 패키지 설치. yarn add react-redux @reduxjs/toolkit

Redux와 RTK의 차이점 Action Value와 Action Creator를 직접 생성해주지 않고, Slice라는 API를 통해 Action Value, Action Creator, Reducer가 하나로 합쳐졌다는 점.

// createSlice API 뼈대

const counterSlice = createSlice({    // createSlice API를 통해 슬라이스 생성
    name: '',    // 모듈 이름
      initialState : {}, // 모듈의 초기상태 값
      reducers : {},    // 모듈의 Reducer 로직, 여러개 들어갈 수 있기 때문에 객체
})

counter 만드는 예제

// src/redux/modules/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    number: 0,
}

const counterSlice = createSlice({
    name: "counter",
    initialState,
      reducers: {
          // 리듀서 안에서 만든 함수 자체가 리듀서의 로직이자, 액션크리에이터가 된다.
          // Action Value까지 함수의 이름을 따서 자동으로 생성.
        addNumber: (state, action) => {
            state.number = state.number + action.payload;
        },
          minusNumber: (state, action) =>{
            state.number = state.number - action.payload;
        },
    },
});

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export
export const { addNumber, minusNumber } = counterSlice.actions;    // reducer 객체를 의미
// reducer는 configStore에 등록하기 위해 export default
export default counterSlice.reducer;

actions 속성은 Redux Toolkit에서 생성한 슬라이스(slice) 객체에 포함된 액션 생성자 함수들을 담고 있는 객체. Redux Toolkit의 createSlice 함수를 사용하여 슬라이스를 생성하면, 해당 슬라이스의 액션 생성자 함수들이 actions 속성에 자동으로 포함된다.

configStore

// src/redux/modules/config/configStore.js
import {configureStore} from "@reduxjs/toolkit";

// slice.reducer
import counter from "../modules/counterSlice";
import todos from "../mmodules/todosSlice";

// 모듈이 여러개인 경우
// 추가할때마다 reducer 안에 각 모듈의 slice.reducer를 추가해줘야 한다.
const store = configureStore({
    reducer: { counter: counter, todos: todos },
})

export default store;

// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/config/configStore";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <Provider store={store}>
          <App />
      </Provider>
);

툴킷을 사용해서 만든 모듈을 조회하는 방식은 일반리덕스를 사용했을 때와 동일하다.

import React from "react";
import { useSelector } from "react-redux";

const App = () => {
    // Store에 있는 todos 모듈 state 조회하기
      const todos = useSelector((state) => state.todos);

      return <div>APP</div>;
};

export default App;

JavaScript Object Notation 자바스크립트 객체 문법에 토대를 둔, 문자 기반의 데이터 교환 형식

일반적인 JSON 구조는 자바스크립트 객체 리터럴 작성법을 따른다. 자바스크립트의 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 또한 가질 수 있다. 작은 따옴표('')가 아닌 큰 따옴표("")만 허용된다.

🌳 메서드

Json → 문자열 형태 → 서버-클라이언트 간 데이터 전송 시 사용

두 경우를 위해 파싱(parsing) 과정이 필요

1. JS 객체를 JSON 형태로 전송
2. JSON 형태를 JS 객체 형태로 사용 JS object → Json, Json → JS object

stringify() 자바스크립트 객체 → JSON 문자열 변환. 네트워크를 통해 객체를 JSON 문자열로 변환할 때 주로 사용.

console.log(JSON.stringify({x: 5, y: 6}));
// {"x":5,"y":6}

// 문자열, 숫자, 불리언
console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// [3,"false",false]

// 숫자, undefined, 함수, 심볼
console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')]}));
// {"x":[10,null,null,null]}

// Date
console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// "2006-01-02T15:04:05.000Z"

parse() JSON 문자열 → 자바스크립트 객체 변환. 네트워크 통신의 결과를 통해 받아온 JSON 문자열을 프로그램 내부에서 사용하기 위해 JS 객체로 변환할 때 사용. (서버 → client)

const json = `{"result":true, "count":42}`;
const obj = JSON.parse(json);

console.log(obj.count);
// 42

console.log(obj.result);
// true

REpresentational State Transfer의 약자로서, 어떤 자원에 대해 CRUD를 진행할 수 있게 HTTP Method(GET, POST, PUT, DELETE)를 사용하여 요청을 보내는 것. 이 때, 요청을 위한 자원은 특정한 형태로 표현된다. URI를 통해 정보의 자원을(only 자원만을) 표현하고, 자원의 행위는 HTTP Method로 명시한다.

• 자원(Resource) : URI
• 행위(Verb) : HTTP Method

표현(Representations)

Get/users/3/profile Get 행위 users/3/profile 자원

🌱 규칙

• URI는 명사를 사용하고 소문자로 작성되어야 한다.
• 명사는 복수형을 사용한다.
• URI의 마지막에는 /를 포함하지 않는다.
• URI에는 언더바가 아닌 하이픈을 사용한다.
• URI에는 파일의 확장자를 표시하지 않는다.

RestFul하다는 것 : REST API의 까다로운 조건을 만족시킨 통신 설계 상태. RestFul 하지 못한 상황

• CRUD의 기능을 모두 POST method로만 이용하는 경우
• URI에 행위(method)에 대한 부분이 드러가는 경우

🌳 Path Variable vs Query Parameter

🌱 Path Variable

• 경로 자체에 변수를 사용한 방법
• 전체 데이터 또는 특정 하나의 데이터를 다룰 때 처럼, 리소스를 식별하기 위 사용된다.

  /user/3 - ID

🌱 Query Parameter

데이터를 정렬하거나 필터링하는 경우 더 적합하다. → order

/user?user_id=3

동기(synchronous)적 방식이란? 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식

비동기(asynchronous)적 방식이란? 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식

1. setTimeout, add EventListner 등
2. 별도의 요청, 실행, 대기, 보류 등과 관련된 코드는 모두 비동기적 코드

3. 대표적으로 서버 통신과 관련된 로직들 포함

🌱 콜백지옥

비동기적 프로그래밍을 하다 보면, 콜백지옥과 마주할 수 있다.

1. 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬 수준인 경우
2. 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생
3. 가독성이 떨어지고, 수정이 어려움

이를 해결하기 위해 ES6에서 Promise 객체가 소개되었다.

🌳 Promise 객체

비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.

🌱 Promise 객체에 담기는 주요한 상태정보

1. 대기 : pending. 아직 성공(resolve) 또는 실패(rejected)되지 않은 상태.
2. 이행 : fulfilled. 데이터 전달아 성공적으로 이행된 상태.
3. 거부 : rejected, 어떠한 이유로 데이터 전달이 실패 된 상태.

🌱 Promise 객체 핸들링 방법

then ~ catch (ES6)

// http://api.naver.com/weather/today 로 요청을 한다고 가정.

axios.get('http://api.naver.com/weather/today')        // Promise 객체
.then(response => {
    console.log('정상처리 되었습니다 : ' + response);
})
.catch(error => {
    console.log('오류가 발생하였습니다 : ' + error);
})
.finally(()=>{
    console.log('항상 실행되는 부분입니다!')
})

async / await (ES7)

const getWeather = async () => {
    try {
        const response = await axios. get('http://api.naver.com/weather/today');    
        // await를 입력해주면 이 문장이 끝날때까지 밑으로 넘어가지 않음
        console. log('정상처리 되었습니다 : ' + response);
    } catch (error) {
        console.log('오류가 발생하였습니다 : ' + error);
    }
}

Data Fetching이 일어날 때 마다 기존 리스트 데이터에 Fetched Data를 추가하고자 할 때 유용하게 사용할 수 있는 hook. 더보기 UI 또는 무한스크롤 UI에 사용하기에 적합.

1. SEO(Search Engine Optimization)을 위한 SSR(Server-Side Rendering)을 지원
2. 파일 기반 라우팅(File-based routing)을 통해 Routing을 쉽게 구현할 수 있다.
3. 복잡한 Server 구축 없이도 API를 배포할 수 있다.
4. 초기 로딩 속도 개선을 위한 자동 Code Splitting(코드 분할) 등 최적화를 자동으로 지원한다.
5. 개발 환경 설정이 쉽고 간단하다.

• Linting, Compling, Bundling, Deploying을 위한 설정이 자동화 되어있다.
• Router, tailwind, typeScript, lint 등 주요 기능들을 configuration 없이 사용 가능하다.

🌳 MPA부터 SSR까지

MPA (Multi-Page-Application)

/about → about.html
/profile → profile.html

원시적인 서버 사이드 렌더링 방식. 페이지 이동시나 렌더링 시 깜빡거려 유저 사용성 저하하는 경우가 있다. 이를 보완하기 위해서 CSR 방식의 React를 이용해서 SPA를 만들기 시작

🌳 SPA (Single-Page-Application), CSR (Client-Side-Rendering)

React의 SPA 개념을 이용하게 되면서 더 이상 새로고침이나 깜빡거림 없이 유저 사용성이 개선되었으나, 단점도 있었다. → 자바스크립트 번들 사이즈가 커짐에 따라 초기 로딩 속도가 증가하는 것. → 이를 보완하기 위해서 Code Splitting 개념이 나왔다.

Code Spliting (Lazy-Loading)이란? 현재 꼭 필요한 곳에서만 자바스크립트 파일을 로딩하는 방식. 하나로 번들된 코드를 여러 코드나 컴포넌트로 분리해서, 지금 당장 필요한 코드가 아니라면 나중에 필요할 때 불러와서 사용할 수 있다.

문제점. SEO 검색 엔진에서 웹 사이트의 정보를 가져오기 위해서 사용하는 크롤링 봇은 방문하는 웹 사이트 HTML 정보를 읽고 데이터를 축적하는데, CSR 방식의 웹사이트의 경우 방문하는 시점에는 웹사이트의 정보가 없음. 방문 이후 Javascript를 통해서 현재 페이지에 내용이 나타나는 CSR 형식 → 서버에서 렌더링해서 클라이언트에 곧바로 보내주는 SSR가 대두됌.

🌳 Rendering이란?

Javascript를 이용해서 HTML을 만드는 행위

Pre-rendering이란? Client에 HTML이 이미 로드가 된 이후가 아닌, 이전에 Javascript를 이용해 HTML을 만드는 것을 말함.

Next.js는 기본적으로 모든 코드는 Pre-rendering 된다. 언제 HTML을 만드느냐에 따라서,

• Build 할 때 rendering 된다면? Static-Site generation (SSG) 정적 사이트 생성자
• runtime에 rendering 된다면? Server-Side Rendering (SSR)

runtime(실행 시간)이란? 애플리케이션이 빌드 및 배포된 후 사용자의 요청에 대한 응답으로 애플리케이션이 실행되는 기간.

• Pages Router : 자동으로 정적으로 렌더링 된다.

• App Router : 기본적으로 서버 컴포넌트로 취급된다.

🌳 CSR vs SSR vs SSG vs ISR

Client-Side Rendering

브라우저에서 HTML file을 로드하면, Javascript를 이용하여 rendering 하는 방식

Server-Side Rendering

브라우저에서 해당하는 페이지를 접속하면 ,그 순간 서버에서 html을 렌더링해서 전달해주는 방식 페이지를 요청할 때마다 렌더링하기 때문에 오래 걸림.

Static-Site Generation

SSR의 경우 페이지를 요청할 때마다 서버에서 렌더링. 정적인 페이지를 제공하려고 할 때는 그럴 필요없이 빌드할 때 렌더링하고 페이지를 요청할 때 이미 렌저링 된 페이지를 반환함.

Incremental Static Regeneration

SSG의 단점은, 컨텐츠가 업데이트 되면 제대로 된 정보를 보여줄 수 없다는 것. 이를 보완하기 위해서 일정 주기마다 페이지를 빌드시켜주는 ISR이라는 방식이 있습니다.

🌳 Store

모든 전역 State들을 관리하는 단 하나의 상태 저장소(→단 하나의 객체)

Store: {todos, auth}

store 내부의 리듀서들로부터 각각 최신 상태를 갖는다.

🌳 Reducer

state 변경 함수

• 매개변수로 기존상태와 액션객체를 받음
• 상태 변경 후 최신 상태를 Store에 제공 (리턴)

🌳 Action

{type, payload} 형태의 객체

• 리듀서 함수에게 전달되는 인자
• 리듀서에게 요구할 상태변경 작업에 대한 정의를 나타내는 객체 (상태변경 요청서)
• type은 필수 속성. payload는 선택 속성

🌳 Dispatch

액션 객체를 인자로 받아 리듀서를 호출 시키는 함수

• dispatch(액션객체)가 실행되면 리듀서 함수의 매개변수로 action 객체를 전달하며 호출

🍎 리덕스를 왜 써야 하나요?

• props drilling으로 인한 불편함을 해소
• 상태관리에 대한 유지보수성이 좋아짐. (코드베이스 규모가 커질수록 Good)
• 디버깅이 쉬어짐. (redux dev tools) - 단순 전역 상태관리를 넘어 추가적인 옵션 기능 제공

🍎 전역 상태관리는 context API로도 되는데, 왜 리덕스를 써야 하나요?

관리해야할 State 수가 적은 편이면 context API만으로도 충분 확장성, 유지보수성까지 고려해야 한다면 리덕스와 같은 전역 상태 라이브러리를 적용하는 것이 현명한 선택

🍎 리덕스는 어떻게 동작하나요?

1. 초기 상태 받기: 페이지 랜딩 시 useSelector를 통해 store에서 initialState를 받아 UI를 렌더링한다.
2. 상태 변경 요청: 사용자 이벤트 발생 시 상태변경을 위해 dispatch(action)로 Store 내 각 리듀서들에게 action 전달하며 실행시킨다. (todos 리듀서 호출만을 의도했어도 auth 리듀서도 함께 호출된다. → action.type이 중복되면 안되는 이유!)
3. 상태 변경 처리: 기존 State는 store부터, action 객체는 dispatch를 통해 매개변수로 받아서 리듀서 함수를 실행하여 action.type에 따라 상태 변경 처리 후 store에 변경된 최신 상태를 제공한다.
4. 신규 상태 받기: useSelector를 통해 store의 특정 상태를 구독중인 현재 페이지 컴포넌트(view)는 상태 변경 알림을 받고 리렌더링한다.

상태 가져오기 (컴포넌트 자체 → form store)

상태 변경 요청하기(컴포넌트 자체 → to reducer)

const dispatch = useDispatch();
const deleteTodo=(id)=>{
    // 단순히 리듀서에게 상태 변경 요청만하는 패턴. 상태변경 로직은 리듀서 안에서 기술
    dispatch({type: "todos/DELETE_TODO", payload:id}) // → 리듀서 실행
    //dispatch(deleteTodo(id)) // 액션생성자 함수 적용 (휴먼에러 방지)
}

🍎 서로 다른 리듀서 모듈끼리 액션 타입이 중복되도 되나요?

dispatch({type:"ADD_TODO"})라고 하면 액션 객체는 store로 전달되서 모든 리듀서들에게 전달된다. 만약 action type이 todos 리듀서와 auth 리듀서 안에 각각 들어있다면 두 리듀서 함수가 모두 실행되어 예상치 못한 버그를 가질 수 있다!

// 리듀서명 / 액션명의 조함으로 혹여나 중복이 발생하지 않도록 한다.
// modules/todos.js
const ADD_TODO="todos/ADD_TODO";
// modules/auth.js
const ADD_TODO="auth/ADD_TODO";

🍎 Store 자체를 구독하는 건 지양해야 함.

// ❌ 불필요하게 리렌더링이 발생할 수 있음.
const store = useSelector(state => state);
const todos = store.todos;

// ⭕ Good!!
const todos = useSelector(state => state.todos);

별자리를 역동적인 UI와 함께 재미있게 소개해주는 서비스입니다. 매달 우주에서 일어나고 있는 이벤트가 캘린더에 알기 쉽게 표시되어 있습니다. 슈팅게임과, 별자리 맞추기 게임을 통해 별자리에 대한 흥미도를 높여줍니다.

Keep

이번 프로젝트에서 진행한 과정 중 다음 프로젝트에서도 유지했으면 하는 부분.

1. 홍민 - 팀원들과의 소통하는 부분이다. 우리는 팀원과의 원활한 소통을위해 처음에 아이스브레이킹을통해 서로에대해 알아갔다. 그렇게 친해짐과동시에 팀원에대한 서로의 배려까지 더해지니 더할 나위없이 어색함이 없었다. 그런점이 팀원의 소통에대해 + 요소라고 생각이되며 이런점은 다음팀 에서도 적용하면 좋을거 같다.

2. 승범 - 와이어 프레임 및 계획 세우는 법이다

   우리 팀은 작업을 할 때 자기가 맡은 부분을 잘 설계하여 프로젝트를 하는 도중 기능을 줄이는 일은 거의 없었고 오히려 추가하여 자기가 맡은 방안에서도 넓혀가는 방안을 선택하여 너무 좋았다.

3. 유진 - 팀원 다 같이 깃에 올리는 점이 충돌이 적어서 정말 좋았습니다. 그리고 프로젝트 영역이 잘 나눠진 것 같아서 진행이 잘 되었습니다.

4. 슬기 - Git flow를 최대한 지키려고 하는 부분이 좋았습니다. 각자의 역할에 충실하며 프로젝트에 필요한 작업을 잘 수행한 점이 좋았습니다. 어떤 아이디어를 제시해도 존중해주는 모습이 정말 좋았습니다.

Problem

이번 프로젝트에서 발생한 문제점

1. 홍민 - 더 좋은 라이브러리의 등장 작업을하고 마무리단계에서 기존 작업하던 라이브러리보다 훨씬 좋은 성능의 라이브러리를 발견하게되었따. .. 정말 충격이였다. 그간 작업한게 여기선 딸깍거리면 끝난다니.. 사전조사의 중요성을 다시한번 깨닫게 되었다.

2. 승범 - 작은 동작들의 미스

   작업을 하는데 어떤 부분들은 통합을 했어야 하는데 그런 부분들은 통합이 안되어서 작업이 조금 지연이 되었었다.

3. 유진 - map함수가 너무많이 중첩되어서 기능적으로 효율있는 코드가 아닌 것 같습니다.

4. 슬기 - 최적화의 부재가 살짝 아쉽습니다. Props를 살짝 비효율적으로 내려준거 같고 이미지 로딩 부분 처리를 잘 하지 못한 점이 너무 아쉽습니다.

Try

다음 프로젝트를 위해 해야 할 노력

1. 홍민 - Next.js 의 부재는 생각보다 컸다. 채용공고를 보면 nextJs의 수요가 적지않게 많다. 이것을 해보지 못했단건 내 경험의 부족과 노력의 부족으로 생각이된다. 앞으로 전진적으로 더욱 더 배워야 겠다.

2. 승범 - 경험의 부족 및 다양한 과정을 찾아보는 것

   작업을 하는데 나는 시간이 오래 걸린 부분들이 영어로 걸려서 자막을 필요로 해서 영상을 보았더니 내가 작업한 시간이 반 이상으로 단축 되는 과정을 보아서 정보를 다양하게 알아보는 노력을 하는게 중요하다는 것을 느꼈다.

3. 유진 - 효율적인 코드를 더 공부할 것이고, css작업할 때 너무많은 잔 가지가 있는 느낌을 받았어서 css도 공부할 것입니다.

4. 슬기 - 이번 프로젝트에서 써보지 못한 기술들에 대해 알아보고, 이번 프로젝트에서 써봤던 기술들을 복습 해야할 것 같습니다. 또한, 아쉬웠던 부분에 대해 어떻게 보완할지 생각해보아야할거 같습니다.

https://school.programmers.co.kr/learn/courses/30/lessons/138477

문제 설명 "명예의 전당"이라는 TV 프로그램에서는 매일 1명의 가수가 노래를 부르고, 시청자들의 문자 투표수로 가수에게 점수를 부여합니다. 매일 출연한 가수의 점수가 지금까지 출연 가수들의 점수 중 상위 k번째 이내이면 해당 가수의 점수를 명예의 전당이라는 목록에 올려 기념합니다. 즉 프로그램 시작 이후 초기에 k일까지는 모든 출연 가수의 점수가 명예의 전당에 오르게 됩니다. k일 다음부터는 출연 가수의 점수가 기존의 명예의 전당 목록의 k번째 순위의 가수 점수보다 더 높으면, 출연 가수의 점수가 명예의 전당에 오르게 되고 기존의 k번째 순위의 점수는 명예의 전당에서 내려오게 됩니다.

이 프로그램에서는 매일 "명예의 전당"의 최하위 점수를 발표합니다. 예를 들어, k = 3이고, 7일 동안 진행된 가수의 점수가 [10, 100, 20, 150, 1, 100, 200]이라면, 명예의 전당에서 발표된 점수는 아래의 그림과 같이 [10, 10, 10, 20, 20, 100, 100]입니다.

명예의 전당 목록의 점수의 개수 k, 1일부터 마지막 날까지 출연한 가수들의 점수인 score가 주어졌을 때, 매일 발표된 명예의 전당의 최하위 점수를 return하는 solution 함수를 완성해주세요.

제한사항 3 ≤ k ≤ 100 7 ≤ score의 길이 ≤ 1,000 0 ≤ score[i] ≤ 2,000

🍎 내가 생각한 solution

문제가 길어서 이해하는데도 꽤 오랜 시간이 걸렸다. if문을 통해 k를 기준으로 k일동안 점수따로 그 이후에 점수를 따로 구해주어 모두 answer 배열에 넣어주었다.

function solution(k, score) {
    var answer = [];
    let arr=[]

    score.forEach((num,i)=>{
        if(i<k){
            arr.push(num)
            arr.sort((a,b)=>a-b)
            answer.push(arr[0])
        }else{
            arr.push(num)
            arr.sort((a,b)=>b-a)
            arr=arr.slice(0,k)
            answer.push(arr[k-1])
        }

    })
    return answer
}

페이지를 구현할 수 있게 해주는 패키지

• react-router-dom을 이용하면, SPA 기반 인 리액트 프로젝트 안에서 여러개의 페이지를 구현할 수 있다.
• Router.js에 Router 설정에 관련된 코드를 작성하고, 최상위 컴포넌트인 App.js에서 import해서 사용한다.
• react-router-dom는 여러가지 훅을 제공한다.

vscode 터미널에서 아래 코드를 입력해 패키지를 설치할 수 있다.

yarn add react-router-dom

🌳 사용방법 순서

• 페이지 컴포넌트 생성(Home.jsx, Detail.jsx.....)
• ⭐ Router.js 생성 및 route 설정 코드 작성
• 브라우저에 우리가 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분*

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";

// BrowserRouter를 Router로 감싸는 이유는,
// SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다
const Router = () => {
    return (
        <BrowserRouter>
              <Routes>
                  // path는 사용하고싶은 "주소"
                  // element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트
                  <Route path="/" element={<Home />} />
                <Route path="detail" element={<Detail />} />
              </Routes>
          </BrowserRouter>
    );
};

export default Router;

• App.js에 Router.js import 해주기

  import React from "react";
  import Router from "./shared/Router";
  

function App() { return ; } export default App;

Router.js를 **App 컴포넌트에 넣어주는 이유는 우리가 만든 프로젝트에서 가장 최상위에 존재하는 컴포넌트가 App.js이기 때문**

<br>

## 🌳 react-router-dom Hooks
### 🪴 useNavigate
navigate를 생성하고, navigate('보내고자 하는 url')을 통해 페이지를 이동 시킬 수 있다.
```jsx
const Home = () => {
    const navigate = useNvigate();

    return (
        <button
            onClick={()=>{
                navigate("/works");
            }}
        >
           work로 이동
        </button>
    );
};

export default Home;

🪴 useLocation

import {useLocation} from "react-router-dom";

const Works = () => {
    const location = useLocation();
    console.log("location :>> ", location);
    return    <div></div>
}

🪴 Link

html 태그중에 a 태그의 기능을 대체하는 API. 만약 JSX에서 a태그를 사용해야 한다면, 반드시 Link를 사용해서 구현해야 한다. (a태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침(refresh)되기 때문) 브라우저가 새로고침 되면 모든 컴포넌트가 다시 렌더링되야 하고, 또한 리덕스나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화된다. → 성능에 악영향을 줄 수 있고, 불필요한 움직임.

import {Link, useLocation} from 'react-router-dom';

const Works = () => {
    return(
        <div>
            <Link to="/contact">contact 페이지로 이동하기</Link>
        </div>
    )
}

🌳 Dynamic Route

동적 라우팅이라고도 말하는데 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법

const Router = () => {
    return (
        <BrowserRouter>
              <Routes>
                  // path는 사용하고싶은 "주소"
                  // element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트
                  <Route path="/" element={<Home />} />
                <Route path="detail/:id" element={<Detail />} />
              </Routes>
          </BrowserRouter>
    );
};

export default Router;

:id라는 것이 바로 동적인 값을 받겠다라는 의미. :id는 useParams 훅에서 조회할 수 있는 값

useParams: path의 있는 id값을 조회할 수 있게 해주는 훅

🌱 모던 자바스크립트 Deep Dive

매일 책 15분동안 읽고 새로 깨달은 부분 정리

9.3 명시적 타입 변환

개발자의 의도에 따라 명시적으로 타입을 변경하는 방법 -표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법

// 숫자 타입 => 문자열 타입
String(1);    // "1"

// 불리언 타입 => 문자열 타입
String(true);    // "true"

-빌트인 메서드를 사용하는 방법

// 숫자 타입 => 문자열 타입
(Infinity).toString();    //"Infinity"

// 불리언 타입 => 문자열 타입
(true).toString();    //"true"

-암묵적 타입 변환을 이용하는 방법

// 숫자 타입 => 문자열 타입
NaN+'';    //"NaN"

// 불리언 타입 => 문자열 타입
false + '';    //"false"

표준 빌트인 생성자 함수와 빌트인 메서드 자바스크립트에서 기본 제공하는 함수 표준 빌트인 생성자 함수 : 객체를 생성하기 위한 함수이며 new 연산자와 함께 호출한다. 표준 빌트인 메서드 : 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드

https://school.programmers.co.kr/learn/courses/30/lessons/12933

문제 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다.

제한 조건 n은 1이상 8000000000 이하인 자연수입니다.

🍎 내가 생각한 solution

처음에 문제를 잘못 이해하고 배열을 냅다 반대로 돌려버렸는데 잘못됨을 느끼고 아래처럼 풀게 되었다. 일단 내림차순 정렬을 위해 n을 문자로 만들어서 split으로 ""기준으로 쪼개주고, sort b-a해서 내림차순으로 정렬시켜줬다. 그 후 forEach를 돌려서 배열에서 꺼내주고 마지막 return 해줄때 숫자형으로 형변환 시켜주었다.

function solution(n) {
    var answer = 0;
    const arr=String(n).split("").sort((a,b)=>b-a)
    arr.forEach((num)=>{
        answer+=num
    })
    return Number(answer);
}

🌳 불변성 정의

한 번 생성된 원본 데이터는 변경시키지 않고, 데이터 변경 필요시 새로운 원본을 만드는 디자인 패턴

불변성 X → mutable 원본 데이터가 변할 수 있다는 의미 (push 메서드)

불변성 O → immutable 원본 데이터가 변할 수 없다는 의미 (map 메서드)

🌳 불변성의 중요성 / 문제점

문제점 1. 원본과 수정된 값의 주소값이 같으면 불변성이 유지 X → 렌더링 되지 X 리액트는 state 변경 전 후의 값을 얕은 비교하여 다른 경우에만 리렌더링 얕은 비교 → 참조 값의 경우 주소끼리 비교. 원시값은 데이터값 그 자체끼리 비교.

문제점 2. Side Effect 부작용을 일으킬 수 있다.

객체의 내부에 데이터에 직접 변경을 가하는 방식으로 개발할 경우. 명령형 / 절차적 프로그래밍하게 되어 규모있는 프로젝트를 만들게 되면 유지보수가 어려워진 스파게티 코드를 보게될 확률이 높다.

불변성을 지키는 수단 -spread Operator

setObj({...obj, age:obj.age+1})

depth가 깊은 객체라면 다소 가독성이 떨어지고 복잡해 보임.

-불변성 지원 라이브러리(immer.js) depth가 깊은 중첩 객체를 상태로 가질 경우, 불변성 여부를 점검하기 어려워지기 때문에, mutable한 문법으로도 불변성을 지킬 수 있는 immer 라이브러리를 사용을 권장.

setObj(produce(draftObj=>{draftObj.contact.email=newEmail;}))

🌱 일주일 총 요약

팀프로젝트 과제 (아웃소싱 프로젝트(지도, 유튜브, 설문))

🌱 일주일동안 새로 알게 된 사항

타입스크립트(JavaScript의 약점, 튜플, enum, any & unknown & union, 인터페이스, 객체 지향 설계 원칙 - S.O.L.I.D 등)

🌱 일주일동안 느낀 점

타입스크립트란 정말 하나하나 타입들을 지정해주는거로구나..라는걸 알게되었고 과제를 진행하면서 props를 내려줄때마다 빨간줄이 뜨는것을 보고 아주아주 한참 멀었구나를 느끼게 되었다.

🌱 다음주 목표

다음주도 타입스크립트를 배움에 있어 적극적인 자세로 임하기 aws도 열심히 강의 듣기 하루하루 목표를 잘 세워서 알차게 하루 보내기 알고리즘 문제 한문제씩이라도 꼭 풀기 하루에 메서드 1개씩 알아가기 아침 7시에 일어나기 새벽 2시에는 자기

https://school.programmers.co.kr/learn/courses/30/lessons/181884

문제 설명 정수 배열 numbers와 정수 n이 매개변수로 주어집니다. numbers의 원소를 앞에서부터 하나씩 더하다가 그 합이 n보다 커지는 순간 이때까지 더했던 원소들의 합을 return 하는 solution 함수를 작성해 주세요.

제한사항 1 ≤ numbers의 길이 ≤ 100 1 ≤ numbers의 원소 ≤ 100 0 ≤ n < numbers의 모든 원소의 합

입출력 예 #1

예제 1번의 numbers를 문제 설명대로 더해가는 과정을 나타내면 다음의 표와 같습니다.

예제 2번의 numbers의 마지막 원소 전까지의 원소를 sum에 더하면 139입니다. 139는 n 값인 139보다 크지 않고 마지막 원소인 100을 더하면 139보다 커지므로 239를 return 합니다.

🍎 내가 생각한 solution

요즘 forEach문만 엄청 쓰는거 같다..

function solution(numbers, n) {
    var answer = 0;
    numbers.forEach((num)=>{
        if(answer<=n){
            answer+=num
        }
    })
    return answer; 
}