본문 바로가기

분류 전체보기

 (290)
API 연결 성공 import axios from 'axios'; import Cookies from 'js-cookie'; // Axios 인스턴스 생성 export const instance = axios.create({ baseURL: process.env.REACT_APP_API_URL, // 환경변수를 통한 API URL 설정 withCredentials: true, // 쿠키 전송을 위한 옵션 }); // 토큰을 쿠키에 저장하는 함수 const saveTokensToCookies = (accessToken, refreshToken) => { Cookies.set('accessToken', accessToken, { path: '/' }); // accessToken을 쿠키에 저장 Cookies.set('refr..
5_useRef 란 무엇인가? useRef는 React에서 사용되는 Hook 중 하나로, 함수 컴포넌트 내에서 변수를 생성하고 관리할 수 있게 해주는 기능입니다. useRef를 사용하면 컴포넌트가 리렌더링될 때마다 변수가 재생성되지 않고 이전 값이 유지됩니다. 주로 DOM 요소에 대한 참조를 저장하거나, 컴포넌트의 생명주기를 벗어난 값을 유지할 때 활용됩니다. useRef를 사용하면: 1. DOM 요소에 대한 참조 저장: useRef를 사용하여 컴포넌트가 렌더링될 때 생성된 DOM 요소에 대한 참조를 저장할 수 있습니다. 이를 통해 필요한 경우에 DOM 요소에 직접 접근하여 작업할 수 있습니다. 2. 컴포넌트의 생명주기를 벗어난 값 유지: useRef를 사용하여 컴포넌트의 생명주기를 벗어난 값을 유지할 수 있습니다. 이는 컴포넌트가 ..
api post, get, patch 기능 구현 import axios from "axios"; import Cookies from "js-cookie"; export const instance = axios.create({ baseURL: process.env.REACT_APP_API_URL, withCredentials: true, // 쿠키 전송을 위한 옵션 }); // 토큰을 쿠키에 저장하는 함수 const saveTokensToCookies = (accessToken, refreshToken) => { // 쿠키에 저장하는 로직 구현 Cookies.set("accessToken", accessToken, { path: "/" }); Cookies.set("refreshToken", refreshToken, { path: "/" }); }; /..
4_가상 돔(Virtual DOM & 실제 돔(Real DOM) 리액트에서는 가상 돔(Virtual DOM)과 실제 돔(Real DOM)을 사용하여 UI를 관리합니다. 🌿가상 돔(Virtual DOM): 가상 돔은 실제 돔의 가벼운 복사본입니다. 리액트 컴포넌트의 상태(state)나 props가 변경될 때마다 새로운 가상 돔이 생성됩니다. 이전 가상 돔과 현재 가상 돔을 비교하여 변경된 부분을 찾아내고, 해당 부분만을 실제 돔에 반영합니다. 이를 통해 실제 돔에 접근하는 횟수를 최소화하고, 효율적으로 UI를 업데이트할 수 있습니다. 가상 돔은 객체로 이루어져 있어서 메모리에서의 작업이 실제 돔보다 빠르고, DOM 조작이 필요한 시간을 최소화합니다. 🌿실제 돔(Real DOM): 실제 돔은 HTML 문서에 직접적으로 반영되는 문서 객체 모델입니다. 브라우저에서 렌더링되..
모달 구현 중 import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { MainContainer, LeftContainer, Logo, P, Button, RightContainer, Navbar, NavbarBtn, ProducImgtDiv, InputTag, FundingImg, PlusImg, Body, FundingDiv, SponserDiv, RadioInput, SponserComment, TogetherDiv, } from './FundingCreateStyles'; import Modal from './Modal/Modal'; const FundingCreate = () => { cons..
카카오페이 결제 import React from 'react'; import { useNavigate } from 'react-router-dom'; import { MainContainer, LeftContainer, Logo, P, Button, RightContainer, Navbar, NavbarBtn, SponserMoney, InputTag, Body, FundingDiv, SponserDiv, SponserComment, SponsorImg, TogetherDiv, } from './FundingPayStyles'; import CheckBox from '../FundingPay/CheckBox/CheckBox'; import KakaoPay from './KakaoPay/KakaoPay'; const Fu..
3_Redux : mobx : jotai : recoil 🌿 Redux 이외에 전역 상태관리 : jotai, mobx, recoil 와의 차이를 간단히 비교해보려고 한다. 🌿mobx Redux 와의 차이점: 1. 객체 지향적인 상태 관리: MobX는 객체 지향적인 방식으로 상태를 관리하며, 관찰 가능한 객체를 통해 상태 변화를 추적합니다. 2. 다양한 프레임워크 지원: MobX는 React, Vue, Angular 등 다양한 프레임워크에서 사용할 수 있습니다. 3. 자동 리렌더링: MobX는 상태 변화가 감지되면 자동으로 관련된 컴포넌트를 리렌더링하여 개발자가 수동으로 관리할 필요가 없습니다. 🌿 Jotai Redux 와의 차이점: 1. 선언적인 상태 관리: Jotai는 선언적인 방식으로 상태를 관리하며, React 컴포넌트와 간단하게 통합할 수 있습니다. 2..
반응형 페이지 구현 1️⃣ 펀딩 상세 페이지 /fundingdetail import React from 'react'; import { useNavigate } from 'react-router-dom'; import { MainContainer, LeftContainer, Logo, P, Button, RightContainer, Navbar, NavbarBtn, NavbarBtnDiv, Body, BannerImg, FundingDiv, SponserDiv, SponserComment, SponsorImg, ProgressBar, Progress, BetweenDiv, TogatherDiv, Footer, } from './FundingDetailStyles'; const FundingDetail = () => { co..
2_Redux 란 무엇인가? 왜 사용하는가? ✅ Redux 무엇인가요? Redux는 복잡한 상태 관리를 단순화해서 상태를 하나의 객체로 관리하고, 상태를 예측 가능하고 효율적으로 관리할 수 있는 라이브러리 Redux의 주요 개념: 1️⃣ Store: 애플리케이션의 상태를 보유하는 단일 저장소 2️⃣ Action: 상태 변경을 나타내는 객체로, store.dispatch()를 통해 전달 3️⃣ Reducer: 이전 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수 4️⃣ Dispatch: 액션을 발생시키는 메서드로, store.dispatch()를 통해 액션을 전달 ✅ 왜 Redux를 사용하시나요? Redux를 사용하면 상태 관리가 단순화되고 예측 가능성을 높여 유지 보수성과 확장성 향상 1️⃣ 중앙 집중화된 데이터 관리: 1. Redux는 중앙..
미디어쿼리 반응형 페이지 view 🍒 오늘은 여기까지.. 1. 팀프로젝트 깃 레포 다시 생성 2. 메인페이지(어제)-펀딩 상세페이지(오늘) view까지만 구현 ✅ 메인페이지 view import React from 'react'; import { useNavigate } from 'react-router-dom'; import { MainContainer, LeftContainer, Logo, P, Button, RightContainer, Navbar, NavbarBtn, NavbarBtnDiv, Body, BannerImg, FundingDiv, FundingSection, FundingGrid, FundingImg, // FundingNewline, ProgressBar, Progress, BetweenDiv, TogatherDiv..

티스토리툴바