이재만 교수의 공간

1. PC에 expo-cli 설치

npm i -g expo-cli

2. react native apple 프로젝트 설치

npx expo init apple

npx create-expo-app apple

3. 프로젝트 실행

cd apple

npm start

4. 핸드폰에 Expo go 설치

5. Expo go 실행 후 QR code 찍어서 실행

TypeError: Cannot create property 'exact' on string 'super-heroes' 

@tanstack/react-query 에서 setQueryData( ) 함수를 이용할 때 

queryKey 를 사용할 때는 ['super-heroes'] 배열로 넘겨야 한다

에러 코드

정상 코드

localhost:3000/apple/1

여기서 1의 정보를 가져오기 위해 Link 가 다음과 같다면

localhost:3000/apple/:appleId

다음과 같이 가져올 수 있다

import { useParams } from 'react-router-dom';

const { appleId } = useParams();

1. Custom Query Hook

2. Query By ID

3. Parallel Queries

4. Dynamic Parallel Queries

const { isLoading, data, isError, error, isFetching } = useQuery(

  ['apple'],

  fetchApple,

  {

  refetchInterval: 2000, // polling - 2초마다 쿼리 실행,

  cacheTime: 5000, // cache 메모리에 들어있는 데이터가

            가비지 컬렉터에 의해 얼마만에 삭제될 것인가

  staleTime: 30000, // 30초 뒤에 stale 상태로 변경

  refetchOnMount: true, // 실행되자마자 refetch 를 실행

  refetchOnWindowFocus: 'always', // 포커스 되면 refetch 실행

  enabled: false, // fetch를 실행하지 않음

  onSuccess: 성공했을 때 콜백 함수

  onError: 에러 발생했을 때 콜백 함수

  select: 데이터 변경(data transformation)

  select: data => {

    const name = data.data.map(hero => hero.name);

    return name;

  }

  });

React 에서 tailwindcss 의 속성을 적용할 때

stroke-width 대신에 strokeWidth 로 변경하라는 경고

[orderId].tsx 파일을 만들면 orderId 의 값을 가져올 수 있다

import { userRouter } from 'next/router';

const router = useRouter();

console.log(router.query.orderId);

훅을 컴포넌트 함수 내부에서 호출해야 하고

그 밖에 함수 안이나 다른 곳에서 호출하면 안 된다

따라서 컴포넌트 함수 처음에 훅을 호출하고 나서

필요할 때 다시 호출하는 방법을 react-query에서 제공하는데

useQuery 는 refetch 방법으로 제공하고

useMutation은 mutate 방법으로 제공한다

스마트 폰 등 다양한 기기를 고려해야 하는 반응형 휍에서 글자 크기를 

설정하는데는 적합하지가 않다

반응형 웹에서는 px 대신 em 또는 rem 단위를 많이 사용한다

em

영문자 M의 너비를 1em 으로 계산하여 이에 대한 상대적인 크기로 글자 크기를 표현

1em = 16px;

2em = 32px;

em이 사용된 요소의 하위 요소에서는 부모 요소의 em을 상속 받아 글자 크기가 정해진다

em은 부모 요소에서 설정된 글자 크기를 기준으로 하는데

rem은 브라우저의 기본 글자 크기를 기준으로 한 상대적인 크기를 나타낸다

뷰포트 - 컴퓨터나 스마트 폰의 브라우저 화면 크기를 말한다

메뉴바와 탭 영역을 제외한 영역

스마트폰과 태블릿의 뷰포트 크기가 다르기 때문에 

미디어 쿼리를 이용하여 뷰포트의 크기에 맞추어

CSS의 정의를 달리할 필요가 있다

스마트폰은 뷰포트의 크기를 고려하지 않고

웹 페이지를 만들게 되면

글자와 이미지가 굉장히 작아져 사용하는데 불편하다

이러한 단점을 보완하기 위하여 스마트폰 용 웹페이지를 제작할 때는

다음과 같이 <meta> 태그를 이용하여 모바일 기기의 뷰포트를 설정한다

'width=device-width' 는 웹페이지의 너비를

모바일 기기의 뷰포트 너비와 일치시켜서

화면에 표시하라고 웹 브라우저에게 알려주는 것

스크롤이 내려가도 위치가 변경이 안 되는 브라우저의 특정위치에 고정시키려면

position: fixed로 주면 된다

부모가 position: relative 이고 자식이 position: absolute일 때 

부모 영역 내에서 원하는 위치로 이동이 가능하다

absolute 는 브라우저의 원점인 절대 위치를 기준으로 요소를 배치한다