본문 바로가기

분류 전체보기400

[리액트] 리액트 쿼리란? 🌼 서버스테이트를 관리하기 위한 라이브러리이다. 🌼 서버스테이트? api를 요청한 후부터 우리가 관리해야하는 state (데이터도 서버 state인셈) -> 데이터,에러,isloading이 다 서버state임 이런 서버스테이트를 리액트쿼리에서 제공해주는 훅에서 자동으로 컨트롤해준다. (자동으로 리턴으로 뱉어준다) useQuery가 관리해주기 전까진 우리가 thunk를 써서 수동으로 서버state를 관리해주었는데 이걸 리액트쿼리가 해주게 되는 것 🌼 cashing 기능이 있다 🌼 cashing기능 ? 서버요청을 보낼때 쿼리 key를 날리는데 이 repo데이터라는 키가 캐쉬메모리에 있는지를 확인하고, 있으면 fetcher함수를 실행하지 않고 캐쉬메모리에 있는 데이터를 사용한다. 만약 repo데이터가 없음 패.. 2023. 1. 6.
[glitch/varcel] glitch 사용하여 라이브서버 만들고 varcel로 배포하기 /묵은 체증 내려간 varcel 배포 성공시키기 원인은 .env 였을까?! 1. glitch로 로컬에서만 사용했던 db.json을 라이브서버로 만들어주기 2. 프로젝트에서 .env 세팅, db통신부분 코드 바꿔주기 3. varcel을 통해 프로젝트 배포하기 1. glitch로 db.json 라이브 서버로 만들어주기 1. 글리치 홈페이지 접속 (https://glitch.com/) Glitch: The friendly community where everyone builds the web Simple, powerful, free tools to create and use millions of apps. glitch.com 2. New project - Import from Github 클릭 3. 어떤 깃헙을 연결해줄거냐면, 아래 양식 고대로 클론해와서 db.js.. 2023. 1. 4.
[TIL] 오늘의 개발일지 오늘은 어제 과제로 작업했던 ui에 리팩토링을 하면서 서버에서 데이터를 받아와서(웹종때가 생각났당) 연결하는 작업을 배웠다 어제 리액트네이티브 라우터는 어떤식으로 작동하는지 실험해보면서 공부했었는데 그렇게 한번 예습(?)하고 들으니, 돌아가는 흐름이 좀 더 이해하기 빨랐던 것 같다 이번주 리애그 네이티브 실강 들어가면서 되게 짜잘짜잘하게 배우는 것 같지만 막상, 가장 필요한 핵심기능들을 다 배워가고 있는 것 같아서 신기하고 재밌게 느껴진다 아, 그리고 오늘 헷갈렸던 자바스크립트 옵셔널 체이닝 부분 정리!!! date?.vidieo?.results 라고 쓴 이유?? ?. : undefined여도 에러가 나지 않으면서 undefined를 반환 ?. 는 존재하지 않아도 괜찮은 녀석들한테만 써야한다. ?? : .. 2023. 1. 4.
[리액트네이티브] FlatList VS ScrollView 너넨 모양 전체코드는 좀 복잡시럽게 길지만, 아무튼 FlatList에 대해 정리하면 우리가 ScrollView를 안쓰고, FlatList를 사용해야 하는 이유?? ScrollView는 모든 자식 컴포넌트를 렌더링하는데 FlatList는 화면에 보여지는 것만 신경쓴다. (= 레이지로딩 : 레이지로딩은 페이지를 읽어들이는 시점에 중요하지 않은 리소스를 나중에 로딩하는 기술이다. 따라서 중요하지 않은 리소스들은 필요할 때 로드가 되어야 한다. ) * FlatList는 자체에 map이 내장되어 있지만, map 돌릴때 Key 넣어줬던 것 대신 KeyExtractor를 지정해줘야 한다. * scrollview와 다르게 onRefresh만 넣어줘도 알아서 비활성화됏다고, onRefresh되면 활성화된다. * data : 어떤 .. 2023. 1. 4.
[TIL] 이러케 바쁠 줄 몰라쒀 오늘의 개발일지 오늘은 오전 강의를 듣고, 오후엔 강의 복습을 하다 패스트캠퍼스 리액트 강의를 들으려고 했는데 (이때까진 몰라따 이렇게 바빠질 지 ㅋ) 웬걸, 수업을 듣고나니 끝에 과제가 있던거시아닝가 (ui만 작업하는 과제였지만, 리액트 네이티브 앱이 어떻게 돌아가는지도 제대로 알고싶었기 때문에 더 걸린듯 ㅇㅅㅇ) 프로젝트를 새로 만들어서 하나하나 코드를 따라치면서 이해하는데 난 왜 리액트-네이티브가 재미찌 ㅇ_ㅇ ? 먼가 앱만드는거.... 어? 예뿌당 아무튼, 과제하면서 중간에 궁금한 점이 있었는데 import React from "react"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import Tabs from "... 2023. 1. 3.
[리액트네이티브] react-navigation 리액트에선 리액트-라우터-돔을 사용했었는데, 리엑트 네이티브에선 리액트-네비게이션을 쓴다고 한당 (아래는 리액트 네이티브 공식문서) https://reactnavigation.org/docs/native-stack-navigator/ https://reactnavigation.org/docs/native-stack-navigator/ reactnavigation.org 네비게이션을 그냥 쓸 순 없고, 네비게이션을 감싸주는 네비게이션 컨테이너가 있는데, 요 컨테이너로 감싸주기 https://reactnavigation.org/docs/navigation-container/ https://reactnavigation.org/docs/navigation-container/ reactnavigation.org .. 2023. 1. 3.