~~정답이 아닐수 있음~~

원했던 느낌

클릭하면 탭처럼보 보이고, 그냥 있을 경우에는 autoPlay가 되도록 만들고 싶다.

setInterval 활용

아래의 설명은 챗GPT를 활용하여 정리한 내용이다.

setInterval 이란?

setInterval은 일정 시간 간격마다 특정 코드를 반복해서 실행할 수 있게 해주는 함수이다.

const intervalId = setInterval(() => {
  console.log('2초마다 콘솔이 찍힌다.');
}, 2000);

clearInterval setInterval은 고유한 식별자(ID)를 반환한다. 이 ID는 나중에 clearInterval을 사용하여 해당 인터벌을 중지할 때 사용된다.

const intervalId = setInterval(() => {
  console.log('This message will be logged every 2 seconds');
}, 2000);

// 인터벌을 중지하려면 clearInterval을 사용합니다.
clearInterval(intervalId);

react 에서 활용

react 컴포넌트에서는 setInterval을 useEffect 훅 안에서 설정하고, 컴포넌트가 언마운트될 때 이를 정리하는 것이 일반적이다. 이렇게 하면 메모리 누수와 불필요한 상태 업데이트를 방지할 수 있다.

  const [activeItem, setActiveItem] = useState(1);

  useEffect(() => {
    const slider = setInterval(() => {
      setActiveItem((prevItem) => {
        const nextItem = prevItem + 1;  // 2초마다 1씩 더한다.
        return nextItem > 3 ? 1 : nextItem; // item이 3 이상이면 다시 1로 돌아 간다. 아니라면 1을 더한다.
      });
    }, 2000);

    // 컴포넌트가 언마운트될 때 인터벌을 중지하여 메모리 누수를 방지한다.
    return () => clearInterval(slider);
  }, [activeItem]);

언마운트? 컴포넌트가 더 이상 화면에 렌더링되지 않고 제거될 때를 의미. 예를 들어, 특정 조건이 변경되어 해당 컴포넌트가 더 이상 필요하지 않게 될 때나, 사용자가 페이지를 이동해서 해당 컴포넌트가 포함된 화면을 떠날 때 발생한다.

전체코드

  const [activeItem, setActiveItem] = useState(1);

  const reasonItems = [
    {
      id: 1,
      number: "01",
      title: "탭1",
      content: "test1",
      img: "/img1.jpg",
    },
    {
      id: 2,
      number: "02",
      title: "탭2",
      content: "test2",
      img: "/img2.jpg",
    },
    {
      id: 3,
      number: "03",
      title: "탭3",
      content: "test3",
      img: "/img3.jpg",
    },
  ];

  const activeReasonItem = (id: number) => {
    setActiveItem(id);
  };


  useEffect(() => {
    const slider = setInterval(() => {
      setActiveItem((prevItem) => {
        const nextItem = prevItem + 1;
        return nextItem > 3 ? 1 : nextItem;
      });
    }, 2000);
    return () => clearInterval(slider);
  }, [activeItem]);

