[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

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

Programmers 문제 풀기 각도기 function solution(angle) { switch (angle) { case 0 < angle < 90: return 1; case angle === 90: return 2; case 90 < angle < 180: return 3; case angle === 180: return 4; } } 며칠 전에 switch문을 공부했기 때문에 switch문으로 작성해봤지만 결괏값이 undefind가 뜬다. 혹시나 case 조건식을 넣으면 안 되는 건가 싶어 검색해 보니 안된다고 한다 ㅎㅎ 자바스크립트 switch 조건문 단점 : 상수 자바스크립트 swtich 조건문에는 case 값에 상수만 올 수 있고 변수, 조건식 등을 사용할 수 없다. (숫자 3, 문자 "H..

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

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

Today I Learned React 숙련 강의 수강 CS DB 기초 특강 시청 Redux 특강 시청 React 숙련 강의 useState 복습하기 const [state, setState] = useState(initialState); useState는 useState라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습으로 이루어져 있다. 만약 state가 원시 데이터 타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 한다. 함수형 업데이트 // 기존에 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것. setState((currentNum..

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