본문 바로가기

홈페이지만들기5

[FastAPI] Project Levup - 메모 수정 & 삭제 기능 만들기 https://chunws13.tistory.com/52 [React] Project Levup - Axios 활용하기 백엔드에서 구현한 사항 : 메모 만들기, 메모 조회하기 백엔드에서는 로그인이 완료되면 토큰을 발급하고, 토큰과 함께 메모 조회 요청을 하면 해당 ID로 작성한 메모를 가져오도록 구현했다. 먼 chunws13.tistory.com 프론트엔드에서 메모 읽기와 쓰기 기능을 받아서 구현을 완료했으므로, 메모 수정 기능을 가진 api를 설계해 본다. 클라이언트에서 메모 id와 내용을 전달해 주면 memo db에서 id를 조회하여 저장된 내용을 바꾸면 될 것이다. 구현을 위해 클라이언트 측으로부터 받아야 하는 정보는 [ 메모 id, 수정할 내용, 로그인 토큰] 으로 총 3가지이다. 수정할 내용은 .. 2023. 11. 29.
[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 App 만들기 - 메모 기능 구현하기 2 구현이 필요한 기능들 구현한 적 있는 기능 현재 시간 알려주는 기능 (시계) 날씨 정보를 반환하는 기능 (API) 할 일을 등록할 수 있는 기능 (Form) 할 일 리스트를 보여주는 영역 (Todo-list) 할 일을 지울 수 있는 기능 새롭게 구현해 보고 싶은 기능 만다라트 생성 날씨 현황에 따른 배경화면 이펙트 다음으로는, 할 일을 지울 수 있는 기능을 추가해야 한다. 그 전에, 이전에 만들었던 코드 내용을 보면, 텍스트만 표기되기 때문에, 할 일 리스트에 중복된 데이터가 들어가는 경우 어떤 데이터를 지울지 식별하기 어려움이 있으므로, 할 일 데이터를 배열이 아닌 object 형식으로 변경하고, 각 할 일 에는 할 일의 Id값과 할 일의 value (내용) 을 추가하는 코드로 변경해야 한다. impo.. 2023. 6. 21.
React App 만들기 - 메모 기능 구현하기 구현이 필요한 기능들 구현한 적 있는 기능 현재 시간 알려주는 기능 (시계) 날씨 정보를 반환하는 기능 (API) 할 일을 등록할 수 있는 기능 (Form) 할 일 리스트를 보여주는 영역 (Todo-list) 할 일을 지울 수 있는 기능 새롭게 구현해 보고 싶은 기능 만다라트 생성 날씨 현황에 따른 배경화면 이펙트 두 번 째 기능 구현을 하기 전, 시계 기능을 하는 코드들을 별도 컴포넌트로 이동시켰다. 기능 별로 분리해서 관리하는 것이, 다른 페이지 구현 때 재사용하기에도 편리하고, 기능 수정 할 때 코드 찾는 것도 수월하기 때문이다. // App.jsx import './App.css'; import { useState } from 'react'; import Todos from './Todos.jsx.. 2023. 6. 20.
React App 만들기 - 준비 시작하기 전 오래 전, 무료 인터넷 강의를 통해 나만의 크롬 앱 만들기를 진행하였다. html과 css, javascript 를 가지고 만들고, github에 등록하여 내가 있는 지역의 날씨, 현재 시간, 할 일 메모의 기능이 포함 되어있다.강의를 보고 프로젝트를 진행하여, 각 기능들이 정상 작동되는 것을 확인하였으나, css 작업이 고통스러워서내 기준으로 완성이 덜 된 상태로 배포하게 되었고, 이후로는 작업하지 않았다.기능을 구현하는 것에 대해서는 많은 흥미를 느끼고 진행했고, 배포까지 완료된 후 인터넷 환경에서는 어디에서도 확인이 가능한 모습을 보고뿌듯함을 느꼈으나, 자주 들어가지 않은 탓에 점점 내 관심에서 멀어지고 있었다.그러던 어느날, 크롬 시작 페이지를 설정할 수 있다는 기능을 알게 된 후, .. 2023. 6. 14.