//탭메뉴
<ul >
  {reasonItems.map(({ number, title, id }) => (
    <li
    key={id}
    onClick={() => activeReasonItem(id)}
    className={`${activeItem === id && `bg-[#3171ef] text-white `}`}>
      <span className="font-light mr-[2.08vw] 2xl:mr-[40px]">
      {number}
      </span>
      {title}
    </li>
))}
</ul>

//콘텐츠
  {reasonItems.map(
    ({ number, title, content, img, id }) =>
        activeItem === id && (
         <div key={id} >
            <span>{number}</span>
            <h2>{title}</h2>
            <p>{content}</p>
            </div>
            <Image
            src={img}
            alt={title}
            width={460}
            height={400}
          />
      </div>
    ))}

완성

클릭했을 경우에 해당 콘텐츠가 보이고 그냥 있을 경우 2초마다 autoplay가 된다.

위 내용은 챗지피티 + 예제코드로 간단하게 만든 탭 메뉴입니다.

참고한사항:https://codesandbox.io/p/sandbox/react-slider-css-autoplay-1gms7?file=%2Fsrc%2FApp.js%3A64%2C13

favicon 이란?

파비콘이란 웹페이지에 접속했을 때, 상단 탭에서 보여지는 아이콘이다. 파비콘은 즐겨찾기에 웹페이지를 등록할 때도 사용되며, 웹 브라우저 주소창에도 보여지게 된다.

주소창에 웹파이트를 소개하는 글자를 읽지 않아도 모양이나 색깔등으로 어떤 웹사이트인지 인식할 수 있도록 하는 것이 파비콘이다.

크기는 1616 / 3232 /4848 / 64664 픽섹 처럼 정사각형을 유지한다. 파일 형식은 ico, png, svg 파일 형식을 지원한다.

Open graph

오픈 그래프란 웹사이트의 링크를 소셜미디어와 같은 다른 플랫폼에 공유할 때 웹사이트에 대한 정보가 정확하고 효율적으로 해당 플랫폼에서 보여질 수 있도록 하기 위해 웹사이트의 제목, 설명, 이미지, 대표 url 주소에 대한 메타정보를 사전에 웹사이트 안에 구성해 놓은 프로토콜을 의미한다.

오픈그래프 종류 기본

• og:title : 웹사이트 제목
• og:type : 웹사이트 종류
• og:image : 대표이미지
• og:url : 웹사이트 정식 url

nextjs 에 적용하기

nextjs 폴더에서 src/app/layout.tsx 파일을 열고

파비콘

icons를 추가 하고, public 폴더에 추가한 favicon 이미지를 경로에 맞게 추가한다. 그후 favicon.ico 를 삭제한다.

export const metadata: Metadata = {
  title: "Frontend-developer",
  description: "프론트엔드 개발자 포트폴리오 입니다.",
  icons: {
    icon: "/young_favicon.svg",
  },
};

og tag (오픈 그래프)

파비콘 추가한 동일한 layout.tsx 파일에 추가한다.

export const metadata: Metadata = {
  title: "Frontend-developer",
  description: "프론트엔드 개발자 포트폴리오 입니다.",
  icons: {
    icon: "/young_favicon.svg",
  },
  openGraph: {
    siteName: "frontend-developer portfolio",
    title: "youg's portfolio",
    description: "프론트엔드자 000의 포트폴리오 입니다.",
    images: "/opengraph-image.jpg",
    url: "https://young02-portfolio.vercel.app/",
  },
};

이렇게만 추가 하면 아래와 같은 에러가 뜨는데

메타데이터에 기본 url을 설정해 주면 해결이 된다. ** metadataBase: new URL("https://young02-portfolio.vercel.app/"),**

export const metadata: Metadata = {
  title: "Frontend-developer",
  description: "프론트엔드 개발자 포트폴리오 입니다.",
  metadataBase: new URL("https://young02-portfolio.vercel.app/"),
  icons: {
    icon: "/young_favicon.svg",
  },
  openGraph: {
    siteName: "frontend-developer portfolio",
    title: "youg's portfolio",
    description: "프론트엔드자 성태영의 포트폴리오 입니다.",
    images: "/opengraph-image.jpg",
    url: "https://young02-portfolio.vercel.app/",
  },
};

확인

변경된 것을 확인 할 수 있다!

출처: 파비콘 og-tag

UTC

국제적인 표준 시간의 기준으로 쓰이는 시각

한국표준시(KST)

일본 표준시와 같은 동경 135도를 기준으로 하여 UTC 보다 9시간 빠른 표준시(UTC+9)이다.

글 작성이유

서버에서 날짜 데이터를 전달 받는데 String 값으로 전달 받았다. 날짜 데이터는 UTC를 기준으로 하고 있어 한국시간으로 다시 변경하여 프론트에서 보여지게 해야한다.

해결방법

1. 받아오는 string 날짜 데이터를 UTC 시간으로 변경하기 위해 new Date()객체로 변환한다.
2. UTC로 변경된 날짜에 9시간을 더한다. (1시간은 60분 1분은 60초 이므로 9시간을 밀리초로 변환하려면 96060*1000을 한다.)
3. 한국표준시로 변경된 날짜를 다시 보여지고자하는 연도,월,일,시간,분,초변환 한다.

export const formatDate = (utcDateString: string): string => {
  const utcDate: Date = new Date(utcDateString)
  const kstDate: Date = new Date(utcDate.getTime() + 9 * 60 * 60 * 1000)

  // 한국 시간대에 맞게 날짜 포맷팅
  const yyyy = kstDate.getUTCFullYear()
  const MM = String(kstDate.getUTCMonth() + 1).padStart(2, "0") // getUTCMonth는 0부터 시작하므로 1을 더합니다.
  const dd = String(kstDate.getUTCDate()).padStart(2, "0")
  const hh = String(kstDate.getUTCHours()).padStart(2, "0") // getUTCHours는 이미 UTC+9을 더한 시간을 반환합니다.
  const mm = String(kstDate.getUTCMinutes()).padStart(2, "0")
  const ss = String(kstDate.getUTCSeconds()).padStart(2, "0")

  return `${yyyy}-${MM}-${dd} ${hh}:${mm}:${ss}`
}

카테고리를 따로 localstorage 나 sessionstorage 에 저장 하지 않고 새로고침을 하더라도 유지 하고 싶었다.

참고 했던 레퍼런스

카테고리의 종류도 다양하고 새로고침을 하였을 때 유지 되며 localstorage 나 sessionstorage 저장하지 않고 리액트로 제작된 페이지를 찾다 보니 인프런과 비슷하다 생각하여 참고 하기로 하였다. 그런데 이 방법이 정답이 아닐수 있다. 레퍼런스와 비슷해 지기 위해 노력 하였다.

참고한 이유

1. react 프로젝트로 참고 하기 좋았음
2. localstorage 나 sessionstorage 저장하지 않음
3. url query를 활용

구현

1. 카테고리 UI 구현

const [updateData, setUpdateData] = useState<number>(2)
const [view, setView] = useState(false)

const handleUpdateTime = (time: number) => {
  setUpdateData(time)
  setView((prev) => !prev)
}

const handleView = () => {
   setView((prev) => !prev)
}


 <div className="relative mb-[16px] flex items-center gap-6">
   <div className="inline-flex items-center justify-center gap-[15px]  rounded border-2 border-[#BDBDBD] bg-primary-50 px-4 py-[12px] text-sm drop-shadow-5xl lg:py-[8px] lg:text-xl">
        <span>{updateData}초</span>

        <button onClick={handleView} className="relative h-[9px] w-[19px]">
          <Image src="/image/menu-arrow.webp" alt="arrow" fill className="absolute" />
        </button>
      </div>

      {view && (
        <ul className="absolute top-[100%] z-30 w-[99px] rounded bg-primary-50 text-center text-sm shadow-md lg:right-0 lg:text-xl">
          {updateTimes.map((item) => (
            <li key={item.id} onClick={() => handleUpdateTime(item.time)} className="py-1">
              {item.time}초
            </li>
          ))}
        </ul>
      )}
</div>

2. 해당 카테고리 클릭시 url query로 저장하기

• nextjs를 사용하여 useRouter()을 사용하였다.
• router.query에 저장된 times 가져온다.

  const router = useRouter()
  const { times } = router.query
  

const handleUpdateTime = (time: number) => { setUpdateData(time) setView((prev) => !prev)

//time을 받아서 url query에 저장한다. router.push(/dashboard/${slug}/${valve}?times=${time}) }

### 3. useEffect로 qeury 불러오기
![](https://velog.velcdn.com/images/young0_0/post/1987d5c8-62ed-4d92-9131-f921e55cbf6b/image.gif)

- query에 저장된 times 가 있으면 UpdateData에 number로 state로 변경해준다.
- 만약 times가 없을 경우 기본 2초로 지정해준다.

```js
useEffect(() => {
    if (times) {
      setUpdateData(Number(times))
    } else {
      setUpdateData(2)
    }
}, [times])

결과

처음엔 useEffect를 하지 않아서 새로고침해서 남지 않았는데 useEffect로 times가 바뀔때 마다 렌더링 되도록 했더니 성공하였다! 결과가 확실하게 맞는지는 모르지만 내가 원한 대로 되어서 기쁘다! :)

문제 1

https://school.programmers.co.kr/learn/courses/30/lessons/120891?language=javascript

나의 풀이

 function solution(order){
     var answer = 0;
       // 숫자를 문자열로 변경한다.
       const str = String(order)

    // 조건에 맞는지 확인후 맞으면 1개씩 더한다.
    for(let item of str){
           if(item === '3' || item === '6' || item === '9'){
            answer++
        }
    }
 }

다른풀이

let value = order.toString().match(/[369]/g).length ?? []
return value.length

• 문자열로 변환하고 정규식 표현식을 사용하여 해당 값을 찾고 갯수를 반환
• null 경우 ??를 활용하여 변경한다.

 order.toString().split('').filter(v => v == '3' || v == '6' || v== '9' ?true:false)

• 숫자 -> 문자열 -> 배열 을 하고 filter를 통해서 해당 조건을 확인하고 length 반환

• v => v == '3' || v == '6' || v== '9' ?true:false 을 new set을 활용

 const s = new Set('369')
 order.toString().split('').filter(v => s.has(v) ).length

문제 2

https://school.programmers.co.kr/learn/courses/30/lessons/120887

내 풀이

function solution(i, j, k) {
    var answer = 0;
    var str = Array(j).fill(1).map((_,indx) => indx+1 ).slice(i-1).join('')
    for(let num of str){
       if(Number(num) === k){
          answer++
       }
    }
    return answer;
}

• j 갯수만큼 index 순서대로 1~j 만큼 넣는다.
• slice로 i의갯수만큼 자른다.
• 문자열로 만든다.
• 문자열로 만든 것을 순회하면서 k와 같으면 1씩 더한다.

다른풀이

function solution(i,j,k){
    let s = ''
    for(i; i <=j; i++){
        s +=i
    }
    return s.split(k).length-1
}

• i~j 까지 순회하여 문자열로 만든다.
• s에 문자열 저장 한 것을 split 으로 k기준 배열을 만들고 갯수를 세면 정답보다 1큰수 이므로 -1 을 해준다.

  function solution(i,j,k){
    return Array(j-i+1).fill(i).map((v,idx)=> v+idx).join('').split(k).length-1
  }

• Array를 통해 map을 통해 i부터 j까지의 수를 배열로 만든다.
• join을 통해 문자열로 만든후 다시 1을 기준으로 split를 통해 k기준으로 배열을 만들고 갯수-1을 하면 해당 답을 리턴한다.

문제 1.

https://school.programmers.co.kr/learn/courses/30/lessons/120831

내가 푼 풀이

function solution(n){
    let answer = 0;
      // 1~n 만큼 반복하며 
      for(let i = 1; i <= n; i++){
          // i를 2로 나눴을 때 0 (짝수) 일경우 한개씩 더한다.
        if(i % 2 ===0){
            answer +=i
        }
    }
}    

다른사람 풀이

n만큼 배열로 만들어서 짝수를찾아서 더해준다.

function solution (n) {
    return Array(n).fill().map((_,i) => i+1).filter(v=>v%2 === 0).reduce((a,c)=>a+c,0)
}

• Array(n).fill().map((_,i) => i+1)
  • n개 만큼 배열을 만들고 그 배열을 map으로 돌려 i~n번만큼 배열에 넣는다.(_ 는 value 값 활용하지 않을 것이므로 사용)
• fillter( v => v % 2 === 0)
  • 배열의 value 값에서 2의 짝수만 필터로 구한다.
• reduce((a,c)=> a+c)
  • reduce로 누산값 과 현재값을 더한다.
  • 빈배열일 경우 초기값을 넣지 않으면 에러가 난다.

    문제 2.

    https://school.programmers.co.kr/learn/courses/30/lessons/120817

내풀이

function solution(numbers) {
    var answer = 0;
    numbers.map((val)=> {
        answer +=val/numbers.length
    })
    return answer;
}

• map으로 전체순회해서 value값을 각각 더하고 numbers의 갯수 를 나눈다.

  다른 문제 풀이

  function solution(numbers) {    
    return numbers.reduce((a,c) => a+c,0) / numbers.length
  }
  

- reduce 를 통해 누산값 + 초기값 더하고 numbers 갯수로 나눈다.
## 문제 3.
https://school.programmers.co.kr/learn/courses/30/lessons/120585

### 문제풀이
```js
function solution(array, height) {
    var answer = 0;
    array.map(n => {
        if(n > height){
            return answer++
        }
    })
    return answer;
}

• 배열을 map으로 순회하고 키가 큰 사람을 하나씩 더했다.

다른사람 문제풀이

function solution(array, height) {
    return array.filter(v=> v > height).length
}

• filter 로 해당 조건에 맞는 값을 구하고 배열의 길이를 구함

문제 4.

https://school.programmers.co.kr/learn/courses/30/lessons/120824?language=javascript

내 풀이

    function solution(num_list) {
    var answer = [];
    var odd = 0;
    var even = 0;

    num_list.filter(v => v % 2 === 0 ? even++ : odd++)
    answer.push(even,odd)
    return answer;
}

다른 풀이

function solution(num_list) {
  var answer = [0,0];
  for(let num of num_list){
    answer[num %2] += 1
  }
  return answer;
}

• 답의 배열을 첫번째 두번째로 만들고 배열을 돌다가 짝수 와 홀수 인지를 확인하고 각각 맞다면 answer[0] 이면 짝수 answer[1] 이면 홀수 각각 +1 로 더해서 넣는다.

문제5

https://school.programmers.co.kr/learn/courses/30/lessons/120826?language=javascript

내풀이

function solution(my_string, letter) {
    var answer = '';
    for(let i of my_string){
       if(i !== letter){
           answer +=i
       }
    }
    return answer;
}

• 문자열을 for문으로 순회를 돌고 letter과 다른값을 answer에 차례대로 저장

다른풀이

function solution(my_string, letter) {
    return my_string.split(letter).join('');
}

• letter 기준으로 배열을 만들면 ''빈 문자열이 나온다.
• ''빈문자열 기준으로 다시 문자열로 변경한다.

• 서버 상태 가져오기
• 캐싱
• 동기화 및 업데이트

등 을 쉽게 다룰 수 있도록 도와주는 라이브러리. 클라이언트상태와 서버상태를 명확히 구분하기 위해서 만들어졌다.

react-query의 주요기능

1. 캐싱
2. 동일한 데이터 중복 요청을 단일 요청으로 통합
3. 백그라운드에서 오래된 데이터 업데이트
4. 데이터 상태 확인 (오래된 상태, 업데이트상태-빠르게 반영)
5. 페이지네이션, 데이터 지연 로드 와 같은 성능 최적화(페이지네이션,인피니티스크롤)
6. 서버상태의 메모리 및 가비지 수집 관리
7. 구조 공유를 사용하여 쿼리 결과 메모화

기본설정

import {QueryClient} from '@tanstack/react-query'

//기본 옵션 
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      // ...
    },
  },
});

