thunk4 [WIL] 내일배움캠프 여덟째 주_Redux-Thunk 이해하기 거의 3주 가까이 React -> Redux -> Thunk(DB 사용) 단계를 거치면서 리액트를 배우고 있다. 처음 시작할 때만 해도 이렇게 지겹도록 투두리스트를 보게 될 줄은 몰랐는데 그래도 처음과 비교하면 어느새 수정 기능도 생기고 내 투두리스트가 점점 진화하고 있는 거 같다. thunk 함수와 axios를 이용해서 투두리스트를 구현할 때 어려웠던 부분은 서버와 통신해서 데이터를 가져오고, 또 그 데이터를 state에 넣기까지 공백이 생긴다는 점이었다. 만약 데이터를 가져오는 데 성공한다고 하면 세 단계를 거치는데 일단 initialState에 설정해놓은 todos의 빈 배열이 pending을 거쳐서 fulfilled 단계에 갔을 때만 빈 배열 안에 서버의 데이터가 채워지기 때문에 이것을 위해 추가.. 2022. 12. 26. [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. 이전 1 다음
