전체 글74 [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. [TypeScript] interface와 type의 차이점 interface와 type의 차이점 # 확장하는 방법의 차이 1. interface 확장 방법 interface User { name: string age: number } interface WebUser extends User { website: string } interface Student { name: string age: number } interface Student { id: number } interface는 extends를 이용하거나 혹은 그냥 선언으로도 확장이 가능하다. 2. type 확장 방법 type User { name: string age: number } type WebUser = User & { website: string } type은 &을 이용하여 확장할 수 있다. 그러.. 2023. 2. 25. [JavaScript] 이벤트 루프 이벤트 루프 # 자바스크립트는 싱글 스레드 언어 자바스크립트는 싱글 스레드 언어로 한 번에 하나의 작업만 처리할 수 있다. 하지만 비동기 작업을 할 수 있다. 어떻게 가능한 것일까? 이를 이해하기 위해서는 자바스크립트가 웹 브라우저 내에서 동작한다는 사실을 알아야 한다. 웹 브라우저 내에 있는 기능들이 자바스크립트를 도와주어 비동기 작업을 처리할 수 있게 해준다. # 웹 브라우저 내부 자바스크립트 밖에 Web API가 존재한다. 즉, Web API란 브라우저가 제공하는 비동기 API이다. 자바스크립트는 이렇게 외부의 도움을 통해 비동기 작업을 처리할 수 있다. 콜스택에서 비동기 코드를 만나면 해당 코드는 Web API 영역으로 빠진다. 그리고 그 비동기 작업은 이후 queue라는 곳으로 이동하여 대기하다.. 2023. 2. 21. [React] Pagination + 검색 기능 로직 직접 만들어보기 Pagination + 검색 기능 만들기Pagination 구현을 위해 고민한 기록 +) 2024. 01. 17. 업데이트Pagination 라이브러리를 배포하였습니다. 필요하신 분들은 사용해보세요! 😀https://inthedev.tistory.com/104 여러 아이템을 페이지로 구분하는 페이지네이션 기능을 구현하기 위해 많은 고민을 하였다. 아이템을 12개씩 한 페이지로 하고 싶어서 아이템에 index를 부여하여 아이템 개수를 계산했다. 0~11번 아이템은 1페이지, 12~23번 아이템은 2페이지, ... 이렇게 코드를 작성했다. 여기까지는 별 문제 없었으나, 문제는 검색 기능과 같이 쓸 때 있었다. 특정 키워드로 검색을 하고 나면 아이템의 개수를 index로 구분할 수 없었다. 아이.. 2023. 2. 18. 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음
