전체 글 (40) 썸네일형 리스트형 React-Query 사용하기 React-Query의 장점과 왜 사용하는지에 대한 이유들은 앞 블로그에서 설명해드렸으니 실제 사용으로 넘어가보겠습니다. 1. 설치 npm install @tanstack/react-query npm install @tanstack/react-query-devtools 여기서 devtools는 선택사항이며, devtools란? fresh fetching stale inactive 와 같이 비동기 데이터를 쉽게 다룰 수 있게 해주는 react-query안에서 제공하는 하나의 개발자 도구라고 생각하면 된다. 2. 시작하기 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryCl.. react는 어느정도 아는데 react-Query? 걘 또 뭔데; 먼저 react-Query가 뭘까?? react-Query란 " 웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만듭니다. " 라고 공식문서에 명시되어있다. 말하자면 fetching, caching과 관련된 비동기관련 처리들을 쉽게 해결할 수 있게 해주는 라이브러리이다. react-Query에 대한 개념을 알았으니 이제 우리가 왜 react-Query를 사용해야 하는지 한번 알아보자 1. caching 2. 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거 3. 오래된 데이터 자동 업데이트 4. 최대한 빠르게 데이터를 반영 이외에도 여러가지 장점들이 있지만 내가 잘 이해하고 있지 않은 것 같아 이해한것만 말해보겠습니다. 1. caching caching은 말 그대.. 개발자가 사랑하는 프레임워크 1위 "Svelte" 일단 왜 사랑하는지를 한번 파악해보자 stackoverflow에 따르면 이렇게 가장 사랑하고, 가장 원하는 프레임워크 1위에 올랐다. 왜 Svelte가 좋을까?? 1. 쉬운 사용법 2. 자바스크립트와 다를바 없는 문법 이렇게 두가지로 나눠볼 수 있다. 1. 쉬운 사용법 출처 : codingApple 이렇게 html 태그, css style, javascript의 문법을 한 파일 내에서 사용 할 수 있는 것입니다. 또한 적은 코드로 높은 가독성을 유지하고, 개발 시간을 단축시켜줍니다. 가독성이 좋기 때문에 리팩토링이 보다 쉬워집니다. 그렇다면 Routing은? 이렇게 쓰면 /about페이지가 완성이 된다. 아주 쉬운 문법이 아닐수가 없다. 2. 자바스크립트와 다를 바 없는 문법 와 같은 script태그를 .. useRef로 Gsap 사용하기 useRef란? React를 사용하는 프로젝트에서 가끔 DOM을 선택해야 하는 상황이 온다. ex) 엘리먼트의 크기, 스크롤바의 위치, 혹은 포커스 React는 useRef로 DOM 노드, 엘리먼트, 컴포넌트 주소값을 참조할 수 있다. 활용 가능한 상황으로는 media playback, focus등이 있겠다. 이제 이것을 활용해서 Gsap을 사용해보았다. Gsap은 애니메이션을 구현하기 쉽게 해주는 라이브러리이다. https://gsap.com/ Homepage | GSAP GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work.. 내가 적는 나의 트러블 슈팅(troubleshooting)..! 트러블슈팅이란?? - 트러블슈팅(troubleshooting)은 문제 해결의 일종으로, 망가진 제품, 또는 기계 시스템의 망가진 프로세스를 수리하는 일에 주로 적용된다. - 문제 해결을 위해 문제의 원인을 논리적이고 올바르게 찾는 일이며 제품이나 프로세스의 운영을 재개할 수 있게 한다. 위 그림은 대표적인 트러블(문제)슈팅이다....! 장난은 여기까지 하고 제가 겪었던 문제와 제가 그것을 어떻게 해결했는지를 적어보겠습니다. 제 이야기를 먼저 들려주자면 때는 학교에서 아이디어페스티벌 기간이 끝나고 추가적인 부가기능을 만들고 있었던 상황이였다. 부가기능으로는 학교 급식을 가져오고, 특정 알레르기 성분을 특정스타일로 표시해주는 것이였다. 그 기능을 만들기 위해서는 일단 1. 학교급식 api를 가져오기 2. 학.. React?? Hook은 또 뭔데.. React Hooks에 대해서 알아보자면 React 16.8버전에 새로 추가된 기능으로, 함수형 컴포넌트에 맞게 사용이 되어, 함수형 컴포넌트 에서만 사용이 가능합니다. 먼저 React Hook을 사용할때에도 규칙이란것이 있는데, 먼저 1. Hook을 최상위에서 작성 early return이 실행되기 전에 항상 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다. 2. React 함수 내에서만 작성 Hook은 일반적인 js함수에서는 호출하면 안되고, 함수형 컴포넌트나 custom hook에서는 가능합니다. 1. useState 2. useEffect 3. useMem.. BootStrap과 Tailwind CSS BootStrap이란?? BootStrap은 트위터에서 사용하고 있는 레이아웃과 버튼, 네비게이션 바 등의 CSS와 JS를 이용해서 만든것들의 집합이라고 생각하면 편합니다. BootStrap의 장점은?? 먼저 앞서 설명 한듯이 CSS와 JS를 통해 이미 만들어져 있기 때문에 만들어진 것들을 자신이 원할때 마음껏 사용가능하다는 것이 가장 큰 장점입니다. 또 다른 장점으로는 반응형으로 핸드폰이나 노트북, 다른 디바이스에서도 잘 동작가능합니다. 하지만 장점이 명확한 만큼 단점도 장점에 관련이 있습니다. BootStrap의 단점은?? 앞서 말했듯이 많은 사람들이 쉽게 접하고 쉽게 만들 수 있기 때문에 본인만의 독자적인 커스터마이징이 힘든 편입니다. 자신만의 독자적인 커스터 마이징과 팀원들과 협업하여 퍼블리싱을 .. JS 와 API 오늘은 JS와 API에 대해서 알아보도록 하겠습니다. JS (Javascript) JS에 대해서 설명을 해주자면 여기서 설명할 JS(javascript)는 프로그래밍 언어로, html과 css로만 구성되어있는 딱딱한 웹페이지를 동적으로 바꿔주기 위한 언어입니다. API ( Application Programming Interface ) API의 정의는 응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제공한 것이다. 쉽게 말해 두 애플리케이션(Aplication)에 대한 계약이라 생각하면 됩니다. 위 그림에서 아랫부분을 보면 손님(Customer)이 주문(Request)을 하고 주문을 전한 다음 주문받은 것을 가져가서 손님(Customer)에게 전달해줍니다. API는 이것을.. 이전 1 2 3 4 5 다음
