본문 바로가기

분류 전체보기93

SyntaxError: Unexpected token e in JSON at position 0 에러 상황 게시물 내용을 수정하는 patch 요청을 날렸는데, 계속 리듀서 슬라이스까지 가지 못하고 thunk 부분에서 에러가 났다. SyntaxError: Unexpected token e in JSON at position 0 작성했던 코드 export const __updateLetter = createAsyncThunk("updateLetter", async (payload, thunkAPI) => { try { const response = await axios.patch(`${process.env.REACT_APP_JSON_SERVER_URL}/letters/${payload.id}`, payload.content); return thunkAPI.fulfillWithValue(response... 2024. 2. 21.
react-query useQuery / useMutation react-qeury란 React에서 데이터를 관리하기 위한 라이브러리이다. 주로 백엔드와 데이터 통신을 담당한다. 서버에서 가져온 데이터의 상태를 자동으로 관리하여 로딩 중, 성공, 실패 등의 상태를 쉽게 파악할 수 있다. 설치 yarn add react-query 적용 최상위 컴포넌트에서 new QueryClient 만든 후 감싸준다. import React from "react"; import Router from "./shared/Router"; import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); const App = () => { return ( ); }; expo.. 2024. 2. 19.
axios axios 요청이 들어가는 부분은 따로 모아서 관리하는 것이 좋다. src/api 폴더를 만들어서 관심사.js 식으로 관리한다. 조회 get await axios.get(주소); await axios.get("http://localhost:4000/todos"); 추가 post axios.post(주소, 추가할 값); axios.post("http://localhost:4000/todos", inputValue); 삭제 delete axios.delete(주소); axios.delete(`http://localhost:4000/todos/${id}`); 수정 patch axios.patch(주소, 수정할 값); axios.patch(`http://localhost:4000/todos/${targetId}.. 2024. 2. 16.
팀 프로젝트 - 커뮤니티 프로젝트 📢 프로젝트 소개 프로젝트 명 : [deve11og] 질문 및 자유로운 주제로 소통하는 커뮤니티 사이트입니다. 프로젝트 일정 : 2/7 ~ 2/15 깃 허브 링크 : 바로가기 배포 링크 : 바로가기 개발 환경 : react, npm, firebase(Storage, Authentication, Cloud Firestore) 배포 환경 : vercel 협업툴 : git, notion, slack 주요 의존성 라이브러리 : Redux, React Router, styled-components 💻 프로젝트 구현 기능 로그인 회원가입 게시물 작성 및 수정 댓글 작성(수정, 삭제) 마이페이지 😀 담당 구현 기능 마이페이지 닉네임 변경 프로필 이미지 변경 및 삭제 내 게시물 보기 댓글 댓글 작성 및 수정 댓글 삭제.. 2024. 2. 15.
또 경로 에러 이번엔 firebase / Module not found: Error: Package path . is not exported from package 에러 상황 firebase의 storage로 이미지 업로드 기능을 구현하려고 mypage에 storage를 import 했는데... 또!!!! 에러가 났다. 정말 이 이미지는 언제 봐도 적절하다. 내가 좋아하는 이미지 ERROR in ./src/component/authentication/MyPage.jsx 7:0-35 Module not found: Error: Package path . is not exported from package C:\codeGit\deve11og\node_modules\firebase (see exports field in C:\codeGit\deve11og\node_modules\firebase\package.json) 해결 방법 저번부터... vscode 가 적어주는 경.. 2024. 2. 8.
react-router outlet Outlet Outlet은 해당 자식 라우트 컴포넌트를 렌더링 한다. 중첩 라우트 컴포넌트를 통해 상위 컴포넌트를 레이아웃화 할 수 있고, {children}을 사용하는 것처럼 레이아웃화 할 수 있다. 기존에는 children으로 받아서 레이아웃을 구성했다. 아래 코드는 outlet을 활용한 방법이다. 코드 예제 App.jsx import "./App.css"; import Router from "./shared/Router"; function App() { return ( ); } export default App; app 컴포넌트에 router를 연결했다. Router.js import React from "react"; import { BrowserRouter, Route, Routes } from.. 2024. 2. 7.
리팩토링 진행 이번 개인과제가 마무리되었다. 개인 과제 마무리 후 해설 영상을 보면서 리팩토링을 진행하였다. 1. 리듀서 로직 기존에는 리듀서에서 처리해야 할 로직을 컴포넌트에서 하고 있었다. 이 부분을 리듀서로 옮겨와서 처리하도록 변경하였다. [리팩토링 전] /redux/modules/letter.js //리듀서 const letter = (state = initialState, action) => { console.log(state); switch (action.type) { case UPDATE_LETTER: return { ...state, data: action.payload }; default: return state; } }; export default letter; [리팩토링 후] /redux/modul.. 2024. 2. 6.
전역 스타일 적용하기 styled-components createGlobalStyle 이전까지는 reset.css를 index.html head 에 연결하는 방식으로 적용하였다. 하지만 이번에 createGlobalStyle을 사용하여 전역 스타일을 적용하는 방법을 알게되어 정리해보고자 한다. createGlobalStyle은 styled-components 라이브러리를 통해 전역 스타일을 적용할 수 있다. 설치 npm install styled-components 또는 yarn add styled-components 적용 src/GlobalStyle.jsx 파일을 만든 후 import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` //스타일을 작성해주세요. body{ } `; e.. 2024. 2. 5.

티스토리툴바