function App() {
  return (
    // react-query연결
   <QueryClientProvider client={queryClient}>
    <App/>
   </QueryClientProvider>;
  );
}

• QueryClient를 사용하여 캐시와 상호작용 할수 있다.
• QueryClient에서 모든 query/ mutation에 기본 옵션을 추가 할수있다.
• QueryClientProvider 를 최상단에 감싸고 client prop으로 QueryClient 인스턴스를 연결 시킨다.(이 context는 앱에서 비동기 요청을 알아서 처리하는 background 계층이된다.)

용어 정리

• caching: 특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것

• fresh : 새롭게 추가된 쿼리 인스턴스이며 만료되지 않은 쿼리.(컴포넌트가 마운트, 업데이트 되어도 데이터 재요청을 하지 않고 항상 캐시된 데이터를 가져온다.)
• fetching: 요청 상태인 쿼리 (대기중)
• stale : 데이터 패칭이 완료되어 만료된 쿼리 (컴포넌트가 마운트, 업데이트 되면 캐시된 데이터가 환횐다.)
• inactive: 비활성화된 쿼리(5분뒤 가지비 콜렉터가 캐시를 제거한다.)

캐싱 라이프 사이클

1. A라는 queryKey를 가진 A 쿼리 인스턴스가 mount 됨
2. 네트워크를 통해 데이터를 가져오고(fetch),가져오는 데이터는 A라는 queryKey로 캐싱함
3. 이 데이터는 신선한(fresh) 상태에서 staleTime(기본값 0) 이후 오래된 (stale)상태로 변경됨
4. A쿼리 인스턴스가 unmout됨
5. 캐시는 cacheTime(기본 5분)만큼 유지하다가 가비지 컬렉션 됨
6. 만약 cacheTime이 지나기전, A 쿼리 인스턴스가 신선한(fresh)상태라면 새롭게 mount 되면 캐시된 데이터 보여줌

데이터 갱신

기본값으로 설정된 경우 오래된 쿼리는 자동으로 데이터를 다시 가져온다.

• 쿼리를 사용한 컴포넌트가 마운트 되었을때 (refetchOnMout)
• 윈도우가 다시 포커스 되었을 때 (refetchOnWindowFocus)
• 네트워크가 다시 연결되었을 때(refetchOnReconnect)
• refetchInterval 설정 하여 반복적으로 refetch 되도록 설정 했을 때

  useQuery 기본 문법

  // 방법1
  const {data,isLoading,...} = useQuery(queryKey,queryFn,{
  //options
  }
  

//방법2 const result = userQuery({ queryKey, queryFn, {// option } }) result.data result.isLoading

// 예제 const getAllSuperHero = async ()=>{ return await axios.get('http://localhost:4000/superheros') }

const {data, isLoading} = useQuery(['super-heros'],getAllSuperHeor)

### 1. queryKey
```js
 const getSuperHero = async ({queryKey}:any) =>{
   const heroId = queryKey[1]
   return await axios.get(`http://localhost:4000/superheroes/${heroId}`)
 }

 const useSuperHeroData = (heroId:string)=>{
     return useQuery(['super-hero', heroId] ,getSuperHero)
 }

• ['super-heroes'] 배열 지정
• querykey 기반으로 데이터를 캐싱 관리한다.
  • 쿼리가 특정 변수에 의존하면 배열에 이어서 넣어주면 된다. ['super-hero', heroId]
  • qeuryClient.setQueryData과 같이 특정 쿼리에 접근이 필요할때 초기에 설정해둔 포맷을 지켜줘야 제대로 쿼리에 접근 할수 있다.

2. queryFn

