리액트 게시판

React/Typescript/Redux/firebase/scss 게시판 만들기 리덕스/타입스크립트 설치 ># Redux + TypeScript template npx create-react-app my-app --template redux-typescript scss 설치 >npm install -g node-sass 현재 내 파일 경로 D:\jav...

라우터 웹 개발에서는 사용자의 요청에 따라 적절한 컴포넌트나 페이지로 연결해주는 기능을 가진 도구나 라이브러리를 의미 수정전 코드 원하는 형태의 ui 위 코드의 ui 위 코드에서 나오는 형태의 ui는 board 컴포넌트가 같이 출력 된다 Routes밖에 Board와 Link를 선언 했기 때문에 다른 컴포넌트에서 존재감 나타낸다 내가 작성 했던 구조...

파이어베이스에서 새 프로젝트 생성 후 연동

Ui App.tsx 파이어베이스/회원가입/로그인 구현 파이어베이스회원가입 공홈 블로그 참고 Link/useNavigate 본문 const [init, setInit] = useState(false); 폼을 가진 컴포넌트에서는 사용자가 데이터를 입력하기 전에 초기화

순서 1 회원가입버튼 클릭시 2 회원가입 페이지 연동 3 내용입력 후 회원가입 후 로그인 페이지 연동 4 파이어베이스에 유저 추가 된것 확인 Sign.tsx 파이어베이스/회원가입/로그인 구현 파이어베이스회원가입 공홈 블로그 참고 useNavigate는 라우터 훅중 하나이며 페이지 간 이동을 하기 위해서 사용 사용법 const naviga

Login.tsx 로그인 구현 로그인 구현 파베 공홈 return 회원가입이랑 코드와 비슷 하다

파이어베이스 데이터 경로 컬렉션 > 도큐멘트 > 필드 ui 화면 Form.tsx Board Component 데이터 가져오기 에러 Type 'Date' is not assignable to type 'ReactNode' 'Date' 타입은 'ReactNode'

수정한 이유 로그인 후 데이터가 출력이 되지만 새로고침 하면 사라지는 이슈 때문에 상태관리 라는 것으로 해결을 해보기 위해서 리덕스 툴킷을 잠시 강의를 듣고 공부를 하고 왔다😭😭😭😭😭🤮 어렵다...솔직하게 이해 하기 어려워서 좀 많이 해매다가 정신이 안드로메

크게 수정 된 점은 없다

전체 코드 학습 Provider : Redux 스토어를 React 애플리케이션의 모든 컴포넌트에 제공하기 위해 사용 PersistGate: 새로 고침되어도 상태가 유지/이전에 저장된 상태를 로드하여 Redux 스토어에 복원 loading={null}: 로딩 화면을 사용하지 않고, Redux Persist가 초기화될 때까지 다른 컴포넌트를 렌더링하고 싶을 ...

전체코드 학습 Redux Store와 redux-persist를 연동(사용 하기위해 라이브러리 연동) persistConfig객체를 만든다 persistConfig와 rootReducer를 파라미터로 받는 persistedReducer 만든다 export const persistor = persistStore(store); Redux Persist가 설...

로그인 한 유저의 정보가 state에 담는 코드

전체 코드 변경된 코드 글쓰기 버튼을 누르면 /form으로 이동 될때 board state가 생성 되기 위해서 boardSlice 생성 후 해당 reducer 추가 학습 useDispatch React 애플리케이션에서 Redux 스토어로 액션을 보내는 데 사용 Redux에서 정의한 액션을 호출할 수 있어서 애플리케이션의 상태를 제어 BrowserRou...

전체 코드 학습 Reducer action을 실제로 처리 하는 함수 export type RootState = ReturnType; 함수의 반환 타입을 추출하는 TypeScript 내장 타입 rootReducer 함수의 반환 타입을 추출 RootState라는 새로운 타입을 정의 RootState 타입은 rootReducer 함수가 반환하는...

