[TIL] 내일배움캠프 React 과정 2022.12.18_Thunk

Redux thunk 이해하기 Redux 미들웨어란? 리덕스에서 dispatch를 하면 action이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환한다. 근데 미들웨어를 사용하면 action이 Reduxer로 전달되는 과정 사이에 하고 싶은 작업들을 넣어서 할 수 있다. 만약 counter 프로그램에서 더하기 버튼을 클릭했을 때 바로 +1을 더하지 않고 3초를 기다렸다가 +1이 되도록 구현하려면 미들웨어를 사용해서 구현해야 한다. 원래는 dispatch가 되자마자 바로 action이 리듀서로 달려가서 새로운 state를 반환하는데 여기서 “3초를 기다리는 작업"을 미들웨어가 해주는 것이다. 리덕스 미들웨어를 사용하는 이유는 서버와의 통신을 위해서 사용하는 것이 대부분이고, 또한 그중에서도많이 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 18.
• textsms

[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..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 18.
• textsms

[TIL] 내일배움캠프 React 과정 2022.12.17

Today I Learned React 심화 강의 수강 vercel React 배포에 실패했던 이유 찾기 어제 이런 에러 메시지가 뜨면서 vercel배포에 실패했었는데 뭔가 실마리를 찾은 거 같다..! 내가 이렇게 REACT 폴더 안에 프로젝트를 여러 개 만들어 놓고 REACT 폴더에서 yarn으로 styled-components와 reacr-router-dom을 설치했었다. 그리고 git에 올릴 때는 TO-DO-LIST-REDUX 폴더만 올렸으니 설치된 것들이 반영되지 않은 거였다. 이걸 어떻게 확인할 수 있냐면 package.json 파일을 확인하면 된다. TO-DO-LIST-REDUX 밖에 있는, 그러니까 최상위 폴더 REACT 폴더의 package.json를 보면 react-router-dom이 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 17.
• textsms

[TIL] 내일배움캠프 React 과정 2022.12.16

Today I Learned React 숙련 개인 과제 코드 리뷰 강의 수강 React 숙련 개인 과제 수정 Vercel로 React 배포하기 warning과 error 메시지가 뜨면서 deploy에 실패하고 있다. 오전 내내 에러 해결해보려다가 결국 포기했다 ㅎ https://vercel.com/guides/how-do-i-resolve-a-module-not-found-error text-overflow: ellipsis;가 적용되지 않던 문제 const TodoTitle = styled.h2` text-overflow: ellipsis; overflow: hidden; width: 250px; white-space: nowrap; margin: 10px 0; // 이 부분 수정함 display: f..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 16.
• textsms

[TIL] 내일배움캠프 React 과정 2022.12.15

Today I Learned React 숙련 개인 과제 수행 Redux로 TO DO LIST 구현하기 styled-components 사용하기 const Btn = styled.button` margin-right: 12px; height: 35px; width: 120px; border-radius: 20px; border: transparent; color: white; font-size: 16px; font-weight: bold; cursor: pointer; background-color: ${(props) => props.backgroundColor}; :hover { opacity: 0.8; } ` styled-components의 장점을 잘 보여주는 예시 코드. jsx에서 props를 넘겨..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 16.
• textsms

[TIL] 내일배움캠프 React 과정 2022.12.14

Today I Learned React 숙련 과정 개인 과제 수행 Redux로 TO DO LIST 구현하기 Spread Operator 이해하기 1. array에 사용하면 대괄호를 제거해주고, object에 사용하면 중괄호를 제거해준다. 2. 문자열에 사용하면 문자를 하나하나 쪼개 준다. +) 문자도 array처럼 인덱싱이 가능하다! string[0] => 'h' 3. spread를 사용하면 array, object를 복사할 때 값을 공유하지 않고 각각 독립적인 값을 저장하도록 할 수 있다. -> Deep Copy let a = [1, 2, 3] let b = [4, 5] let c = [...a] console.log(c) // [1, 2, 3] let c = [...a, ...b, 8] console..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 15.
• textsms

[TIL] 내일배움캠프 React 과정 2022.12.13

Today I Learned React 숙련 개인 과제 시작 Redux로 TO DO LIST 구현하기 시작부터 에러 메시지: could not find react-redux context value Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a 라는 에러 메시지가 뜨면서 useSlector 이용해서 state를 불러오는 데 실패하고 있다. // 추가할 코드 import store from "./redux/config/configStore"; import { Provider } from "react-redux"; const root = ReactDOM.createRoot(..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 14.
• textsms

[TIL] 내일배움캠프 React 과정 2022.12.12_react-router-dom

Today I Learned React 숙련 강의 수강 Redux 특강 복습 React 숙련 강의 react-router-dom이란? 페이지 이동을 구현할 수 있게 해주는 패키지. react-router-dom을 이용하면 SPA 기반인 리액트 프로젝트 안에서 여러 개의 페이지를 구현할 수 있다. 사용방법 순서 페이지 컴포넌트 생성 Router.js 생성 및 router 설정 코드 작성 App.js에 import 및 적용 페이지 이동 테스트 react-router-dom 사용하기 페이지 컴포넌트 생성 pages 폴더를 만들어서 다음과 같이 컴포넌트를 생성한다. Router.js 생성 및 route 설정 코드 작성 // src /shared/Router.js // 1. react-router-dom을 사용하..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 12.
• textsms

[WIL] 내일배움캠프 여섯째 주_React 공부 시작!

이번 주부터 드디어 리액트 공부를 시작했다. 아직 리액트를 공부한 지 일주일밖에 안 됐다는 게 놀랍기도 하다. 벌써 2주는 지난 거 같은 기분이라서ㅋㅋ 그래도 짧은 시간 안에 리액트와 많이 친해진 거 같다. 처음에 입문 강의 들을 때는 props가 뭐고 state가 뭔지 개념이 이해가 잘 안 됐었는데 개인 과제 수행하면서 구조와 흐름이 처음보다는 이해가 잘 되는 거 같다. 리액트 입문 개인 과제 -> To Do List 만들기 https://github.com/heegeer/React/tree/main/TO-DO-LIST 나름 폰트도 적용하고 튜터님 피드백까지 반영해서 정성 들인 결과물이다 ㅎㅎ 리액트 강의가 입문 -> 숙련 -> 심화 순으로 이루어져 있는데 지금은 숙련 단계에서 리덕스를 배우고 있다. ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 12.
• textsms

[TIL] 내일배움캠프 React 과정 2022.12.11_Redux

Today I Learned React 숙련 강의 수강 React 숙련 강의 리덕스의 흐름 도식화 View 에서 액션이 일어난다. dispatch 에서 action이 일어나게 된다. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다. middleware 에서 명령 내린 일을 수행하고 난 뒤, reducer 함수를 실행한다. (3, 4번은 아직 몰라도 됩니다!) reducer 의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다. 출처 https://velog.io/@annahyr/리덕스-흐름-이해하기 counter.js 모듈의 state 수정 기능 만들기 (+ 1 기능 구현해보기) 어떻게 coun..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 11.
• textsms