전체 글74 [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. [네트워크] Cross Origin Resource Sharing (CORS) Cross Origin Resource Sharing (CORS) 웹 개발에서 빠질 수 없는 개념인 Cross Origin Resource Sharing (CORS)를 알아보자. # Same Origin 정책 vs Cross Origin 정책 서버와 클라이언트는 HTTP로 통신한다. 이때, 특정한 정책 아래에서 요청을 주고 받게 되는데 그 정책에는 Same Origin 정책과 Cross Origin 정책이 있다. HTTP 요청이 무엇이냐에 따라 Same Origin 정책을 따르거나 Cross Origin 정책을 따르는 것이다. Origin이란 말 그대로 출처이다. 즉, HTTP 요청의 종류에 따라 같은 출처(Same Origin)만을 허용하거나 다른 출처(Cross Origin)도 허용하는 경우로 나뉜다.. 2023. 2. 10. [배포] GitHub로 React 배포하기 Github로 React 배포하기 1. gh-pages 패키지 설치하기 npm install --save gh-pages // or yarn add gh-pages 2. package.json에 homepage 추가하기 "homepage" : "http://(본인username).github.io/(Repository이름)", 3. package.json의 scripts에 predeploy와 deploy 항목 추가 "scripts": { "predeploy" : "npm run build", "deploy" : "gh-pages -d build" } * 배포하기 전 주의할 점 React 프로젝트에서 BrowserRouter를 사용했다면 페이지 배포 후 에러가 생길 수 있음. 로컬 환경에서는 기본 주소가 .. 2023. 2. 8. [TypeScript] 제네릭 제네릭 # 제네릭(Generics)이란? 타입스크립트를 사용하면 변수의 타입을 변경할 수 없다. name: string이라든지, age: number라든지, 변수 선언과 동시에 타입이 지정되기 때문이다. string | undefined 처럼 작성해주면 약간은 유연하게 사용할 수 있으나 기본적으로 타입은 항상 고정되어 있다. 그러나 프로그래밍을 하다보면 변수의 타입이 바뀔 수도 있다, 혹은 하나의 함수에 다양한 타입의 값을 넣어야 할 수도 있다. 이런 경우에는 타입을 고정적으로 지정하면 오히려 불편해진다. 따라서 타입을 직접적으로 고정시키지 않고 변수처럼 언제든지 변할 수 있도록 해주는 장치가 등장하였는데, 이를 제네릭(Generic)이라고 한다. function add(x: string | number.. 2023. 2. 1. [React Query] React Query 알아보기 React Query 알아보기 # React Query란 React Query는 React의 라이브러리로, 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어준다. 기존의 Redux, Recoil과 같은 상태 관리 라이브러리들은 서버 쪽의 데이터들을 관리하기에는 적합하지 않았는데, React Query는 이를 해결해준다. 예를 들어, 두 명의 관리자가 동시에 같은 페이지를 바라보고 있는 상황에서, 한 사람이 데이터를 변경하면 다른 사람도 그 변경된 데이터를 바라볼 수 있어야 한다. React Query는 이런 상황에서 데이터를 용이하게 관리할 수 있도록 서버 측을 도와준다. 또한 React 컴포넌트 내부에서 간단하고 직관적으로 API를 사용할 수 있기 때문에 프론트엔드 입.. 2023. 1. 30. 이전 1 2 3 4 5 6 7 8 ··· 10 다음