글쓰기 버튼 누르전 글쓰기 버튼 누른 후 전체코드 App.ts에 있는 글쓰기버튼에 있는 creatBoard와 연동되어 board state 생성 학습 creatBoard: (state: any, action) => {} 액션 타입 및 데이터는 액션 객체 내에 type 및 payload와 같은 필드로 포함 파라미터 state : Redux 스토어의 상...

ui 데이터 등록 전 데이터 등록 후 전체코드 학습 useDispatch : Redux 스토어에 액션을 디스패치(dispatch)하는 데 사용 useSelector : Redux 스토어의 상태(state)를 선택하는 데 사용

전체 코드 학습 createAsyncThunk를 사용하여 Firebase와 상호작용하면서 비동기 작업을 수행하는 액션 생성자 함수인 addUserData를 정의 함수는 두 개의 제네릭 타입 매개변수 addUserData = createAsyncThunk 1번 매개 변수 : 액션 생성자 함수가 반환하는 액션 객체의 형태를 정의 2번 매개 변수 : 액션 객...

state 전체코드 학습 Record Record 제네릭 참고 TypeScript에서 제공되는 제네릭 타입 특정 키(속성)와 그에 해당하는 값의 타입을 매핑하기 위해 사용되는 이름 있는 타입 1번 제네릭 객체의 키(속성)는 모두 숫자(number) 2번 제네릭 객체의 각 키(숫자)에 대응하는 값은 배열 BrowserRouter 블로그 참고

전체 코드 학습 Object.values() Object.values() 상위 객체를 돌면서 각 상위 객체의 값들만을 배열로 반환 props.timedata.toString() Type 'Date' is not assignable to type 'ReactNode' 블로그 참고 Date 객체는 기본적으로 React가 이해하지 못하는 데이터 타입으로 원하...

🦒 처음 부터 다시 정리

import Board(){} return 고치기전 코드 학습 Object.values() Object.values() 상위 객체를 돌면서 각 상위 객체의 값들만을 배열로 반환 사용한 이유는 모든 데이터들을 출력 하기 위해서 사용 props.timedata.toString() Type 'Date' is not assignable to type 'R...

import BoardSlice 학습 creatBoard: (state: any, action) => {} 액션 타입 및 데이터는 액션 객체 내에 type 및 payload와 같은 필드로 포함 파라미터 state : Redux 스토어의 상태(state)현재 상태를

impot Form(){} return 학습 navigate navigate/Link 차이 블로그참고 React.FormEvent<HTMLFormElement/ e.preventDefault(); 폼 이벤트를 다루기 위한 TypeScript의 이벤트 타입

비동기 함수 impot addUserData 학습 const { title, content } = boarditem; -비구조화 할당 참고 material nanoid getAuth firbase 공홈 현재 로그인한 사용자 가져오기 파이어베이스 데이터 추가

import boardItemSlice 학습 Recode 블로그 참고 객체 비구조화 할당 action.payload 객체에서 boardId와 boarditem 프로퍼티를 추출하여 새로운 변수에 할당하는 역할

import Page(){} return 학습 Cannot read properties of undefined (reading '0') 오류는 주로 배열이나 객체의 속성에 접근하려고 할 때 해당 배열 또는 객체가 정의되지 않았을 때 발생

import deleteuserdata 학습 createAsyncThunk T: 첫번째 파라미터 비동기 함수가 작업의 결과물의 타입을 지정 Z: 두번째 파라미터 파라미터로 받을 데이터의 타입을 지정 파이어베이스 데이터 삭제 파이어베이스 공홈 데이터 삭제

데이터 삭제하는 slice import boardItemDelelteSlice 학습 Recode 블로그 참고 객체 비구조화 할당 action.payload 객체에서 boardId와 boarditem 프로퍼티를 추출하여 새로운 변수에 할당하는 역할

수정 하는 페이지 import Modify modifyUserData에서 선택되는 값은 선택된 boardId와 사용자 입력 데이터 return 수정 화면에서는 기존에 있었던 데이터가 input창에 출력 되도록 작업 사용자가 입력 하는 값에는 isModified를 추가 하여 수정전 false 수정 후 true로 변경 되도록 작업

