본문 바로가기

부트캠프교육중/react80

[todolist] 수정기능 구현 중 막히는부분 todolist 에서 수정기능을 구현중이다. 근데 api주소도 맞고 아무 이상이 없는데 계속 400에러가 떳다. 예상되는 문제는 수정되는 input 내용이 없어서 console이 안찍히는거 같았다. 그래서 밑에 input창을 하나 만들고 아무거나 찍은후 수정버튼을 누르니 정상 작용한다. 내용도 수정되었다. 이제 해결해야할부분은 내가 구현하려는건 수정버튼을 누르면 input창이 뜨면서 입력한 값으로 수정이 되는거다. 현재는 반대현상이라고 표현할수있을것 같다. 일단 내가 더 진행해야 할 방향은 방향을 좀 바꿔야할것같다. 현재처럼 하지말고 수정버튼을 누르면 input창과 제출버튼이 나오고 제출버튼을 onClick하면 저 함수가 이루어지게 해야한다. 일단 현재까지의 코드를 올려야겠다. todo import { .. 2023. 6. 17.
작업시 기본틀(계산기형태) App.js import { BrowserRouter, Routes, Route } from "react-router-dom"; import "./App.css"; import Home from "./Page/Home"; import Login from "./Page/Login"; import SignUp from "./Page/SignUp"; import Todo from "./Page/Todo"; function App() { return ( ); } export default App; Login.js import styled from "styled-components"; const Body = styled.div` border: 5px solid red; display: flex; justify-c.. 2023. 6. 13.
코드분할, lazy, suspense -대부분 React 앱들은 Webpack, Rollup과 같은 툴을 사용해 번들링(Bundling)합니다. -“그렇다면 어느 페이지에서 코드를 해석하고 실행하는 정도가 느려졌는지 파악해서 번들을 나눈 뒤에 지금 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러올 수 있지 않을까??” -이것이 코드 분할의 핵심 아이디어입니다. 번들이 거대해지는 것을 방지하기 위한 좋은 해결 방법은 번들을 물리적으로 나누는 것입니다. 코드 분할은 런타임 시 여러 번들을 동적으로 만들고 불러오는 것으로, Webpack, Rollup과 같은 번들러가 지원하는 기능입니다. -따라서 코드 분할을 하게 되면 지금 당장 필요한 코드가 아니라면 따로 분리를 시키고, 나중에 필요할 때 불러와서 사용할 수 있습니다. 이를 통하여 대.. 2023. 3. 25.
Custom Hook 실습 #기존 // App.js import "./styles.css"; import { useEffect, useState } from "react"; export default function App() { const [data, setData] = useState(); useEffect(() => { fetch("data.json", { headers: { "Content-Type": "application/json", Accept: "application/json" } }) .then((response) => { return response.json(); }) .then((myJson) => { setData(myJson); }) .c.. 2023. 3. 23.

티스토리툴바