axios6 [TIL] 2023.07.04 Vercel 배포 후 CORS 에러 해결하기 Access to XMLHttpRequest at 'http://localhost:3000/api/service' from origin 'https://test.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. dev 환경에서는 아무 문제 없었는데 Vercel로 배포한 후에 데이터를 조회화면서 CORS 에러가 발생했다. const getResvData = () => { return axios .get('http://localhost:3000/api/reservation') .then((res) => { return res.data.dat.. 2023. 7. 4. [TIL] 내일배움캠프 React 과정 2022.12.21 Today I Learned TO-DO-LIST Axios로 CRUD 구현하기 TO DO LIST Axios로 CRUD 구현하기 상세 페이지에서 새로고침 하면 에러가 뜨는 문제 상세페이지에 들어간 후에 새로고침을 하면 이렇게 ID가 undefined라며 에러가 뜬다. 지금까지 대수롭지 않게 생각했었는데 뭔가 이게 큰 문제라는 생각이 들어서 해결하고 싶어졌다. 또 다른 고생길의 시작... 콘솔에 찍어봤을 때 state가 3번의 과정을 거쳐서 저장되는 거 같다. 그래서 첫 번째, 두 번째 시도에는 state에 아예 값이 없어서 실패하고 state를 저장하지 못했던 거였다. 근데 그냥 Home에서 useEffect로 __getTodos를 실행했을 때는 이런 문제가 없었는데 왜 Detail과 Edit 페이지에서.. 2022. 12. 21. [TIL] 내일배움캠프 React 과정 2022.12.20 Today I Learned 코딩애플 axios 관련 강의 수강 TO DO LIST Axios로 구현하기 코딩애플 AXIOS AJAX 요청하는 방법 import axios from 'axios' function App(){ return ( { axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{ console.log(결과.data) }) .catch(()=>{ console.log('실패함') }) }}>버튼 ) } 1. axios를 쓰려면 상단에 import하고 2. axios.get(URL) 이러면 그 URL로 GET 요청이 된다. 3. 데이터 가져온 결과는 결과.data 안에 들어있다. 그래서 위의 버튼을 누르면 서버에서 .. 2022. 12. 20. [WIL] 내일배움캠프 일곱째 주_Redux 이해하기 이번 주는 리액트 숙련 과정과 개인 과제를 진행하면서 리덕스의 작동 흐름을 이해하기 위해 노력했다. 결과적으로 수정하기까지 구현에 성공해서 과제를 제출할 수 있었다. 공부하면서 이해가 안 되는 부분들은 튜터님들께 가져가서 질문했고 그 과정에서 배우는 것들은 혼자 공부했을 때보다 더욱 기억에 남았다. 주말에는 리액트 심화 과정인 redux toolkit, json-server, axios 강의를 들었는데 이제 좀 redux를 이해하나 싶었는데 새로운 개념들이 한꺼번에 등장하니까 너무 어렵다. 하지만 결국엔 프로젝트를 진행하면서 흐름을 이해하고, 극복할 수 있을 거라고 믿는다! 숙련 과제 vercel로 배포하고 싶었지만 실패하고 gif 파일로 결과물을 기록한다 ㅎㅎ 이번 주의 TIL 목록 [TIL] 내일배움.. 2022. 12. 19. [TIL] 내일배움캠프 React 과정 2022.12.18_Thunk Redux thunk 이해하기 Redux 미들웨어란? 리덕스에서 dispatch를 하면 action이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환한다. 근데 미들웨어를 사용하면 action이 Reduxer로 전달되는 과정 사이에 하고 싶은 작업들을 넣어서 할 수 있다. 만약 counter 프로그램에서 더하기 버튼을 클릭했을 때 바로 +1을 더하지 않고 3초를 기다렸다가 +1이 되도록 구현하려면 미들웨어를 사용해서 구현해야 한다. 원래는 dispatch가 되자마자 바로 action이 리듀서로 달려가서 새로운 state를 반환하는데 여기서 “3초를 기다리는 작업"을 미들웨어가 해주는 것이다. 리덕스 미들웨어를 사용하는 이유는 서버와의 통신을 위해서 사용하는 것이 대부분이고, 또한 그중에서도많이 .. 2022. 12. 18. [TIL] 내일배움캠프 React 과정 2022.12.18_Axios Today I Learned React 심화 강의 수강 Axios 이해하기 Axios란? 공식문서에서는 axios를 node.js와 브라우저를 위한 Promise 기반 http 클라이언트라고 소개하고 있다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하시면 된다. Axios GET // url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있다. // config는 axios 공식문서에서 확인한다. axios.get(url[, config]) // GET get은 서버의 데이터를 조회할 때 사용한다. Axios config 공식문서 소개 링크 // src/App.js import React, { useEffect, useState } fro.. 2022. 12. 18. 이전 1 다음
