FE - Tools23 [React] Express로 CORS 에러 해결하기 Express로 CORS 에러 해결하기 와 드디어... 해결... 프론트엔드에서 API를 이용하여 프로젝트를 만들다 보면 거의 반드시 CORS 에러를 마주하게 된다. 나는 서울시에서 제공하는 공공 API를 이용하여 프로젝트를 만들었는데 CORS 에러가 발생하였다. CORS 에러를 해결하는 방법을 구글에 검색하면 참 많은 방법이 나오는데, 그 중에서도 난 API만을 받아오는 작은 서버를 직접 만드는 방법을 선택하였다. CORS 에러는 원래 서버에서 해결해야 하는 에러이기 때문에 Node.js를 이용하여 해결하였다. 우선 유튜브 조코딩님의 https://youtu.be/Tt_tKhhhJqY 영상을 참고하였다. 기본적인 Node.js 내용을 이해할 수 있다. 이 내용을 바탕으로 API만을 위한 소소한.. 2023. 3. 1. [Redux Toolkit] TypeScript로 store, slice, selector 타입 지정하기 TypeScript로 store, slice, selector 타입 지정하기 1. store.tsx import { configureStore } from "@reduxjs/toolkit"; const store = configureStore({ reducer: { // reducer 입력 }, }); export default store; export type RootState = ReturnType; 가장 하단에 export type RootState = ReturnType; 를 추가한다. 2. slice.tsx import { createSlice, PayloadAction } from "@reduxjs/toolkit"; interface StateType { a: number; b: boolean.. 2023. 2. 26. [React Query] TypeScript로 getQueryState 사용하기 TypeScript로 getQueryState 사용하기 React Query를 이용해 App.js에서 다음과 같이 API 데이터를 받아왔다. // App.js const query = useQuery("dataName", async () => ( await fetch( "https://API 링크" ) ).json() ); App.js가 아닌 다른 페이지에서 해당 데이터를 받아오려면 getQueryState를 이용하면 된다. 공식문서 : https://react-query-v3.tanstack.com/reference/QueryClient#queryclientgetquerystate QueryClient | TanStack Query Docs QueryClient The QueryClient can be.. 2023. 2. 26. [React Query] React Query 알아보기 React Query 알아보기 # React Query란 React Query는 React의 라이브러리로, 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어준다. 기존의 Redux, Recoil과 같은 상태 관리 라이브러리들은 서버 쪽의 데이터들을 관리하기에는 적합하지 않았는데, React Query는 이를 해결해준다. 예를 들어, 두 명의 관리자가 동시에 같은 페이지를 바라보고 있는 상황에서, 한 사람이 데이터를 변경하면 다른 사람도 그 변경된 데이터를 바라볼 수 있어야 한다. React Query는 이런 상황에서 데이터를 용이하게 관리할 수 있도록 서버 측을 도와준다. 또한 React 컴포넌트 내부에서 간단하고 직관적으로 API를 사용할 수 있기 때문에 프론트엔드 입.. 2023. 1. 30. [Firebase] React에서 Firebase로 database 이용하기 React에서 Firebase로 database 이용하기 React에서 Firebase로 데이터베이스에 데이터 추가하기, 데이터베이스에 있는 데이터 불러오기, 데이터베이스에 있는 데이터 삭제하기를 구현하는 방법을 정리해보려 한다. firebase 9.16.0 버전 기준으로 작성되었습니다. 1. firebase 파일 만들기 (src 폴더 하위에 생성하면 됨) // src/fbase.js import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain:.. 2023. 1. 26. [React] React에서 네이버 지도 API 사용하기 React에서 네이버 지도 API 사용하기 1. public/index.html에 script 넣어주기 index.html의 안에 위와 같은 script를 넣어준다. ClientId= 뒤에 발급받은 Key를 넣어준다. 환경변수를 사용하고 싶다면 으로 적어주면 된다. 단, 개발자 도구에서 key 값이 다 보인다는 단점이 있다... 그래서 실제 서비스되는 웹 사이트에 적용하기엔 적절하지 않을 테니 참고해주시길! 😅 2. 지도 생성하기 // src/Map.js const mapRef = useRef(null); const lat = // 위도 숫자로 넣어주기 const lng = // 경도 숫자로 넣어주기 useEffect(() => { const { naver } = win.. 2023. 1. 19. 이전 1 2 3 4 다음
