Node.js LTS

LTS = Long Term Support (장기 지원)

주요 특징

• 지원 기간: 30개월 (적극 지원 18개월 + 유지보수 12개월)
• 버전 번호: 짝수 (18, 20, 22...)
• 목적: 안정성, 보안 패치, 프로덕션 환경용

LTS vs Current

구분	LTS	Current
버전	짝수 (20.x, 22.x)	홀수 (21.x, 23.x)
용도	프로덕션	최신 기능 테스트
안정성	높음	낮음

결론

프로덕션 환경이나 중요한 프로젝트 → LTS 버전 사용 권장

리액트 앱 시작

npm create vite@6.5.0 onebite-exam

비트 번들러를 사용해 리액트 앱을 생성한다

1. tsconfig.app.json
   리액트 앱을 위한 코드들(브라우저환경을 위한)

2. tsconfig.node.json
   노드에서만 사용

3. tsconfig.json

   {
     "files": [],
     "references": [
       { "path": "./tsconfig.app.json" },
       { "path": "./tsconfig.node.json" }
     ]
   }

플러그인(Plugin)이란?

플러그인 = 기능을 추가하는 작은 프로그램

• 쉬운 비유

  본체(메인 프로그램) + 부품(플러그인)
  스마트폰 + 앱
  자동차 + 옵션 부품

• 특징

  선택적 설치: 필요한 것만 추가
  기능 확장: 기본 프로그램에 없는 기능 추가
  독립적: 설치/삭제가 자유로움

Shadcn-ui

1. 스와이퍼 기능

 <Carousel className="mx-10">
        <CarouselContent>
          <CarouselItem className="basis-1/3">1</CarouselItem>
          <CarouselItem className="basis-1/3">2</CarouselItem>
          <CarouselItem className="basis-1/3">3</CarouselItem>
          <CarouselItem className="basis-1/3">4</CarouselItem>
          <CarouselItem className="basis-1/3">5</CarouselItem>
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
      

2. 만약 하단 자식에게 해당 폼을 주고싶으면 asChild

        <PopoverTrigger asChild>
          <Button variant={"outline"}>버튼</Button>
        </PopoverTrigger>

3. 아이콘 사용하기

import { BowArrow } from "lucide-react";

라우터 설정하는 방법

1. <BrowserRouter> 앱 컴포넌트에 감싸기

2.<Routes><Route>

3. 공통 레이아웃 설정
   Outlet 컴포넌트로 페이지 내용 위치 설정
   =중첩된 라우트의 콘텐츠를 렌더링할 위치를 지정하는 컴포넌트