1. Next 프로젝트 생성npm install -g create-next-app npx create-next-app@latest --typescript npm run dev 2. jest 설치npm install --save-dev jest @types/jest ts-jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom 2-1. jest.config.ts 파일 생성 및 내용 추가// jest.config.tsimport nextJest from 'next/jest';const createJestConfig = nextJest({ dir: './', // Next.js 프로젝트..

1. 도커 공식 홈페이지 접속 Docker: Accelerated Container Application DevelopmentDocker is a platform designed to help developers build, share, and run container applications. We handle the tedious setup, so you can focus on the code.www.docker.com 2. 다운로드 [Download Docker Desktop] -> [Download for Windows - AMD64] * AMD : 64비트 아키텍쳐(인텔) / 일반적인 데스크탑 & 노트북 * ARM : 주로 모바일기기, 임베디드 시스템, 서버, 클라우드 컴퓨팅에 사용 3. 다..

1. ContentLayout.tsximport LeftContent from '../LeftContent';import RightContent from '../RightContent';function ContentLayout() { return ( );}export default ContentLayout;  2. RightContent.tsximport React from 'react';import Chart from './chart/Chart';function RightContent() { return ( );..

1.TabContents.tsximport { useLocation, useNavigate } from 'react-router-dom';import BreadCrumb from './BreadCrumb';import { useRecoilState } from 'recoil';import { selectedDataAtom } from './store/selectedData';import Filter from './components/filter/Filter';import { useState } from 'react';function TabContents() { const [selectedData, setSelectedData] = useRecoilState(selectedDataAtom); c..

00. BreadCrumb.tsximport { useLocation, Link } from 'react-router-dom';function BreadCrumb() { const location = useLocation(); const { pathname, search } = location; const pathSegments = pathname.split('/').filter((segment) => segment); const searchSegments = search .replace('?', '') .split('&') .filter((segment) => segment); return ( ..

useState와 이벤트 리스너를 활용한 커서 기반 사이즈 조절 기능 구현함 import { useEffect, useState } from 'react';import './App.css';import LeftContent from './components/LeftContent';import RightContent from './components/RightContent';import './index.css';import { checkPrimeSync } from 'crypto';import { AnySoaRecord } from 'dns';function App() { const [width, setWidth] = useState(200); const [isDragging, setIsDrag..