전체 글 (105) 썸네일형 리스트형 Study_240613 ( axios ( Interceptor ) , redux Thunk ,TanStack Query ) Custom InstanceAxios 인스턴스를 사용하면 설정을 한 곳에서 관리. baseURL을 설정하여 서버 주소가 변경되더라도 한 곳에서 수정하면 모든 요청에 반영// src > axios > api.jsimport axios from "axios";// axios.create의 입력값으로 들어가는 객체는 configuration 객체임// https://axios-http.com/docs/req_config 를 참고const api = axios.create({ baseURL: "http://localhost:4000",});export default api;사용 예시import "./App.css";import { useEffect } from "react";import api from "./.. Study_240612 ( 인증,인가 ) HTTP 프로토콜의 특징 2가지무상태(stateless)HTTP 프로토콜은 무상태(stateless) 프로토콜. 각 요청이 독립적이며, 서버가 이전 요청에 대한 정보를 기억하지 않는다는 의미. 클라이언트가 서버에 요청을 보낼 때마다 서버는 해당 요청을 독립적으로 처리하고, 이전 요청의 상태나 정보를 기억하지 않음상태값은 매 요청마다 클라이언트가 가지고 오기 때문에, 서버는 클라이언트의 상태를 별도로 기억할 필요없이 주문받은 대로 응답함무상태라는 특성 덕분에 동일한 서버를 여러개로 확장 가능비연결성(connectionless) 서버와 클라이언트는 연결되어 있지 않습니다. 서버 입장에서는 매번 새로운 요청비연결성으로 인해 최소한의 서버 자원으로 서버를 유지할 수 있게 해줌그러나, 각 사용자별 요청이 잦은 서.. Study_240611 (json-server , axios) json-server 공식 페이지 ( 이용 시 유용한 정보 많으니 참고 많이 할 것 )https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node.js.yml). Latest version: 1.0.0-beta.1, last published: 6 days ago. Start using json-server in yowww.npmjs.com json-server란, 아주 간단한 DB와 A.. Study_240610 (Promise , HTTP) slice - 원본 배열을 유지하며 조건을 만족 하는 새로운 배열을 리턴splice - 조건을 만족 하는 새로운 배열을 리턴하는데 원본 배열을 리턴 값을 제외한 배열로 변경 psomise 관련 복습 / 아래는 fake data 사용import { useEffect, useState } from "react";// function App() {// const [message, setMessage] = useState("타이머 시작");// useEffect(() => {// const delay = (ms) => {// const promise = new Promise((reslove) => {// setTimeout(reslove, ms);// });//.. TeamProject_240607 (뉴스피드 프로젝트) 금요일 발표 진행 TeamProject_240606 (뉴스피드 프로젝트) 금요일 발표 준비를 Figma에서 수행 TeamProject_240605 (뉴스피드 프로젝트) import { useRef, useState } from 'react';import { Quill } from 'react-quill';import 'react-quill/dist/quill.snow.css';import { useDispatch, useSelector } from 'react-redux';import { useNavigate } from 'react-router-dom';import { createPost } from '../../redux/slices/postSlice';import { supabase } from '../../service/supabase';import { Button, ButtonContainer, Container, // Subtitle, Form, .. TeamProject_240604 (뉴스피드 프로젝트) 뉴스피드를 진행하며 게시글 CRUD를 맡았는데 Quill에디터를 쓰고 supabase DB를 내가 주로 다루다보니 UI 및 코드 가독성 향상을 위해 개선을 함 import { useState, useRef } from 'react';import { useDispatch } from 'react-redux';import { useNavigate } from 'react-router-dom';import { createPost } from '../../redux/slices/postSlice';import { supabase } from '../../service/supabase';import { Quill } from 'react-quill';import 'react-quill/dist/quill.snow.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 14 다음
