Frontend/Frontend 프로젝트9 [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. [Web RTC] 웹 RTC 구현해보기 - 1 1. 내 비디오 & 마이크에서 정보 가져오기async function start() { try { // 로컬 비디오, 마이크 stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); // 로컬 비디오 트랙과 오디오 트랙 추출 localVideoTrack = stream.getVideoTracks()[0]; localAudioTrack = stream.getAudioTr.. 2023. 7. 1. 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. 이전 1 2 다음