처음 데이터가 출력되는 상세페이지 import Page Window.confirm() 모달 대화 상자 getFullYear 날짜 return &&논리연산자 🦒추가 사항 보완된 부분은 사용자에 맞게 수정 버튼 유무 삭제버튼 클릭시 모달창 뜨고 확인을 누르면 데이터 삭제 그리고 보기 쉽게 하기 위해 페이지 마다 중복된 설명글은 줄이고 함수 경우 ...

수정 된 데이터가 보여 지는 상세페이지 import ModifyPage return &&논리연산자 moDataVar.userUid === uidVar && moDataVar.did === boardId && (코드) moDataVar.userUid의 값과 uiVar이 true고 moDataVar.did와 boardId이 true 일때 (코드)출력 첫...

데이터를 수정 하기위한 비동기 import modifyUserData createAsyncThunk T:첫 번째 매개변수는 비동기 작업을 시작할 때 함수에 전달되는 인자의 타입 Z:두 번째 매개변수는 비동기 작업이 성공적으로 완료될 때 반환되는 값의 타입 🦒추가로 수정사항은 선택한 보드와 유저가 가진 데이터의 id가 동일 할때 수정 할 수 있도록 ...

import 초기값 Record블로그 참고 T:key Y:객체 타입 boardItemModify 액션 객체에서 전달된 데이터를 포함하는 객체 const { boardId, boarditem: bItem } = action.payload; 기존 상태 복사 const updatedBoardItem = { ...state.boarditem }; 선택된id...

수정 사항페이지 네이션 1차 작업

보완 기능 1 수정 할때 비동기 문제 / 수정 한거 재 수정 안됨 2 삭제가 안됨 3 게시판 번호 4 로그아웃 10.24~10.25 수정 기능 완료 수정 재 수정 완료 삭제 기능 완료 10.26 게시판 번호 완료 로그아웃 완료 추가 기능 1 이미지 업로드/삭제/이

Form.tsx import 파이어베이스는 firebase.ts 연동 상태 return 전체 코드 블로그 참고

Page.tsx import 상태 이미지경로 : images/유저uid/페이지id/파일이름.확장자 전체코드 블로그 참고

수정하는 컴포넌트에서 등록 했던 기존 이미지 출력 import Modify컴포넌트 등록 했던 이미지 불러오기 listAll 사용 Promise.all 모든 Promise가 성공적으로 완료되었을 때 하나의 Promise로 반환됩니다. 즉, 여러 개의 비동기 작업을 동시에 진행하고, 모든 작업이 완료되면 결과를 반환하는데 사용됩니다. return

구상 page 컴포넌트에서 좋아요 버튼 추가 좋아요 버튼 클릭시 Thunk 활용 하여 파이어베이스에 좋아요 관련 데이터 추가 좋아요 수, 좋아요 선택/해제 1차 파이어베이스에서 데이터 경로 최상위 컬렉션> 최상위 도큐멘트> 상위 컬렉션> 상위 도큐멘트 여기에 하위 컬렉션을 추가 해서 좋아요 관련 데이터를 관리 하려고 함 Page컴포넌트 import r...

구현 해야할 목록 사용자 별 댓글 등록 답 댓글 사용자 별 댓글 수정/ 삭제 page컴포넌트에서 댓글 등록 구현 Comment컴포넌트 page component state에서 commentSlice 가져온 후 페이지 id 적용 Comment component 전체 코드 파이어베이스와 slice 연동 데이터가 등록 되는 것 확인 Slice 비구조...

page컴포넌트에서 props로 Comment로 넘김 이렇게 넘긴 이유는 page 마다 가지고 있는 번호가 있기에때문에 page/1가 가지고 있는 댓글 목록을 보여주기 위함 문제 사항 Commemt 컴포넌트에서 props로 넘겨 받은 데이터가 있으면 정상적으로 데이터가 출력 되는데 데이터가 없는 상태에서 objectComment가 빈배열에서 map을 ...

Comment 컴포넌트 Link로 props 전달 state 사용 CommentModifiy 컴포넌트 stat에 들어 온 값 확인 후 데이터의 경로로 사용 하여 원하는 값 출력 Slice와 Thnk 코드는 비슷 하지만 boolean값으로 수정 여부 데이터 추가 수정한 데이터 출력 Comment컴포넌트에서 commentModifyList === t...