const getSuperHero = async (heroId: string) => {
  return await axios.get(`http://localhost:4000/superheroes/${heroId}`);
};

const useSuperHeroData = (heroId: string) => {
  return useQuery(["super-hero", heroId], () => getSuperHero(heroId));
};

• Promise를 반환하는 함수를 넣어야 한다.
• queryKey 와 queryFn 예제의 차이
  • queryKey 예제는 2번째 queryFn에 getSuperHero 함수를 바로 넘겨주고, getSuperHero에서 매개 변수로 객체를 받아와 해당 객체의 queryKey를 활용
  • queryFn 예제는 그냥 2번째 queryFn에 화살표 함수를 사용하고, getSuperHero의 인자로 heroId를 넘겨주고 있다.

주요 리턴 데이터

const { status, isLoading, isError, error, data, isFetching, ... } = useQuery(
  ["colors", pageNum],
  () => fetchColors(pageNum)
);

• status : 상태를 표현하는 4가지 값

  • idle: 쿼리 데이터가 없고 비었을때
  • loading : 캐시된 데이터가 없고 로딩중
  • error: 요청 에러
  • success: 요청성공

• data: 쿼리 함수가 리턴한 Promise에서 resolve된 데이터
• isLoading: 캐싱 된 데이터가 없을때, 즉,처음 실행된 쿼리 일때 로딩 여부에 따라 true/false 로 반환
• isFetching:캐싱 된 데이터가 있더라도 쿼리가 실행되면 로딩 여부에 따라 true/false로 반환된다.
• error: 쿼리 함수에 오류가 발생한 경우, 쿼리에 대한 오류 객체
• isError : 에러가 발생한 경우 true

주요 옵션

retry

