hyjoong

Next.js discussion 관심 있는 주제

ㅡ ㅡ ㅡ ㅡ

1. server component tags: ['~'] 설정하고 revalidateTag를 trigger하면 데이터가 갱신되지만 데이터를 수정하면 전의 데이터로 돌아옴?

• vercel/next.js#60566

2. not-found.tsx 파일이 dynamic route 에 적용되지 않음

hyjoong

// https://github.com/vercel/next.js/discussions/47583#discussioncomment-5449707

 
"use client";

import type { ChangeEvent } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

const options = ["mew", "mewtwo", "pikachu"];

hyjoong

import React, { useEffect } from 'react';
import { useState } from 'react';

type checkType = {
  valueList: string[];
  initialCheckeds: string[];
  onChange?: () => void;
};

hyjoong

https://github.com/sweetalert2/sweetalert2-react-content

install

npm install --save sweetalert2 sweetalert2-react-content

Use

hyjoong

검색 페이지 구현 도중 처음에 검색을 하면 검색결과가 없다고 뜨거나 검색한 상품들이 보여졌는데 다시 검색하면 검색 결과값이 바뀌지 않아서 검색시 새로고침 속성을 추가하였다 .

기존 코드

  const handleSearch = async (keyword: string) => {
    history.push({
      pathname: '/searchProduct',
      state: keyword,
 });

hyjoong

Intersection Observer API 란

참고

• MDN
• Blog

Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.

= 어떤 Element가 화면(viewport)에 노출되었는지를 감지할 수 있는 API

hyjoong

받아오는 데이터 key값 or 형식 변경하고 싶을 때 src/utils/parseData.ts

export const parseProductData = (productData: ProductData): Product => {
  return {
    id: String(productData.product_id),
    price: String(productData.price),
    name: productData.name,
 thumbnail: productData.image_url,

hyjoong

useCheckBox에서 다른 컴포넌트로 set하는 부분 전송하고 받을 때 타입 지정

1. 부모 파일

  const [checkBox, setCheckBox] = useCheckBox(false);

2. 위에서 다른 컴포넌트로 setCheckBox 전달

hyjoong

import { useState, useEffect } from 'react';

const useFetch = (defaultValue, callback) => {
  const [response, setResponse] = useState(defaultValue);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const fetchData = async () => {
    setLoading(true);

hyjoong

1. Contribute
2. Discussion ㅡ ㅡ ㅡ

Contribute

1. vite 번역

• https://github.com/vitejs-kr/vitejs-kr.github.io