[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에 입력된 값이 없다면 아무것도 실행하지 말아라!라..

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

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

Today I Learned 팀 프로젝트 진행 팀 프로젝트 진행 기록 로그인한 유저가 누구인지 어떻게 알 수 있지? 머리 감다가 갑자기 누가 로그인했는지 어떻게 특정할 수 있는지 궁금해졌다. 로그인 페이지에서는 input에 입력한 값으로 아이디와 비밀번호를 DB에서 조회해서 find()로 찾아낸다. 그런데 로그인 페이지를 벗어났을 때는 지금 로그인한 게 누구인지 어떻게 알 수 있을까? 만약에 마이페이지에 현재 로그인한 유저의 아이디를 보여준다고 할 때 find()를 어떤 값과 대조해서 가져와야 하는 걸까? 검색하다 보니 로그인한 유저의 정보를 로컬스토리지 혹은 세션스토리지에 저장해야 하는 거 같다. 나는 로컬스토리지를 사용하기로 했기 때문에 로컬스토리지에 대해서 더 알아보기로 했다. localStorag..

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

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

Today I Learned 회원가입 유효성 검사 추가 로그인 기능 구현 팀 프로젝트 진행 기록 회원가입 시 DB 구조 수정하기 "users": [ { "id": "93e88455-88ac-4aa1-92f8-d02e06748d3a", "userId": "eeee", "userPw": "12345678", "userName": "f", "isLogin": true }, ] 회원가입할 때 서버에 이런 구조로 데이터가 저장되는데 기본적으로 userId와 userPw, userName을 저장했다. 그리고 애초에 가입할 때 userId가 중복되지 않게 할 거라 id가 필요할까 생각하고 넣지 않았었는데 json-server가 자동으로 생성해주길래 얘를 아예 uuid로 설정하고 마이페이지의 param.id로 쓰기로 ..

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

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

Today I Learned 리액트 팀 프로젝트 시작! React-Query 강의 시청 React-Query 상태의 종류 클라이언트 상태 : 뷰를 위한 데이터 한 유저만을 위한 데이터 (세션 간 지속될 필요 없는 데이터) 예시) input 입력 값을 state로 관리(렌더링에 반영하기 위한 데이터) 서버 상태 : 서버에서 가지고 오는 데이터 여러 유저가 공유해야하는 데이터 (세션 간 지속되어야 하는 데이터) 예시) 게시물 리스트 (DB에 저장되어 있는 데이터) React Query 상태 관리 흐름 fetching : 데이터 요청 중 fresh : 데이터를 갓 받아온 직후 / 컴포넌트의 상태가 변하더라도 데이터 재요청하지 않음 stale : 데이터 만료 / 최신화가 필요한 데이터 inactive : 쿼리가..

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

[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 페이지에서..

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

[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 안에 들어있다. 그래서 위의 버튼을 누르면 서버에서 ..

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

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

Today I Learned React 심화 강의 수강 코딩애플에서 Promise 관련 강의 수강 React 심화 강의 global state에 db.json에서 가져온 데이터를 넣는 과정 // todosSlice.js const initialState = { todos: [], isLoading: false, error: null, }; initialState에 todos의 값은 빈 배열이다. // db.json { "todos": [ { "id": 1, "title": "리액트 정복", "content": "리액트랑 친해지기", "isDone": false }, { "id": 2, "title": "코딩 공부하기", "content": "성실하게! 열심히!", "isDone": true } ] } d..

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

[WIL] 내일배움캠프 일곱째 주_Redux 이해하기

이번 주는 리액트 숙련 과정과 개인 과제를 진행하면서 리덕스의 작동 흐름을 이해하기 위해 노력했다. 결과적으로 수정하기까지 구현에 성공해서 과제를 제출할 수 있었다. 공부하면서 이해가 안 되는 부분들은 튜터님들께 가져가서 질문했고 그 과정에서 배우는 것들은 혼자 공부했을 때보다 더욱 기억에 남았다. 주말에는 리액트 심화 과정인 redux toolkit, json-server, axios 강의를 들었는데 이제 좀 redux를 이해하나 싶었는데 새로운 개념들이 한꺼번에 등장하니까 너무 어렵다. 하지만 결국엔 프로젝트를 진행하면서 흐름을 이해하고, 극복할 수 있을 거라고 믿는다! 숙련 과제 vercel로 배포하고 싶었지만 실패하고 gif 파일로 결과물을 기록한다 ㅎㅎ 이번 주의 TIL 목록 [TIL] 내일배움..

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

[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