React21 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. 전역 스타일 적용하기 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. [react] redux reducer 를 작성할 때 switch 에 default 를 빼먹는다면... / The slice reducer for key "letter" returned undefined during initialization. 에러 상황 reducer 를 작성하고 실행했는데, 아래와 같은 에러가 발생했다. The slice reducer for key "letter" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. "letter" 키에 대한 slice reducer가 초기화 중에 undefined를 반환했.. 2024. 2. 2. [react] 에러 지옥 - 경로 문제 에러 상황 context API로 작업했던 프로젝트를 redux로 리팩터링 하는 작업을 하고 있었는데 아래와 같은 에러를 마주하게 되었다. 첫 번째 에러 Module not found: Error: Package path ./config/configStore is not exported from package C:\codeGit\artist-letters-project\node_modules\redux (see exports field in C:\codeGit\artist-letters-project\node_modules\redux\package.json) Did you mean './redux/config/configStore'? Requests that should resolve in the cur.. 2024. 2. 2. [Warning] styled-components 속성을 인식하지 못할 때 상황 styled-components로 isActive라는 props를 전달하여 버튼을 눌렀을 때 나오는 스타일에 대한 css를 다르게 만들었는데, 계속 개발자 도구에 아래와 같은 경고 메시지가 나타났다. Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element. 번역을 돌려보니 .. 2024. 2. 1. useState VS useRef useState와 useRef의 차이점을 알아보고 어떤 경우에 어떤 hook 을 사용하는 것이 좋을지 확인하자. 차이점 값의 변경에 따른 렌더링 useState 상태를 변경할 때마다 컴포넌트가 리렌더링 된다. 컴포넌트의 상태를 변경하고 UI를 업데이트할 수 있다. useRef 값이 변경되어도 컴포넌트를 리렌더링 하지 않는다. 일반적으로 렌더링과 상관없는 값이나 DOM 접근에 사용된다. 사용 목적 useState 컴포넌트의 상태를 관리하고 상태의 변경에 따라 리렌더링이 필요한 경우 사용한다. 화면에 표시되는 정보 등이 해당된다. useRef 렌더링과 무관하게 특정 값에 접근할 때 사용한다. DOM 요소에 대한 참조를 생성하거나 이전 값과 현재 값을 비교 또는 setInterval의 intervalId를 저.. 2024. 1. 31. react 프로젝트에서 절대 경로 문제 상황 router로 화면이 메인에서 상세로 넘어왔을 때는 스타일이 적용된 대로 정상적으로 나왔는데, 그 화면에서 새로고침을 하니 reset 스타일이 적용되지 않은 상태로 화면이 나오고 있었다. 개발자 도구로 확인해 보니 다른 경로로 불러오고 있었다. [문제 상황] 해결 방법 index.html에서 ./reset.css -> %PUBLIC_URL% 로 변경했다. public 폴더에서 절대 경로를 사용하기 위해서는 %PUBLIC_URL% 를 사용해야 한다. 공식문서를 확인해 보니 영어라서... 번역을 돌려봤다. npm run build 명령을 실행하면 Create React App이 %PUBLIC_URL%을 올바른 절대 경로로 대체하여 프로젝트가 클라이언트 측 라우팅을 사용하거나 루트가 아닌 URL에서.. 2024. 1. 31. 이전 1 2 3 다음
