리액트 4

24.09.19 팀프로젝트 트러블슈팅

1. 문제발생내 로컬환경에서는 마이페이지의 feed가 무한스크롤로 잘 불러와지나, 팀원의 로컬환경에서는 불러와지지 않는 문제2. 원인추론팀원과 나의 json-server 버전이 달라 페이징 데이터 페칭관련 사용법이 달랐음1.0.0버전으로 사용하면 페이지 관련 데이터도 사용이 가능하나, 팀원이 사용하는 0.17.4버전에서는 해당 데이터를 제공해주지 않았음 const getFeedsByPageNum = async ({ queryKey, pageParam = 1 }) => { const userId = localStorage.getItem("userId"); const [_, page] = queryKey; const pageToFetch = page ?? pageParam; const..

2차 공부/TIL 2024.09.19

24.09.04 TIL STARTIFY 팀프로젝트 마무리

Startify여러분들은 계절마다 즐겨 듣는 노래가 있으신가요?'Startify'는 계절마다 어울리는 노래를 공유하고, 그 음악을 통해 사람들과 추억을 나눌 수 있는 공간입니다. 🔥배포 링크Startify - 내일배움캠프 6기 14조 📦폴더 구조폴더구조``` 📦react-startify┣ 📂public┃ ┗ 📜favicon.png┣ 📂src┃ ┣ 📂assets┃ ┃ ┣ 📜2024-09-03_12.32.21.png┃ ┃ ┣ 📜blankProfile.png┃ ┃ ┣ 📜delete.png┃ ┃ ┣ 📜dislike.png┃ ┃ ┣ 📜dislike01.png┃ ┃ ┣ 📜edit.png┃ ┃ ┣ 📜fall.png┃ ┃ ┣ 📜like.png┃ ┃ ┣ 📜like01.png┃ ┃ ┣ 📜li..

2차 공부/TIL 2024.09.04

24.07.03 TodoList페이지에 redux 사용하기

기존 TodoList는 props를 자식 컴포넌트에 넘겨주어 상태를 관리했다.이번엔 redux 라이브러리를 사용하여 전역 store에 state를 저장하고, 그것을 가져와 사용하는 것을 적용해보고자 한다. 먼저, redux 폴더를 만들고 config, modules폴더를 만들어 configStore, todo파일을 생성했다. 그리고 todo.jsx파일에 리듀서코드를 작성했다.Todo는 추가, 제거, 완료/취소 기능만 구현하면 되므로, 세가지 ActionValue를 만들어 기능을 구현하고자 한다.// src/modules/todo.js//Action Valueconst ADD_TODO = 'ADD_TODO';const TOGGLE_TODO = 'TOGGLE_TODO';const DELETE_TODO = '..

2차 공부/TIL 2024.07.03

24.06.28 리액트에 리덕스 연결하기

1. 리덕스 라이브러리 설치yarn add redux react-reduxredux와 react-redux 라이브러리 두개를 한번에 설치한다. 2. 모듈, 스토어를 분리해둘 폴더를 생성한다. 3. 스토어 파일을 작성한다.//configStore.jsimport { createStore } from 'redux';import { combineReducers } from 'redux';const rootReducer = combineReducers({});const store = createStore(rootReducer);export default store;1. createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드이다. 리덕스는 단일 스토어로 모든 상태 트리를 관리하며, 리덕스를 사..

2차 공부/TIL 2024.06.28