try { deleteCode(codeKey) .then(() => { dispatch(codeAction.getCodeList({ target: "codeList" })); codeForm.resetFields(); }); } catch(e) { console.error(e); } deleteCode(codeKey) .then(() => { dispatch(codeAction.getCodeList({ target: "codeList" })); codeForm.resetFields(); }) .catch((e) => { console.error(e); }) 위의 코드는 try-catch 구문으로 에러를 처리하려고 시도하고 있습니다. deleteCode 함수가 반환하는 Promise가 reject 되면 c..

redux-toolkit은 Redux 라이브러리를 사용하여 상태 관리를 간소화하고 효율적으로 처리할 수 있도록 하는 오픈소스 라이브러리입니다. Redux는 단방향 데이터 흐름 패턴을 사용하여 상태를 관리합니다. 하지만 Redux의 기본 구성은 일정한 작업량이 필요합니다. redux-toolkit은 Redux의 구성을 간단하게 만들고, 코드를 짧게 만들 수 있도록 해주는 도구 모음입니다. redux-toolkit의 주요 기능 중 하나는 createSlice 함수입니다. 이 함수는 상태와 리듀서를 생성하는데 사용됩니다. 상태는 리덕스 스토어에서 관리하는 상태를 의미하며, 리듀서는 액션을 처리하여 상태를 변경하는 함수입니다. createSlice 함수를 사용하면 상태와 리듀서를 하나의 파일에 작성하여 코드 관..

프런트 - 리액트 백엔드 - 장고 1단계 프런트 react문법, redux, redux-saga, redux-toolkit, axios(client) 백엔드 APIview, restframework decortor, serializer, trasaction, orm, 인증, 인가 2단계 공통함수 3단계 프로젝트 아키 4단계 시스템전반적인 아키 5단계 운영및 배포

https://www.youtube.com/watch?v=Nyq92T1iKTA 삭제합시다

export const getRooms = () => instance.get("rooms/").then((response) => response.data); export const getRooms = () => instance.get("rooms/") 차이점 getRooms 함수에서 두 번째 줄인 instance.get("rooms/")는 Axios 인스턴스 instance를 통해 "rooms/" 엔드포인트로 GET 요청을 보내고, 이에 대한 응답을 Promise로 반환합니다. 이후 .then()을 통해 응답 데이터인 response.data에 접근하여 해당 데이터를 반환하도록 되어 있습니다. 두 번째 코드는 getRooms 함수가 instance.get("rooms/")만을 반환하도록 수정한 것입니다...

일정조율 > 완성 > 테스트 > 화면 및 코드 리뷰 > 개선사항 및 수정사항 > 완성 최종목표 > 코드관리 페이지 완성 1. 기능완성 > 개인프로젝트 2. 안정성 > 발표시 3. 사용편의성 > 프로

리액트 날씨 import React, { useEffect, useState, useRef } from "react"; import axios from 'axios'; export function Weather({ }) { //시계 useEffect(() => { navigator.geolocation.getCurrentPosition(naviGood, naviBad) const id = setInterval(() => { setTime(new Date()); }, 1000); return (() => clearInterval(id)) }, []); const [time, setTime] = useState(new Date()); //날씨 const [weather, setWeather] = useSta..

사용하는 이유 re_path()를 사용하는 이유는 복잡한 URL 패턴을 정규표현식으로 처리하기 위해서 입니다. 정규표현식을 사용하면 텍스트를 다양한 방법으로 매칭할 수 있으므로, 특별한 URL 패턴을 처리해야 하는 경우에 re_path()를 사용하는 것이 유용합니다. 예를 들어, 특정 패턴의 길이나 문자열 조합이 정해져 있는 URL을 처리할 때, 정규표현식을 사용하면 간단하게 처리할 수 있습니다. 또한, 정규표현식은 간결하게 표현할 수 있기 때문에 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다. re_path()를 사용하면 정규표현식으로 복잡한 URL 패턴을 정의할 수 있으며, 그 결과 코드를 더욱 간결하게 유지할 수 있습니다. 하지만, re_path()는 정규표현식을 사용하기 때문에 일반적인 path..

[소개] : TypeScript는 최근 인기 있는 프로그래밍 언어 중 하나로, JavaScript의 타입 시스템을 확장하여 개발자들이 더욱 안정적이고 확장 가능한 코드를 작성할 수 있도록 지원합니다. [본문] TypeScript의 특징 : TypeScript는 정적 타입 시스템, 클래스 기반 객체 지향 프로그래밍, 인터페이스 등 다양한 기능을 지원합니다. 이를 통해 개발자는 코드 작성 중 발생할 수 있는 일부 오류를 미리 방지하고, 코드의 가독성과 유지 보수성을 높일 수 있습니다. TypeScript의 장점 : TypeScript는 JavaScript와 호환성이 높아서 기존 JavaScript 코드를 TypeScript로 쉽게 전환할 수 있습니다. 또한 TypeScript는 많은 개발자들이 사용하는 프레..

const dispatch = useDispatch(); const { codeList, codeListError, codeDetail, codeDetailError } = useSelector( ({ codeReducer }) => ({ codeList: codeReducer.codeList, codeDetail: codeReducer.codeDetail, }) ); useEffect(() => { dispatch(codeAction.getCodeList({ target: "codeList" })); }, []); useDispatch()와 useSelector()는 React-Redux 라이브러리에서 제공하는 hook입니다. useDispatch()는 Redux store에 action을 dispat..