관리자 페이지같이 다수의 리스트가 있는 화면을 만들다 보면 경우에 따라 체크 박스를 통해 여러 리스트를 선택 후 해당 리스트들에게 특정 기능을 부여할 때가 있다.체크박스 전체 선택 / 해제 & 개별 선택thead에 있는 체크 박스 선택 시 리스트 전체 체크, 재 선택 시 전체 해제개별 선택 후에도 thead에 있는 체크 박스 선택 시 리스트 전체 체크import { useState } from "react";export default function Test() { const userDatas:any = []; for (var i = 1; i { if (checked) { setCheckItems((prev) => [...prev, id]); } else { setChe..

카테고리나 리스트 등 같은 영역에서 사용자의 집중도를 위해 다수 중 하나만 선택되어 영역이 보이거나 선택된 ui가 보여야 할 때가 있다. 리스트 선택 시 관련 정보 하나만 보이기선택 시 관련 content가 보이고 재 선택 시 닫기오픈 된 상태에서 다른 리스트 선택 시 기존 content닫히며 새 content보이기import { cls } from '@/utils/config';import { useState } from 'react';export default function List() { // 임시 데이터 const userDatas = []; for (var i = 1; i { if (countIndex === index) { setCountIndex(-1); } el..

Next.js 13에서 사용할 수있는 Server-Side Rendering (SSR) 에 대해 애기 해보고자 한다.글을 쓰게 된 이유는 Notion.api를 활용해서 블로그를 제작해봤는데 api를 불러올때 브라우저를 통하면  CORS 에러가 나 해결방안으로 SSR을 사용했기 때문이다.  CORS 에러CORS(Cross-Origin Resource Sharing) 에러는 클라이언트에서 다른 도메인에 요청을 보낼 때 발생할 수 있습니다. 이 에러는 보안상의 이유로 브라우저가 동일 출처 정책(Same-Origin Policy)을 적용하기 때문입니다.관련 글 : https://minsun309.tistory.com/entry/CORS-%EC%97%90%EB%9F%AC Notion APICORS 에러에 대한 해..