전체 글

오늘은 "2024-05-27" 형식의 날짜를 가리키는 문자열을 다루는 법을 정리해보겠습니다.유효성 검사로 2월30일 같은 없는 날짜 등을 걸러내는 방법입니다. 물론 애초에 input의 type 을 date 등으로 처리하면 되겠지만, 이렇게 문자열로 입력받아야 하는 상황에서 어떻게 처리하면 좋을지를 생각해봤습니다. 먼저 입력된 문자열을 Date 객체로 변환하고, 변환된 Date 객체의 값을 원래 입력값과 비교하여 유효한 날짜인지 검사합니다.날짜 유효성 검사 코드const [year, month, day] = dateString.split('-').map(Number);const date = new Date(year, month - 1, day);if ( date.getFullYear() !== yea..

폭풍같은 한 주가 지나갔습니다!한 주를 정리하며 이번 주의 메인 테마(?) 였던 Context API 와 Redux-Toolkit 의 사용법을 다시한번 정리해 보려고 합니다.Context API기본설정Context 생성 : createContext()Provider 로 상위 컴포넌트 감싸기 : 사용할 컴포넌트에서 사용 : useContext(콘텍스트명)이게 끝! 인데, 편하게 사용하려면 파일을 커스텀 훅까지 2개 만들면 좋습니다.src/context/콘텍스트.tsxsrc/hooks/커스텀훅.tsx콘텍스트.tsx//context.tsximport { ReactNode, createContext, useEffect, useState } from "react";interface Props { childr..

오늘은 React Router를 이용해 Link 컴포넌트를 통해 라우트 이동시 Props를 전송할 수 있는지가 궁금했습니다.공부해보니 역시 가능했고, 이를 위해 state 속성을 사용할 수 있습니다. React Router 의 Link 컴포넌트는 state 속성을 통해 데이터를 전달할 수 있으며,전달된 데이터는 도착한 컴포넌트에서 useLocation 훅을 통해 접근할 수 있습니다. 코드 예시데이터를 전달하는 Link 설정: // List.jsimport { Link } from "react-router-dom";import styled from "styled-components";import { Expend } from "../../types/d";import Card from "../Card";con..

기존코드의 문제function solution(nums) { var answer = 0; function isPrime(num) { if(num === 1) return false; // Math.sqrt 함수를 사용하여 제곱근까지만 반복하도록 한다. for(let i = 2; i { nums.forEach((a) => { if(e !== a){ nums.forEach((x) => { if(x !== a && x !== e){ arr.push(e + a + x); } ..

기존 코드function solution(s) { let answer_arr = []; let s_str = s; // substr함수를 쓰기 위해 문자열 형태의 변수를 만들었다. s = s.split(''); for(let i = 0 ; i 이 코드는 s 문자열의 각 문자를 순회하면서 해당 문자가 이전에 등장했는지 확인하고, 가장 가까운 동일한 문자의 위치를 찾는 방식으로 동작합니다.코드 분석문자열을 배열로 변환: let s_str = s; // 원본 문자열을 저장합니다. s = s.split(''); // 문자열을 문자 배열로 변환합니다.문자 순회: for (let i = 0; i 외부 루프 (for (let i = 0; i ):문자열 s의 각 문자를 순회합니다.answer를 기..

오늘은 Redux Toolkit 사용 중에 궁금한 것이 생겨 정리해 보려고 합니다.보통 리액트에서 setState 를 할 때는 불변성 관리를 위해 ... 펼침연산자를 사용해 원본 객체를건드리지 않는게 일반적이라고 알고 있습니다. 그런데 Redux Toolkit 에서는 원본배열에 push 한다거나 하는 패턴이 나타납니다.이것이 궁금하여 조사해 보았습니다. 결과적으로 Redux Toolkit은 Immer를 내부적으로 사용하여 불변성을 자동으로 관리해준다고 합니다.이를 통해 개발자는 불변성을 직접 관리할 필요 없이, 더 간단하고 직관적인 방식으로 상태를 업데이트할 수 있습니다.Immer와 Redux ToolkitRedux Toolkit은 createSlice와 같은 함수를 사용할 때 Immer를 사용합니다.I..

Redux ThunkㄱRedux Thunk는 Redux에서 비동기 작업을 처리하기 위한 미들웨어입니다. Redux는 기본적으로 동기적으로 상태를 관리하지만, 비동기 작업(예: API 호출, 타이머, 파일 읽기 등)을 처리할 수 있는 기능이 내장되어 있지 않습니다. Redux Thunk를 사용하면 이러한 비동기 작업을 처리할 수 있습니다.Redux Thunk의 역할비동기 액션 처리: Redux Thunk를 사용하면 액션 생성자가 함수를 반환할 수 있습니다. 이 함수는 비동기 작업을 수행하고, 필요에 따라 디스패치를 여러 번 호출하여 상태를 업데이트할 수 있습니다.로직 캡슐화: 비동기 로직이나 조건부 로직을 액션 생성자 내부에 캡슐화하여, 컴포넌트가 간결해지고 비즈니스 로직이 분리됩니다.기본 개념Redux ..

오늘은 과제 주차 중 가계부 props drilling 버전을 Context API 버전으로 리팩토링 해보았습니다.이 과정에서 Context API에 익숙치 않아 살짝 어려움도 겪었습니다.Context API 의 정확한 사용법에 대해 정리해 보려고 합니다.Context API는 전역 상태를 관리하기 위한 강력한 도구입니다.Context를 사용하면 prop drilling을 피하고, 여러 컴포넌트 계층에 데이터를 전달할 수 있습니다.1. Context 생성하기먼저, Context를 생성합니다. 일반적으로 Context를 정의하는 파일을 따로 만들어 관리합니다.// context.jsimport React from 'react';const MyContext = React.createContext();expo..

오늘은 mock 데이터를 보내주는 가상 서버를 만들어 연습 등등에 사용할 수 있는 방법을 배웠습니다.JSON Server 가 그것으로, JSON Server는 간단한 REST API 서버를 만들기 위해 사용되는 라이브러리라고 합니다.JSON Server를 통해 JSON 파일을 기반으로 빠르게 Mock API를 생성할 수 있습니다. JSON Server의 설치 및 기본 사용법을 정리합니다.1. JSON Server 설치먼저 JSON Server를 글로벌로 설치합니다.npm install -g json-server2. JSON 파일 준비JSON Server는 JSON 파일을 데이터베이스로 사용합니다. 프로젝트 루트 디렉토리에 db.json 파일을 생성하고 다음과 같이 데이터를 준비합니다.// db.json{..

오늘은 전역 상태관리 라이브러리인 Redux 그리고 사용성을 강화한Redux Toolkit 의 기본에 대해 정리해보려고 합니다.1. Redux 설치먼저 필요한 패키지를 설치합니다.npm install @reduxjs/toolkit react-redux2. 기본적인 파일 구조src/├── store/│ ├── todoSlice.ts│ └── store.ts├── App.tsx└── index.tsx3. store.ts 설정store.ts` 파일을 생성하고 다음과 같이 설정합니다.// store.tsimport { configureStore } from '@reduxjs/toolkit';import todoSlice from './todoSlice';export const store = configu..