react39 [WIL] 내일배움캠프 여덟째 주_Redux-Thunk 이해하기 거의 3주 가까이 React -> Redux -> Thunk(DB 사용) 단계를 거치면서 리액트를 배우고 있다. 처음 시작할 때만 해도 이렇게 지겹도록 투두리스트를 보게 될 줄은 몰랐는데 그래도 처음과 비교하면 어느새 수정 기능도 생기고 내 투두리스트가 점점 진화하고 있는 거 같다. thunk 함수와 axios를 이용해서 투두리스트를 구현할 때 어려웠던 부분은 서버와 통신해서 데이터를 가져오고, 또 그 데이터를 state에 넣기까지 공백이 생긴다는 점이었다. 만약 데이터를 가져오는 데 성공한다고 하면 세 단계를 거치는데 일단 initialState에 설정해놓은 todos의 빈 배열이 pending을 거쳐서 fulfilled 단계에 갔을 때만 빈 배열 안에 서버의 데이터가 채워지기 때문에 이것을 위해 추가.. 2022. 12. 26. [TIL] 내일배움캠프 React 과정 2022.12.25 Today I Leraned 팀 프로젝트 진행 input 입력 문제 해결 useEffect(() => { // 첫 렌더링 시 form help text 띄우지 않도록 if (!userId) return ; onChangeUserIdHandler() }, [userId]); input에 '12345'를 입력하면 '1234'로 인식하던 문제를 해결했다. useEffect를 사용해서 userId(=input value)가 변할 때마다 유효성 검사를 하는 onChangeIdHandler 함수를 실행해주라고 코드를 작성했다. 그런데 이렇게 했더니 로그인 페이지 들어가자마자 아이디 input 밑에 "아이디를 입력하세요"라는 메시지가 뜨는 게 보기 싫어서 userId에 입력된 값이 없다면 아무것도 실행하지 말아라!라.. 2022. 12. 26. [TIL] 내일배움캠프 React 과정 2022.12.24 Today I Learned 팀 프로젝트 진행 팀 프로젝트 진행 기록 로그인한 유저가 누구인지 어떻게 알 수 있지? 머리 감다가 갑자기 누가 로그인했는지 어떻게 특정할 수 있는지 궁금해졌다. 로그인 페이지에서는 input에 입력한 값으로 아이디와 비밀번호를 DB에서 조회해서 find()로 찾아낸다. 그런데 로그인 페이지를 벗어났을 때는 지금 로그인한 게 누구인지 어떻게 알 수 있을까? 만약에 마이페이지에 현재 로그인한 유저의 아이디를 보여준다고 할 때 find()를 어떤 값과 대조해서 가져와야 하는 걸까? 검색하다 보니 로그인한 유저의 정보를 로컬스토리지 혹은 세션스토리지에 저장해야 하는 거 같다. 나는 로컬스토리지를 사용하기로 했기 때문에 로컬스토리지에 대해서 더 알아보기로 했다. localStorag.. 2022. 12. 25. [TIL] 내일배움캠프 React 과정 2022.12.22 Today I Learned 리액트 팀 프로젝트 시작! React-Query 강의 시청 React-Query 상태의 종류 클라이언트 상태 : 뷰를 위한 데이터 한 유저만을 위한 데이터 (세션 간 지속될 필요 없는 데이터) 예시) input 입력 값을 state로 관리(렌더링에 반영하기 위한 데이터) 서버 상태 : 서버에서 가지고 오는 데이터 여러 유저가 공유해야하는 데이터 (세션 간 지속되어야 하는 데이터) 예시) 게시물 리스트 (DB에 저장되어 있는 데이터) React Query 상태 관리 흐름 fetching : 데이터 요청 중 fresh : 데이터를 갓 받아온 직후 / 컴포넌트의 상태가 변하더라도 데이터 재요청하지 않음 stale : 데이터 만료 / 최신화가 필요한 데이터 inactive : 쿼리가.. 2022. 12. 22. [WIL] 내일배움캠프 일곱째 주_Redux 이해하기 이번 주는 리액트 숙련 과정과 개인 과제를 진행하면서 리덕스의 작동 흐름을 이해하기 위해 노력했다. 결과적으로 수정하기까지 구현에 성공해서 과제를 제출할 수 있었다. 공부하면서 이해가 안 되는 부분들은 튜터님들께 가져가서 질문했고 그 과정에서 배우는 것들은 혼자 공부했을 때보다 더욱 기억에 남았다. 주말에는 리액트 심화 과정인 redux toolkit, json-server, axios 강의를 들었는데 이제 좀 redux를 이해하나 싶었는데 새로운 개념들이 한꺼번에 등장하니까 너무 어렵다. 하지만 결국엔 프로젝트를 진행하면서 흐름을 이해하고, 극복할 수 있을 거라고 믿는다! 숙련 과제 vercel로 배포하고 싶었지만 실패하고 gif 파일로 결과물을 기록한다 ㅎㅎ 이번 주의 TIL 목록 [TIL] 내일배움.. 2022. 12. 19. [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. [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이 .. 2022. 12. 17. [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.. 2022. 12. 16. [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를 넘겨.. 2022. 12. 16. [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.. 2022. 12. 15. 이전 1 2 3 4 다음