Board 중복 코드, 사용하지 않는 라이브러리 정리 날짜 기존 코드 코드 수정 toLocaleDateString1 toLocaleDateString2 > 데이터 출력 기존 코드 문제점 조건을 건 상태에서 알맞은 페이지 이동는 되나 li안에 Link와 onClick 중복 조건이 제대로 되어 있지않아서 onClick의 함수 내용대로 이동 됨 수정...

코드정리 사용안하는 라이브러리 제거 사용자 정보 불러오기 기존 수정 입력 state 통합 기존 수정 addUserDatad 의 타입을 지정 하고 싶었는데 gpt에게 질문 한 결과.. > 일반적으로 Redux Toolkit에서 createAsyncThunk를 사

처음 데이터 입력 폼과 수정 폼의 ui는 동일 대신 수정에는 해당페이지의 id를 받는 형식 기존 수정 state 하나로 통합 form 컴포넌트와 크게 다른 부분은 없다

등록과 기존 코드와 크게 변동 사항 없음 삭제에서 변동 사항 있음 문제점 동일한 사용자면 이 사용자의 모든 댓글이 사라짐 아래는 삭제 관련 코드 기존 thunk slice 상태관리에서 데이터와 파이어베이스의 데이터를 비교 해서 관련 데이터를 삭제 수정 > const foundComment = userinputComments[boardId]?.f...

와 git add 하다가 뭐가 잘 못된건지 로컬에서 작업했던 모든게 다 날아 갔다 상황 master 브렌치에서 add, commit, push 완료 풀 리퀘스트 완료 했는데 git에 작업물이 올라온 것 인지 확인이 되질 않음 main브렌치로 다시 add 시도 중에 로컬 폴더 확인 했는데 모든 작업물이 사라진 상태 동공지진 왜 폴더가 다 사라졌는가에 대한 ...

현재 게시판 디자인 적용 하긴 전 배포 후 문제 사항 배포를 했는데 본인의 브라우저에서 작성한 글은 보이고 다른 브라우저에서 작성한 글은 보이지 않는 현상 확인 한 결과 내가 상태관에서 데이터를 가져 와서... 기억하자 내 브라우저의 상태관리와 다른 브라우저의 상태관리는 공유 될수 없다 >일반적으로 브라우저의 로컬 스토리지, 쿠키, 또는 클라이언트 측의 ...

만들었던걸 다시 보니 수정 해야할게 많아 보인다 당장 만들어보기 급급해서 보니 불변성을 지키지않은 것도 보이고 CRUD의 모든 데이터를 state에 전역상태관리를 하고 있었고 이렇게 되면 모든 컴포넌트가 리렌더링되고 성능의 저하가 될 수 있다고 한다 >그래서 유저정보 같은걸 상태관리에서 관리 하나보다 여기서도 문제 유저정보는 전역 상태관리에서 관리한다고...

수정 해야할 것중에 우선 사항은 보안을 먼저 6. 로그인한 유저 보안 고려 현재 로그인 했을때 문제 사항 유저의 모든 정보가 다 출력 됨 로그인 했을 때 유저를 리스트에 하나씩 저장 되어 있음 문제 사항 코드 수정 Login.tsx userDb uid,닉네임, 이메일 만 담기 uid는 마스킹 하여 정보를 가림 그리고 state는 유저 정보만 저장...

2. any 타입 정리 1. state 타입 reducer파일 수정 기존 수정 로그인을 따로 타입을 하나 더 추가 기존 수정 getState() 메서드의 반환 값을 RootLoginState 타입으로 정확히 타입 추론 할 수 있도록 수정 Redux Toolkit의 getState() 메서드는 기본적으로 상태의 타입을 알 수 없는 unknown 타...

리팩토링을 하면서 새로운 에러도 만났다 >Failed to save 'modifyForm.tsx': The content of the file is newer. Please compare your version with the file contents or overwrite the content of the file with your changes. 파일...