console.log(“JongHoon”)

댓글 기능 구현 중, 작성과 수정 시에 화면에 바로 적용이 될 때가 있고 새로고침해야 적용 될 때가 있어서낙관적 업데이트 적용해봤음 기존 mutation 코드 const addMutation = useMutation({ mutationFn: addComment, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['comments', postId] }); setTargetValue({ title: '', content: '' }); toast.success('작성 완료'); }, onError: () => { toast.error('작성중 오류 발생. 잠시 후 다시 시도해주세요'); ..

react-intersection-observer 라이브러리 / tanstack-query useInfiniteQuery사용, 무한스크롤 구현in Next.js (과제. https://github.com/jonghoon7431/next_first_assignment) https://taro156.tistory.com/115 react-intersection-observer(라이브러리.무한스크롤)https://github.com/thebuilder/react-intersection-observer GitHub - thebuilder/react-intersection-observer: React implementation of the Intersection Observer API to tell you whe..

https://github.com/thebuilder/react-intersection-observer GitHub - thebuilder/react-intersection-observer: React implementation of the Intersection Observer API to tell you when an elemeReact implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport. - thebuilder/react-intersection-observergithub.com 특정 요소가 사용자의 viewport(화면) 내에 들어오는지 감지Intersection..

페이지네이션 / 무한스크롤 등  사용 이유1. ux 향상 (성능, 속도 증가)2. 비용 ( 한번에 필요 이상의 데이터를 매번 제공해야할 경우 서버 측면 비용 증가) 페이지네이션 주요 요소- 페이지당 항목수(Item per Page)- 총 데이터 개수 (Total Count) : 서버 요청시에 알 수 있음- 전체 페이지 수 (Total Pages) : 페이지당 항목 수, 총 데이터로 계산- 페이지 번호 (Page Number) : 클릭에 따라 변경될 수 있는 값 =>상태로 관- 다음 / 이전 페이지 : 네비게이션 요소       포켓몬 도감 과제 페이지네이션 코드 const PokemonList = () => { const TOTAL_POKEMON: number = 151; const ITEMS_PER..

Access to XMLHttpRequest at '주소A' from origin '주소B' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.  동일 출처 정책 (same-origin policy/ sop)- 다른 origin 에서 요청한 것을 기본적으로 제한하여 위험을 방지하는 것 origin : url의  scheme, host, port-number 3가지로 판단   교차 출처 리소스 공유( Cross-Origin Resource Sharing, CORS)- same origin policy가 안전을 보장해주지만, 의도적으로 다른 리소스와 상호작용을 원..

import axios from "axios";const page = async ({ params }: { params: { id: string } }) => { const { id } = params; const response = axios.get(`https://pokeapi.co/api/v2/pokemon/${id}`); return page;};export default page; 서버 컴포넌트에서 params id 가져오기     AxiosResponse ?= > 첫번째가 data 의 타입    useState 활용, 리렌더링 방지"use client";import { QueryClient, QueryClientProvider } from "@tanstack/react-query";imp..

Next.js: React.js 기반으로 이루어진 *프레임워크  *프레임워크 : 개발자가 기능 구현에만 집중할 수 있게 모든 프로그래밍적 재원을 자원하는 '기술의  조합'- 라이브러리의 조합( Spring Framework , Vue.js, Angular.js, Django, Next.js 등) *라이브러리: 공통 기능의 "모듈화"가 이루어진 프로그램의 집합( React.js, react-router-dom, redux 등) => IoC(제어의 역전,Inversion of Control) : 프레임워크 사용 시, 제어의 흐름을 개발자가 아닌 프레임워크가 가지게 된다    Next.js 의 제공 기능- 다양한 렌더링 기법 (CSR, SST, SSG, ISR 등)- 라우팅 (파일(폴더) 기반 라우팅- rou..

map,filter의 콜백함수 자리의 인자에는 타입 지정을 따로 해주지 않는다=> 휴먼에러 발생 가능성 + 리뷰어의 입장에서 앞단에 타입 지정을 안해줬나 싶은 생각이 들게 할 수 있음  generic의 타입 조건 제약 걸기 (기본 사용법) (제약 조건 추가 - extends ) => 조건이 2개 이상일때에만 의미가 있다  타입 제약 조건을 객체로 했을 때(length를 가진 값만 들어오게 하기)    keyof: 객체 타입 키들을 문자열 리터럴 유니온 타입으로 변환type Person = { name: string; age: number; location: string;};type PersonKeys = keyof Person; // "name" | "age" | "location" function..

알고리즘 문제 - ticket pur chaseimport { useEffect, useState } from "react";const PURCHASE_OPEN_TIME = new Date(new Date().getTime() + 5 * 1000);const TicketPurchase = () => { const [currentTime, setCurrentTime] = useState(new Date()); const [isPurchaseAvailable, setIsPurchaseAvailable] = useState(false); /* 타이머 설정: 1초마다 현재 시간을 업데이트하는 setInterval을 설정합니다. 현재 시간 갱신: setInterval 콜백 함수 내에서 new Da..