const {isLoading, isFetching, data, isError, error} = useQuery(['super-hero'], getSuperHero,{
    retry:10
}

query/mutation 작업이 실패하면 자동으로 재시도를 한다. Query 기본값은 3번 이며, Mutation의 기본값은 0이다. retryDelay설정을 통해 간격을 설정 할 수 있다.

• false: 실패한 쿼리는 다시 시도 하지 않는다.
• true: 실패한 쿼리를 무한으로 재요청 시도
• number: 숫자 만큼 시도

  const {isLoading, isFetching, data, isError, error} = useQuery(['super-hero'], getSuperHero,{
  cacheTime: 5*60*1000  
  staleTime: 1*60*1000  
  }

  staleTime

  데이터가 오래된 것으로 인식하게 되는 시간.(fresh -> stale) ms로 저장되는데 기본값 은 0 이며 데이터가 오래 되었다고 판단되면 다시 데이터를 가지고 온다.
• fresh 상태일 때는 쿼리 인스턴스가 새롭게 mount 되어도 네트워크 요청(fetch)가 일어 나지 않는다.
• 0: 데이터를 가져온 즉시 오래된 데이터로 인식하여 캐시 된 데이터를 우선 사용한 후 API를 다시 호출하여 새로운 데이터를 응답 받으면 데이터를 교체한다.
• 5000 :
  • 5초 이전 데이터를 요청한 경우: 최신 데이터로 판단하여 API를 다시 호출하지 않고 캐시된 데이터를 사용한다.
    • 5초 이후 데이터를 요청한 경우 : 캐시 된 데이터를 오래된 데이터로 판단 하여 캐시 된 데이터를 우선 사용한 후, API를 다시 호출하여 새로운 데이터를 응답 받으면 데이터를 교체하고 응답 받은 데이터를 캐시한다.

      cacheTime

      데이터를 얼마나 오랫동안 보관 할 것인지 나타내는 시간. ms단위로 저장되는데 기본값 은 5분(5 x 60 x 1000). 쿼리 인스턴스가 unmount 되면 데이터는 비활성화(inactive) 상태가 되는데, 비활성화 된 데이터는 cacheTime에 설정된 시간이 지난후 가비지 컬렉션이된다.
• cacheTime이 지나기 전에 쿼리 인스턴스가 다시 mount되면, 데이터를 fetch하는 동안 캐시 데이터를 보여준다.
• 5000:
  • 비활성화 된 데이터를 5초 이전에 요청한 경우: 캐시 된 데이터를 우선 사용한 후 API를 호출하여 새로운 데이터를 응답 받으면 응답 받은 데이터를 다시 캐시한다.
  • 비활성화 된 데이터를 5초 이후에 요청한 경우: 데이터가 이미 가비지 컬렉션 되었기 때문에, 캐시 데이터를 사용하지 못하고 API 응답 데이터를 기다린 후 데이터를 응답 받은 데이터를 사용하고 캐시한다.

    refetchOnMout

    const {isLoading, isFetching, data, isError, error} = useQuery(['super-hero'],
    getSuperHero,{
    refetchOnMount: true
    }

    데이터가 stale 상태일 경우, mount마다 refetch를 실행하는 옵션 기본값 true
• aways : 마운트 시마다 매번 refetch 실행
• false : 최초 fetch 이후 refetch 하지 않는다.

  refetchOnWindowFocus

  const {isLoading, isFetching, data, isError, error} = useQuery(['super-hero'],
  getSuperHero,{
    refetchOnWindowFocus: true
  }

  데이터가 stale 상태일 경우 윈도우 포커싱 될때마다 refetch 옵션 기본값 true
• aways : 항상 윈도우 포커싱 될 때마다 refetch를 실행한다.

  Polling

  const {isLoading, isFetching, data, isError, error} = useQuery(['super-hero'],
  getSuperHero,{
    refetchInterval:2000,
      refetchIntervalInbackground:true
  }

  리얼타임 웹을 위한 기법으로 일정한 주기(특정시간)를 가지고 서버와 응답을 주고 받는 방식
• refetchInterval: ms(시간)을 값으로 넣어주면 일정 시간 마다 자동으로 refetch
• refetchIntervalInBackground : refetchInterval과 함께 사용하는 옵션, 탭/창이 백그라운드에 있는 동안 refetch(브라우저에 focus되지 않아도 refetch 시켜준다.)

  enabled refetch

  const {isLoading, isFetching, data, isError, error, refetch} = useQuery(['super-hero']
  ,getSuperHero,{
  enabled:false
  })
  

const handleClickRefetch = useCallback(()=>{ refetch() },[refetch])

return(

쿼리가 자동으로 실행되지 않도록 할 때 설정. false를 주면 자동으로 실행되지 않는다. useQuery리턴 데이터 중 status가 idle 상태로 시작한다.
- refetch는 쿼리를 수동으로 다시 요청하는 기능이다. 
- 버튼 클릭이나 특정 이벤트를 통해 요청을 시도할 때 같이 사용된다.
- `enabled:false` : queryClient가 쿼리를 다시가져오는 방법 중 invalidateQueries와 refetchQueries를  무시한다.

### select
```js
const { isLoading, isFetching, data, isError, error, refetch } = useQuery(
  ["super-hero"],
  getSuperHero,
  {
    onSuccess,
    onError,
   select(data){
     const superHeroNames = data.data.map((hero:Data)=>hero.name)
     return superHeroNames;
  }
);

return (
  <div>
    <button onClick={handleClickRefetch}>Fetch Heroes</button>
    {data.map((heroName: string, idx: number) => (
      <div key={idx}>{heroName}</div>
    ))}
  </div>
);

쿼리 함수에서 반환된 데이터의 일부를 변환하거나 선택할 수 있다.

KeepPreviousData

const fetchColors = async (pageNum:number) =>{
    return await axios.get(`http://localhost:4000/colors_limit=2&_page=${pageNum}`)
}

const {isLoading, isError, error, data, isFetching, isPreviousData}= useQuery(['colors', pageNum],
                                                                              ()=>fetchColors(pageNum),{
    keepPreviousData: true
})

• true: 쿼리 키가 변경되어서 새로운 데이터를 요청하는 동안에도 마지막 data값을 유지한다.
• 페이지네이션 기능을 구현할 때 편리하다. (캐싱되지 않은 페이지를 가져올때 깜빡거리는 현상 방지)
• isPreviousData 값으로 현재의 쿼리 키에 해당하는 값인지 확인할 수있다. (아직 새로운 데이터가 캐싱 되지 않았따면, 이전 데이터이므로 true를 반환하고 새로운 데이터가 정상적으로 받아져 왔다면 이전데이터가 아니므로 false 이다.)

useQueries

• 병렬쿼리란 동시에 여러 쿼리를 요청하는 방법. (동시성 극대화)

  const queryResults = useQueries({
  queries:[
    {
      querykey: ['super-hero',1],
      queryFn : () => fetchSuperHero(1),
      staleTime:Infinity,
    },
  {
    querykey:['super-hero',2]
    queryFn : () => fetchSuperHero(2),
    staleTime:0,
   }
  ]
  })
  

## QueryClient
QueryClient 인스턴스는 React query에 유용한 기능을 담고 있다.
```js
import {useQueryClient} from '@tanstak/react-query'

const Todos = ()=>{
    const QueryClient = userQueryClient()
}

쿼리 무효화 (invalidateQueries)

쿼리를 무효화 하여 데이터를 다시 가져오게 할 수 있다.

import {useQueryClient} from '@tanstak/react-query'

const Todos = ()=>{
    const QueryClient = userQueryClient()

    const mutation = useMutation({
      mutationFn : addTodo,
     onSuccess(data) {
      queryClient.invalidateQueries(["todo"]); // 이 key에 해당하는 쿼리가 무효화!
      console.log(data);
    },
    onError(err) {
      console.log(err);
    },
 })
}

• 화면을 최신 상태로 유지하는 가장 간단한 방법
• Mutation과 함께 사용 되는 경우 많다.

  쿼리 취소

  const query = useQuery(["super-heroes"], {
  /* ...options */
  });
  

const queryClient = useQueryClient();

const onCancelQuery = (e) => { e.preventDefault();

queryClient.cancelQueries(["super-heroes"]); };

return Cancel;

- 쿼리를 수동으로 취소하고 싶은 경우
    - 요청 시간이 오래 걸리는 경우 사용자가 취소버튼으로 중지하는 경우
    - HTTP 요청이 끝나지 않았을 때, 페이지를 벗어날 경우 불필요한 네트워크 리소스 개선
- queryFn promise도 취소한다.
### 수동 쿼리 업데이트
```js
const queryClient = useQueryClient()

//예제1
useMutation(addSuperHero, {
    onSuccess(data) {
      queryClient.setQueryData(["super-heroes"], (oldData: any) => {
        return {
          ...oldData,
          data: [...oldData.data, data.data],
        };
      });
    },
    onError(err) {
      console.log(err);
    },
});

//예제2 낙관적 업데이트
useMutation({
  mutaitionFn: uptateTodo,
  onMutate : async(newTodo) =>{
    //optimistic update 한것이 덮어써지지 않도록 쿼리 취소
      await queryClient.cancelQueries({querykey:['todo']})
    // 에러 발생시 복원을 위해 기존 데이터 저장
    const previousTodos = queryClient.getQueryData(['todos'])
    //예상되는 변경 값으로 업데이트
    queryClient.setQueryData(['todos'],(old)=>[...old, newTodo])
    return {previousTodos}                        
  },
  // mutation이 실패하면 onMutate에서 반환된 context를 사용하여 롤백 진행
  onError:(err, newTodo, context)=>{
    // context를 통해 기존 값 쿼리 업데이트
        queryClient.setQueryData(['todos'], context.previousTodos)
  }
   // 오류 또는 성공 후에는 항상 리프레쉬
  onSettled:()=>{
    queryClient.invalidateQueries({queryKey:['todos']})
 }
})

때때로 수동으로 쿼리를 업데이트 해 주는 것이 더 좋은 사용성을 제공할 수 있다. qeuryClient.setQueryData를 사용하면 된다.

• 낙관적 업데이트(Optimistic Update): Mutation으로 상태를 변경후 데이터 노출이 늦어진다면 수동으로 먼저 쿼리를 업데이트 하여 사용자에게 빠르게 변경된 결과를 제공하는 것. (인터넷 속도가 느리거나 서버가 느릴 때이다. 유저가 행한 액션을 기다릴 필요 없이 바로 업데이트되는 것처럼 보이기 때문에 사용자 경험(UX) 측면에서 좋다.)

  쿼리 미리 가져오기

  const perfetchNextPosts = async (nextPage:number)=>{
    const queryClient = useQueryCleint();
   await queryClient.prefetchQuery(
     ['posts',nextPage],
     ()=>fetchPost(nextPage),
     {
         //options...
     }
   )
  }
  

useEffect(()=>{ const nextPage = currentPage +1 if(netxtPage < maxPage){ prefetchNextPosts(nextPage) } },[currentPage])

미래에 사용 될 수 있는 쿼리를 미리 가져올 수 다. `queryClient.prefetchQuery`로 가져오는 데이터가 이미 캐싱되어 있다면 데이터를 가져오지 않는다.
- 미리 가져온 쿼리를 캐시를 해두기 때문에 Query를 통해 데이터를 가져올 때 캐시된 데이터를 사용하여 빠른 결과를 얻을 수 있다,
- ex: 1페이지에서 2페이지로 이동했을 때 3페이지의 데이터를 queryClient.prefetchQuery로 미리 캐시해 둔다면 3페이지로 전환할 때 빠른 결과 값을 가져올 수 있다(페이지네이션 - ux측면에서 좋다.)

## useMutation
```js
const CreateTodo = () => {
  const mutation = useMutation(createTodo, {
    onMutate() {
      /* ... */
    },
    onSuccess(data) {
      console.log(data);
    },
    onError(err) {
      console.log(err);
    },
    onSettled() {
      /* ... */
    },
  });

  const onCreateTodo = (e) => {
    e.preventDefault();
    mutation.mutate({ title });
  };

  return <>...</>;
};

• 서버의 데이터 post,patch,pus,delete와 같이 수정하고자 할때 사용한다.
• onMutate :mutation 함수가 실행되기 전에 실행되고, mutation 함수가 받을 동일한변수가 전달된다.
• onSuccess, onError : 성공시, 실패시
• onSettled : 성공하든 에러가 발생되든 상관없이 마지막 실행

  mutation 과 mutationAsync 차이 (mutation 사용이 좀더 유리함.)

  • mutation : onSuccess,onError,onSettled 와 같은 콜백 함수로 처리 할수 있다.
  • mutationAsync: Promise 반환하기 때문에 then,Async await로 처리해야 한다.(에러핸들링을 직접 다뤄야 한다.)

참고 https://beomy.github.io/tech/react/tanstack-query-v4/#errorboundary https://github.com/ssi02014/react-query-tutorial#infinite-queries

외주 프로젝트를 하면서 코치님께 배운 가독성을 위한 컴포넌트 작성법 정리해 보려고 한다.

작성하게된 계기

외주 프로젝트를 하면서 내가 짠 코드를 다른 사람이 보면서 이해 할수 있게 짜는 법에 대해 배웠다. 사실 내가 짠 코드도 이게 컴포넌트 인지, 스타일 컴포넌트인지 (styled-components)인지 헷갈릴때가 많았다.

위 이미지에서 본것 처럼 <StyledDiv>는 style-component 이고 <TodoList>는 그냥 컴포넌트 이다. 지금은 몇줄 안되는 코드 이지만 코드가 길어지고 styled-components가 아래로 밀려나게 된다면 <StyledDiv>가 styled-component 인지 확신이 필요하게 된다.

해결방법

1. 폴더/파일 분리

먼저 폴더를 구분하여 해당 컴포넌트와 스타일컴포넌트를 분리한다.

2.스타일분리

스타일 컴포넌트를 style.ts파일로 분리한다.

3.S-dot naming convention

스타일 컴포넌트를 분리할때 S라는 이름으로 요약하여 구분해주는 방식 으로 styled-componets를 가독성있게 볼수 있게 해준다.

impot *

가져올 것이 많으면 import * as <obj> 처럼 객체 형태로 원하는 것들을 가지고 올수 있다. as를 사용하면 이름을 바꿔서 모듈을 가져 올수 있다.

느낀점

확실히 가독성이 좋아져 코드를 분석하기 좋게되었다!

selet 태그가 아닌 ul로 selectbox 만들어보기. style은 tailwind 이다.

ui 제작

 const dummyData = [
    { feel_id: 1, feel: CategoryEmoji.happy, desc: '행복' },
    { feel_id: 2, feel: CategoryEmoji.sad, desc: '슬픔' },
    { feel_id: 3, feel: CategoryEmoji.calm, desc: '평온' },
    { feel_id: 4, feel: CategoryEmoji.exciting, desc: '신남' },
    { feel_id: 5,feel: CategoryEmoji.depressed,desc: '감동',isActive: false,},
    { feel_id: 6, feel: CategoryEmoji.angry, desc: '화남', isActive: false },
  ];

 <ul>
      <li
        key={emoji.feel_id}
        className={[
          'flex cursor-pointer flex-col text-gray  opacity-50 transition-all  delay-300 ease-in-out hover:text-purple hover:opacity-100 ',

        ].join(' ')}
      >
        <span className="text-2xl">{emoji.feel}</span>
        <span className="mt-1 text-xs">{emoji.desc}</span>
      </li>
 </ul>

선택했을 경우 선택한 부분만 변하게 하기

여러가지 감정중에 한감정을 선택 했을 경우 opacity:1, color:purple 로 변경

const [selectValue, setSelectValue] = useState<number>(1)

// 클릭했을 때 바뀌는 부분
const handleClick = (id:number)=>{
    setSelected(id)
}
<ul>
      <li
        onClick={()=>handleClick(feed_id)}
        key={emoji.feel_id}
        className={[
          'flex cursor-pointer flex-col text-gray  opacity-50 transition-all  delay-300 ease-in-out hover:text-purple hover:opacity-100 ',
        `${
            selectValue === emoji.feel_id
              ? 'font-bold text-purple opacity-100'
              : 'text-gray'
          } `,
        ].join(' ')}
      >
        <span className="text-2xl">{emoji.feel}</span>
        <span className="mt-1 text-xs">{emoji.desc}</span>
      </li>
 </ul>

각각의 <li>를 클릭했을때 feed_id를 전달 한다. selectValue가 각각 feed_id와 같으면 opacity:1, color:purple 로 변경한다.

느낀점

처음 만들때 true/false로 만들려고 하니 전체적으로 모두가 바뀌는 상황이 발생했다. 각 클릭했을때 각 고유의 값을 전달하면 쉽게 해결될 일이였는데 너무 어렵게 생각 해서 생각보다 시간이 오래걸렸다. 생각을 좀더 정리하고 코드를 짜는 습관을 만들어야 할것같다.

파일 업로드

파일을 선택하는 input 창이 안보이게 하고 뒷 배경을 클릭했을 경우 뜨게 하는 방법을 하려고 한다. css 는 tailwind를 사용 하였다.

<div className="relative flex h-full flex-col items-center  justify-center overflow-hidden rounded-2xl bg-beige">
  <label 
      className="flex h-full w-full cursor-pointer flex-col items-center justify-center">
    <span>사진을 추가해 주세요</span>
    <input  type="file" accept="image/*" />
  </label>
</div>

나중에 input file를 안보이게하고 그 부분에 이미지를 업로드 했을경우 클릭했을 때 이미지 업로드 창이 뜨게 하기 위해 label에 전체를 감쌌다.

input file

• 저장장치의 파일을 하나 혹은 여러개 선택할수 있다.
• File API를 사용해 조작할 수 있다.
• accept: 허용하는 파일 유형을 나타내는 하나이사의 고유한 파일 유형 지정자

이미지 미리보기

이미지를 업로드 하고 미리 보기

//type
export interface EditorDataType {
  file?: string | null;
}

const [editorData, setEditorData] = useState<editorDataType>(null)
const fileRef = useRef<HTMLInputElement>(null);


//이미지 미리보기
const handleUploadFile = () => {
  const fileImg = fileRef?.current?.files?.[0];
    if (fileImg) {
      const reader = new FileReader();
      reader.readAsDataURL(fileImg);
      reader.onloadend = () => {
        setEditorData(reader.result as string);
      };
    }
  };

  //이미지 영역
 <div className="relative flex h-full flex-col items-center  justify-center overflow-hidden rounded-2xl bg-beige">
    <label
       onChange={handleUploadFile}
       className="flex h-full w-full cursor-pointer flex-col items-center justify-center">

         <span className="mt-2">사진을 추가 하세요</span>
      {/* 업로드 된 이미지 */}
         {file && <img src={file} className="write-img" />}
         <input
          className="hidden"
          type="file"
           accept="image/*"
           ref={fileRef}
         />
   </label>
</div> 

FileReader

File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해준다.

FileReader.onload

FileReader가 성공적으로 파일을 읽어 들었을 때 의 이벤트 핸들러

FileReader.readAsDataURL()

File 혹은 Blob 을 읽은 뒤 base64로 인코딩한 문자열을 FileReader 인스턴스의 result라는 속성에 담아준다. 이 메서드를 사용해 우리의 이미지를 base64로 인코딩하여 state 안에 넣어준다.

head

html <title> 요소는 브라우저의 제목 표시줄이나 페이지 탭 보이는 문서 제목을 정의한다. <head> 안에서 사용해야 한다.

사용해야 하는 이유

SEO

페이지 제목은 SEO(검색엔진)에 큰영향을 준다. 상세한 제목이 더 좋은 검색 결과를 가져온다. 검색엔진이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이다.

react 에서 사용 하는 방법

1. head tag 안에 title, meta tag

public/index.html 에 <head>태그 안에 홈페이지의 제목을 지정할수 있는 <title></title> 와 홈페이지를 설명할수 있는<meta name="description" content="~~~"/> 가 있다. 그 부분을 수정해 주면 된다.

2. 각 page의 title 변경하기

각 page의 title을 수정하기 위해서는 src/pages/Home.js 같이 src/pages의 각 page에 작성하면 된다.

useEffect(()=>{
  const titleElement = document.getElementByTagName('title')[0]
  title.Element.innerHTML = `my diary`
},[])

index.html의 title 태그를 변경할 수 없으니 react가 마운트 됐을 때 title이라는 태그를 불러온다. title의 배열중 첫번째 title 태그를 가져와서 텍스트를 변경해준다. 각 페이지 마다 변경해주면 페이지를 이동할때 마다 아래와 같이 변경된다.

3. favicon 변경

public/favicon.ico 의 이미지를 favicon.ico 동일한 이름으로 이미지를 변경한다. favicon을 만들어 주는 방법은 따로 있다!(구글링)

web storage API는 부라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할수 있는 방법을 제공한다.

Web Storage 개념과 사용법

두가지 방식은 다음과 같다.

sessionStorage

• 각각의 출저에 대해 동립적인 저장 공간을 페이지 세션이 유지되는 동안 (브라우저가 열려 있는 동안) 제공한다.

  • 세션에 한정해, 브라우저또는 탭이 닫힐 때 까지만 데이터를 저장한다.
  • 데이터를 절대 서버로 전송하지 않는다.
  • 저장 공간이 쿠키보다 크다 (최대 5MB)

localstorage

• 브라우저를 닫았다 열어도 데이터가 남았있다.

  • 유효기간 없이 데이터를 저장하고, Javasctipt를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다.
  • 저장 공간이 셋 중 제일 크다.

localstorage react 예제

1. localstorage 저장

localstorage에 key/value 로 저장한다.

  useEffect(()=>{
    localstorage.setItem('item1',10) // key:item1, value:number
    localstorage.setItem('item2','10') // key:item2, value:string
    localstorage.setItem('item3',{value:30}) // key:item3, value:object
 },[])

객체로 저장할경우 확인하게 되면 [object Object]로 나타나게 되는데 해결 하기 위해 JSON.stringify() 메소드로 직렬화(문자 화) 해줘야 한다.

  useEffect(()=>{
    localstorage.setItem('item1',10) // key:item1, value:number
    localstorage.setItem('item2','10') // key:item2, value:string
    localstorage.setItem('item3',JSON.stringify({value:30})) // key:item3, value:object
 },[])

2.localstorage 저장한 값 꺼내기

localstorage에 저장된 key값을 꺼내온다.

  useEffect(() => {
    const item1 = localStorage.getItem("item1");
    const item2 = localStorage.getItem("item2");
    const item3 = localStorage.getItem("item3");

    // 객체로 console.log 찍기
    console.log({ item1, item2, item3 });
  }, []);

item1 은 number로 저장했지만 string 값으로 가져온다. (기본적으로 localstorage에 들어가는 값들은 string으로 바뀐다.)

그래서 number을 가져올때는 parseInt() 메소드를 활용하고 객체는 JSON.parse() 메소드를 활용하여 직렬화 한다.

useEffect(() => {
    const item1 = parseInt(localStorage.getItem("item1"));
    const item2 = localStorage.getItem("item2");
    const item3 = JSON.parse(localStorage.getItem("item3"));

    console.log({ item1, item2, item3 });
  }, []);

<img src={process.env.PUBLIC_URL + `/assets/emotion1.png`} alt="img"/>

process.env.PUBLIC_URL 를 사용하면 어떤 곳에 있던 /public 디렉토리를 가리키게 된다. public 폴더를 바로 가져올수 있는 명령어 이다.

2.상황에 맞는 class명 지정하기

className은 배열로 여러가지를 넣을수 있는데 type에 따라 다르게 설정할수 있다. 배열로 클래스 명을 설정하고 사용하기 위해서는 join메소드를 사용하여 string으로 수정해 줘야 한다.

component

const CustomButton = ({text,type, onClick})=>{

  return(    
    <button class={['CustomButton' ,`CustomButton_${type}`].join(' ')}onClick={onClick}>{text}</button>
)
}

//type 전달이 없을땐 default를 전달한다.

CustomButton.defaultProps = {
    type:'default'
}
export default CustomButton

css

.CustomButton_default {
  background-color: #ececec;
}

.CustomButton_positive {
  background-color: #64c964;
}
.CustomButton_negative {
  background-color: #fd565f;
  color: white;
}

<img> 나 <IMAGE> 태그 lazy를 사용하면 해당 태그 영역에서 불러와 네크워크 비용을 줄일수 있다. (이미지를 미리 다운로드 하지 않는다)

장점

1. webp 형식으로 변환

• <IMAGE>태그를 사용하면 서버에서 이미지 용량 초적화를 해준다.
• quality라는 태그를 통해서 최적화를 변경 할수 있다.

2. placeholder = ‘blur’ 로 이미지 최적화

• static한 이미지 이기 때문에 (public)서버에서자동으로 해준다.

3. next/image 외부 에서 받아올때

• 외부에서 받아오는 이미지이기 때문에 width 와 height 를 알지 못해 에러가 날수 있다.- 빌드타임에 미리 최적화 할수 없다. 정적으로 이미지를 제공할 수 없다.

  4.외부링크(인터넷이미지)이미지를 연결할때

• next.config.js
• 도메인 연결 해준다. / 연결후엔 다시 개발환경을 끄고 다시 실행해야한다.

images: { domains: ['lecture-1.vercel.app'], }

• https://nextjs.org/docs/api-reference/next/image#remote-patterns (path 네임을 정확하게 하고 싶으면 remote로 한다.)

5. 이미지 크기 layout 태그

<figure>
        <div style={{ width: 500, height: 100, position: 'relative' }}>
          <LegacyImage
            src="https://lecture-1.vercel.app/example.jpg"
            alt="fill image"
            layout="fill"
            objectFit="cover"
          />
        </div>
        <figcaption>fill image</figcaption>
</figure>

LegacyImage

12버전이며 13에서 의 <IMAGE> 태그와 비슷하지만 다르다. <LegacyImage> 태그로 하게되면 span 태그 등 가독성과, 웹접근성에 좋지 않다.

13버전에서 업데이트 된것

1. webp로 용량을 최적화 해줌
2. blur 이미지를 자동으로 생성해주고
3. layout shift 를 자동으로 막아주고
4. lazy loading도 지원해 준다.

로그인 시 서버에 바디에 받은 accessToken을 쿠키에 저장하고 유저 정보는 recoil에 저장한다.

const loginMutation = useMutation(
    (data: LoginInfor) => {
      return axios
        .post(`${process.env.NEXT_PUBLIC_API_KEY}/auth/signin`, data)
        .then((res) => {
                    const data = res.data;
                    //쿠키에 access 토큰 저장 //7일동안 
          document.cookie = `accessToken=${encodeURIComponent( data.accessToken)}; exprires=${getCookieExpiration(7)}`;
                    //recoil에도 유저 정보를 저장한다.
                    const data = res.data;
          setUserInfor(data);
          return res.data;
        });
    },
  );

getCookieExpiration 함수를 통해 7일간 저장한다.

getCookieExpiration 함수는 쿠키의 만료 날짜를 계산합니다. 사용자가 입력한 정보를 encodeURIComponent 를 사용하여 인코딩한 후, document.cookie에 문자열 형태로 설정

const getCookieExpiration = (days: number) => {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    return date.toUTCString();
};

저장한 유저 정보 활용하기.

1. 리코일에 저장하기

import {atom} from 'recoil'
export const userState = atom({
    key: 'userState',
    default:null
})

1. 유저 정보 업데이트하기:유저가 로그인 성공하면 userState에 저장한다.

import {userSetRecoilState] from 'recoil'

function handleLoginSuccess(userInfo){
    const setUser = useSetRecoilState(userState);
    setUser(userInfo)
}

1. 로그인 유저 정보 확인하기: useRecoilValue 훅을 사용하여 userState 값을 가져온다.

import {useRecoilValue} from 'recoil'

function UserInfo(){
    const user = useRecoilValue(userState)

    if(user) {
        return <div>로그인 유저 : {user.name}</div>
    }else{
        return <div> 로그인되지 않음</div>
    }
}

로그아웃 하면 정보 없애기

const user = useRecoilValue(userInformation);
  const resetUerState = useResetRecoilState(userInformation);
  const [logout, setLogout] = useRecoilState<boolean>(logoutModalState);

  const handleLogout = () => {
    document.cookie = `accessToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; `;
    //recoil 상태 초기화
        resetUerState();
        //로그아웃 완료팝업
    setLogout((prev: boolean) => !prev);
  };

LectureItem 컴포넌트에서 data prop을 전달 받는데, LectureDataItem 타입에 data필드가 없기 때문에 발생한 에러.

해결 방법

LectureItem 컴포넌트에서 data prop을 lecture와 같이 LectureDataItem타입에 맞게 필드 이름을 수정하면 된다.

interface LectureDataItem {
  id: number;
  course_title: string;
  link: string;
}

// props 에 타입 전달
interface LectureItemProps {
  lecture: LectureDataItem;
}

const LectureItem = ({ lecture }: LectureItemProps) => {
  return (
    <LectureItemWrapper>
      <LectureItemTitle>{lecture.course_title}</LectureItemTitle>
      <LectureItemLink href={lecture.link} target="_blank">
        보러가기
      </LectureItemLink>
    </LectureItemWrapper>
  );
};

const LectureList = () => (
  <LectureListWrapper>
    {initialData.map((data) => (
      <LectureItem lecture={data} key={data.id} />
    ))}
  </LectureListWrapper>
);

LectureItemProps 인터페이스에서 lectureprop의 이름을 data 에서 lecture로 수정하고, LectureItem컴포넌트에서 lecture prop을 사용하도록 변경 해주면 된다.

• 매 컴포넌트가 증가함에 따라 스타일 코드의 일관성이 떨어 진다. -> 유지보수 비용의 증가
• 스타일 속성값들이 중구난방이라 어떤 속성을 갖고 있는지 코드로 확인이 어렵다. -> 협업에서의 문제
• 스타일마다 다른 속성을 갖고 있어서 재사용이 불가능하다 -> 비효율성 증가

이런 문제점을 styled-components를 사용한다면 contextAPI를 통해 한 번에 해결할 수 있다.

ThemeProvider

styled-components는 ThemeProvider 를 통해서 강력한 theming 전략을 제공한다. context를 사용해서 모든 리액트 컴포넌트에게 theme 속성을 전달하는 역할을 수행한다.

1. App.jsx

   import {ThemeProvider} from 'styled-components'
   

const theme = { color:red }

const App = () => { return ( ) }

App 컴포넌트에서 최상단의 태그가 <ThemeProvider> 이므로 하위 자식의 모든 컴포넌트는 <ThemeProvider>의 props로 넘어가는 thme 값을 사용할 수 있게 된다.

2. Test
```js
import styled, {ThemeProvider} from 'styled-components';

  const Button = styled.button`
      background-color : ${(props)=>props.theme.color}
  `

  const Test = () =>{
       return (
          <Button>버튼 테스트</Button>
      )
  }

block 요소는 화면의 한 줄을 전부 차지하는 요소 이고, inline 요소는 요소안에 내용 길이 만크만 너비를 차지 하는 요소 입니다. block 예 <div>,<p>,<tabale>,<form>,<ul>,<h1> 등 inline 예 <span>,<a>,<strong>,<input>,<img> 등

block과 inline 특징

inline

• width, height 값을 줘도 안먹힌다.
• 내부에 블럭요소를 포함할수 없다.
• 인라인 요소를 css로 블럭화 할수 있다. (display:block) 또한 인라인요소와 블럭요소의 속성을 모두 갖는 속성으로 변경이 가능하다. (display:inline-block)
• line-height로 줄의 높낮이를 조절할 수있고 text-align 으로 텍스트 중앙, 좌우측 정렬을 할수 있다.

  block

• width, height 값을 주면 먹는다.
• 내부에 인라인요소를 포함 할수 있다.
• 블록요소 다음에는 줄바꿈이 이뤄진다.
• 블록요소를 인라인 요소의 속성으로 변경 할수 있다. (display:inline),인라인요소와 블럭요소의 속성을 모두 갖는 속성으로 변경이 가능하다. (display:inline-block)

li 요소는 목록 아이템을 보여주기 위한 요소이다. 목록을 담아주는 ul 요소가 필요하며 li 는 자식 요소가 되어야 한다.

ul요소 없이 사용 하게 되면 화면상 문자는 없지만 시맨틱 구조를 지킴으로써 홈페이지 표준기준을 지키고 그에 따라 다른개발자들과 협업을 하여 코드를 쉽게 이해하고 분석할 수 있게 해준다.

ul (Unorder List)?

순서가 중요하지 않은 목록을 나타낼 때 사용 한다. 점,사각형 등의 도형으로 표시 하며 자식 요소로 li 를 한개 이상 작성해야 한다.

순서가 바뀌었을때 그 목록의 의미도 바뀌게 된다면 <ol> 태그를 쓰는 것이 바람직 하다.

ol(Order List)?

순서가 중요한 목록을 나타낼 때 사용한다. 1,2,3 처럼 차례로 증가하는 번호가 붙는 목록 이며 자식 요소로 li를 한개 이상 작성해야 한다.

<ul> 과 <ol> 의 차이점은 순서의 중요성 이다.

li(List item)?

목록 안에 아이템항목 을 나타낸다.

사용된 예시

ul은 보통 네비게이션을 만들 때 <nav> 안에 넣어 사용합니다. ol은 실시간 검색어, 등 순서가 있는 항목을 제작할때 사용합니다.

애플리케이션의 상태를 관리하기 위한 견고하고 안정적인 솔루션을 제공한다.

redux가 필요한 이유

• 자식 컴포넌트 간 직접적인 데이터 전달이 불가능하다

• 자식 컴포넌트가 많아지고 이들 간 데이터 전달이 필요하다면 부모로부터 props 전달이 필요하다
• 프로젝트가 커지면서 props Driling 이슈가 발생한다.
• 프로젝트가 커지면서 코드가 복잡하고, 유지 보수의 어려움이 증가한다.

redux 세가지 원칙

1. 진실은 하나의 근원으로부터

• 동일한 데이터는 항상 같은 곳에서 가지고 온다.
• 애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장된다.

  2. state는 읽기 전용이다.

• 리액트에서 setState메소드를 활용해야만 상태 변경이 가능하다
• 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.

3. 변경은 순수함수로 작성되어야한다.

• 변경은 순수함수로만 가능하다.
• 리듀서와 연관 되는 개념이다.
• store - action - reducer

redux 주요 용어

1. 스토어 (store)

애플리케이션의 상태를 관리하고, getState(), dispatch(), subscript 같은 메서드를제공한다.

2. 액션 (action)

액션은 애플리케이션에서 상태 변경을 설명하는 정보를 store 로 보내어 변화를 이끌어낸다.

const inCreaseCountAction = { type: "INCREASE_COUNT"}

3. 리듀서

애플리케이션 상태를 교체하는 함수 이전상태를 새로운 상태로 교체 한다.

리듀서는 상태와 액션을 전달 받아 새로운 상태 로 교체 반환한다. 주어진 상태를 수정하는 것이 아니라, 새로운 상태로 교체 하는 것이 중요 하다. 리듀서는 '순수 함수 ' 여야한다.

const reducer = (prev = init, action ){
    switch(aciton.type){
      case INCREASE_COUNT:
        return prev + 1
      case DECREASE_COUNT :
        return prev - 1
      default:
        return prev
    }
}

Redux 장점

• 순수함수를 사용하기 때문에 상태를 예측 가능하게 만든다.
• 유지보수에 좋다
• 디버깅에 유리 하다 (redux dev tool)
• 순수함수를 사용하기 때문에 테스트를 붙이기 용이하다.

참고 https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/ https://yamoo9.github.io/react-master/lecture/rd-redux.html