axios3 [React] Project Levup - 메모 수정 기능 만들기 이전 작업으로 DB에 저장된 메모를 불러오는 것 까지 확인했다. 백엔드에서 수정및 삭제 기능을 구현했지만, 프론트엔드에서 부드럽게 구현할 수 있도록 구상을 해야했다. 구상 결과 각 메모를 반환하며, 수정 버튼을 눌렀을 때만 해당 메모가 수정되는 방향으로 정리했다. 그 전에, 수정 및 삭제 요청이 들어갈 때 각 메모의 ID 별로 처리할 수 있도록 컴포넌트를 세분화 시켰다. 1 . 컴포넌트 세분화 - 수정 전 코드 {memo.map((item, index) => { return ( { item._id.$oid } { item.content } 수정 삭제 ) })} 2 . 컴포넌트 세분화 - 수정 후 코드 const EachMemo = ({ memoId, content }) => { return ( { con.. 2023. 12. 2. [React] Project Levup - Axios 활용하기 백엔드에서 구현한 사항 : 메모 만들기, 메모 조회하기 백엔드에서는 로그인이 완료되면 토큰을 발급하고, 토큰과 함께 메모 조회 요청을 하면 해당 ID로 작성한 메모를 가져오도록 구현했다. 먼저, 메모 뷰가 랜더링 되면 API 요청을 통해 헤더에 토큰을 담아 데이터를 요청한다. import { useState, useEffect } from 'react' import {Cookies} from "react-cookie"; const cookie = new Cookies(); const token = cookie.get("token"); const [memo, setMemo] = useState([]); useEffect(() => { axios.get("http://127.0.0.1:8000/api/mem.. 2023. 11. 25. [React] Project Levup - 로그인 기능 만들기 https://chunws13.tistory.com/46 [FastAPI] Project Levup - 회원가입과 로그인 기능 만들기 개인적으로 사용할 용도이긴 하지만, 주변 사람들에게 소개하면서 사용을 권장하기 위해 간단한 회원 가입 기능을 만들어 두려고 한다. 회원 가입 기능을 만들기 전 몇 가지 패키지 설치가 필요 chunws13.tistory.com 백엔드 로그인 기능 구현이 끝났다면, 프론트엔드에서 응답을 받아 로그인을 구현하는 뷰를 만들어 보자 React 설치하는 방법은 이전에 작성한 적이 있으므로 생략한다. npm install axios npm install react-cookie 백엔드로 요청을 보내기 위해 axios, 응답한 내용 (로그인이 되었다는 증거)을 cookie에 저장하기 위해.. 2023. 11. 17. 이전 1 다음
