진행했던 프로젝트 중에 github api를 사용하요 이슈 목록을 가져오는 프로젝트가 있었다. 프로젝트의 목적은 api를 사용하여 이슈 목록을 가져오고 무한스크롤을 직접 만드는 프로젝트였다. 이 프로젝트의 목적을 좀 더 분명히 하기 위해서 리팩토링을 해보자. facebook/react 리포지토리의 이슈만 가져오는 프로젝트였는데, 직접 검색한 리포지토리의 이슈를 가져오는 기능을 만들어보자. 검색바 만들기 내가 원하는 검색바의 기능은 다음과 같다. 리포지토리를 검색할 수 있는 검색바 검색바가 포커싱 되었을 때, 확인할 수 있는 검색 결과 영역 검색어 입력중일 때, 검색중 표시 검색 버튼을 누르지 않아도, 검색 결과를 확인할 수 있음 검색 결과에 원하는 리포지토리를 누르거나, 검색 결과 영역 밖을 눌렀을 때,..

useQuery export function useQuery TQueryFnData TQueryFnData는 useQuery로 실행하는 query function의 반환값을 정하는 제네릭 타입이다. TError TError는 query function의 error 형식을 정하는 제네릭 타입이다. TData TData는 data에 담기는 실질적 type을 뜻한다. useQuery의 select option으로 query function의 데이터를 2차 가공하는 경우에만 사용하는 type이다. 데이터 속성이 query fu..

useMutation query와 달리 mutation은 일반적으로 데이터를 CREATE/UPDATE/DELETE 하거나 서버 부작용을 수행하는데 사용된다. 서버 데이터를 가져오는 것은 reactive하게 동작하는 useQuery를 사용하면 되지만, 서버 데이터를 업데이트하고 생성하고 삭제하는 것은 적절하지 않다. useQuery처럼 onSuccess, onError, onSettled 콜백을 전달할 수 있으며 mutate를 호출했을 때 실행할 onMutate 콜백도 사용할 수 있다. useQuery와 마찬가지로 많은 옵션을 제공하지만 너무 많다. 자세한 내용은 공식문서를 참조하자 const { data, isLoading, mutate, mutateAsync } = useMutation(mutation..

React Query란? React Query는 데이터 Fetching, 캐싱, 동기화 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 React 라이브러리 이다. Redux, Recoil, Mobx 등의 상태관리 라이브러리들로도 충분히 가능하지만, 클라이언트 쪽의 데이터들을 관리하는데에 있어서 적합할 수는 있어도 서버 쪽의 데이터들을 관리하기에는 여러가지 처리등이 필요한 점들이 있어서 등장하게 되었다. 예를 들어서, 같은 페이지를 바라보고 있는 관리자가 있을 때, 한 관리자가 유저의 데이터를 변경하면, 다른 관리자도 그 유저의 변경된 데이터를 확인할 수 있어야 한다. 설치 최근 v4로 업그레이드 되면서 yarn add react-query or npm i react-query 이었던 설치 command가..

니꼬의 뽀나스 강의 조금 심심한 페이지를 react를 이용하여 좀 더 꾸며보자. navigation바를 만들기위해 react-router-dom 을 이용하자. npm install react-router-dom 파일들을 위 사진처럼 정리하자. App.js에 있는 내용들을 모두 Home.js로 옮기고 App.css를 Home.css로 변경 경로를 위와 같이 변경 후 아래를 작성하자. App.js import React from "react"; import { HashRouter, Route } from "react-router-dom"; import About from "./routes/About"; function App() { return ( ); } export default App; path라면 A..

앞서 배운 react에 대해 총 정리를 해보자. 강의를 보면서 따라하기에 급급한적도 많고, 강의 들으면서 검색도 했지만, 까먹는 경우가 많아 다시 한 번 정리를 한다. npx란? https://wonillism.tistory.com/105?category=864856 nodjs, npm, nvm, npx wsl에 react를 설치하다가 여러가지 시행착오를 겪고 이 포스팅까지 왔다....(wsl 문제가 젤 컷지만...) nodeJS, npm, nvm, npx에 대해서 알아보자. NodeJS 확장성 있는 네트워크 어플리케이션(특히 서버 사� wonillism.tistory.com 여기서 npx를 간단히 다루긴했지만, 조금 더 설명을위해 예를 들어보자. create-react-app을 npm으로 global하..

Styling the Movies App.js와 Movies.js를 좀 html스럽게 수정해보자. App.js import React from "react"; import axios from "axios"; import Movie from "./Movies"; class App extends React.Component { state = { isLoading: true, movies: [], }; getMovies = async () => { const { data: { data: { movies }, }, } = await axios.get("https://yts-proxy.now.sh/list_movies.json"); this.setState({ isLoading: false, movies }); ..

Fetching Movies from API 일반적으로 javascript에서 data를 가져올때 fetch를 사용한다. 하지만 여기서는 fetch가 아닌 Axios를 이용할 것이다. npm install axios 를 이용하여, axios를 설치하자. API는 YTS의 API를 이용할 건데 이곳은 토렌트 사이트이다. 그래서 재공하는 API가 매번 변하는데, 이를 해결하기 위해 니꼬가 만든 yts proxy라는걸 만들었는데 이를 이용할 것이다. YTS API API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts...