리액트 오류 : Too many re-renders. React limits the number of renders to prevent an infinite loop.

[원인] 로그인 에 onClick이벤트에서 리랜더링이 무한으로 돌아서 오류 발생 [해결] { setIsMember(false); }} > 로그인 화살표 함수 제대로 활용하기 onChange = {(event)=>{ } } 끝.

• format_list_bulleted React
• · 2023. 11. 29.
• textsms

[리액트 심화] 비동기통신 Axios interceptor

1. Axios interceptor 개념과 필요성 (1) 개념 - 반복적으로 발생하는 일을 일괄적으로 처리 가능한 작업 - [요청] --- [interceptor] --- [응답] (2) 필요성 - get,post,delete에 포트번호가 변경되면 모두 찾아서 변경해줘야함 - 요청 헤더 추가 / 인증 관리 / 로그 관련 로직 삽입 / 에러 핸들링 에서 좋음 2. vs code : Axios interceptor 적용 src > [.env] REACT_APP_SERVER_URL = http://localhost:4002 ▶여기다 적어놓고 App.js에서 사용할 예정 src > [App.js] //[조회] const fetchTodos = async () => { //const { data } = awai..

• format_list_bulleted React
• · 2023. 11. 28.
• textsms

리액트 오류 : A component is changing a controlled input to be uncontrolled.

[App.jsx] import { useEffect, useState } from 'react'; import './App.css'; import axios from 'axios'; function App() { const [todos, setTodos] = useState(null); const [inputValue, setInputValue] = useState({ //id : json의 방식의 데이터는 자동으로 입력됨 title: '', }); const fetchTodos = async () => { const { data } = await axios.get('http://localhost:4002/todos'); console.log('data', data); setTodos(data); }; ..

• format_list_bulleted React
• · 2023. 11. 28.
• textsms

[리액트 심화] 비동기통신 Axios 사용방법 (GET 메소드 사용)

▼비동기통신 Axios 사용방법 (GET, POST, DELETE, FETCH)▼ [리액트 심화] 비동기통신 Axios 사용방법 (GET, POST, DELETE, FETCH) 1. GET: 데이터 조회 import { useEffect, useState } from 'react'; import './App.css'; import axios from 'axios'; function App() { const [todos, setTodos] = useState(null); const [inputValue, setInpuValue] = useState({ //id : json의 방식의 데이터 zerotonine2da.tistory.com 1. Axios란? - Promise 기반 HTTP 통신 가능한 라이브러..

• format_list_bulleted React
• · 2023. 11. 28.
• textsms

[리액트 심화] HTTP 통신 / URL 구성

(1) HTTP 통신 - 개념 : 데이터로 이루어진 communication ( 웹서버 - 웹브라우저 : 서버 - 클라이언트) - (약속 = 프로토콜) - HTTP 프로토콜 = 웹에서 서버와 클라이언트의 상호간 약속 (2) Request (요청) Response(응답) (3) URL 구성 (4) 메서드 (client -> server) GET - 조회 POST - 생성 PUT, PATCH - 변경 DELETE - 삭제 [참고] HTTP request methods - HTTP | MDN HTTP defines a set of request methods to indicate the desired action to be performed for a given resource. Although they ca..

• format_list_bulleted React
• · 2023. 11. 28.
• textsms

[리액트 심화] json-server 사용 방법 (+ 특정 포트 지정)

1. json-server란? - 아주 간단한 DB와 API 서버를 생성해주는 패키지 - 임시적으로 사용할 mock data 생성 위함 (테스트용) 2. json-server 사용하기 (1) vs 코드 터미널 : json-server 추가 yarn add json-server (2) src - db.json 파일 생성 [db.json] { "posts": [{ "id": 1, "title": "json-server", "author": "typicode" }], "comments": [{ "id": 1, "body": "some comment", "postId": 1 }], "profile": { "name": "typicode" } } ▶ key 부분이 쌍따옴표여서 json임 (3) JSON serve..

• format_list_bulleted React
• · 2023. 11. 28.
• textsms