전체 글

오늘은 리액트에서 HTTP 요청을 보내는 방법 중 Axios 에 대해 알아보려고 합니다.Axios는 비동기적으로 데이터를 가져오거나 서버에 데이터를 보내는 데 유용한 HTTP 클라이언트 라이브러리입니다.아래에 Axios를 리액트 프로젝트에 통합하여 사용하는 방법을 단계별로 정리합니다.1. Axios 설치먼저, Axios를 프로젝트에 설치합니다. 터미널에서 다음 명령어를 실행합니다.npm install axios또는 Yarn을 사용하는 경우:yarn add axios2. Axios 설정필요한 경우, Axios 인스턴스를 설정하여 기본 URL이나 공통 헤더 등을 설정할 수 있습니다. 하지만 간단한 사용을 위해 기본 설정을 사용해 보겠습니다.3. 간단한 GET 요청 예시리액트 컴포넌트에서 Axios를 사용하여..

내가 풀고있던 것..function solution(n, m, section) { if(section.length === 1) return 1; const area = section[section.length - 1] - section[0] + 1; let count = 1; let remain = area - m; let temp = true; if(remain 0){ count++; }else if(remain 주어진 문제는 최소한의 횟수로 롤러를 사용하여 벽을 페인트칠하는 것입니다. 롤러의 길이와 다시 페인트칠해야 하는 구역들이 주어졌을 때, 이를 최소한의 횟수로 해결하려는 것입니다.문제를 이해하기 위해서 주어진 코드가 어떻게 동작하는지 단계별로 설명해 드리겠습니다.주어진 코드..

오늘은 "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..