N8N & Zapier - setup

https://www.youtube.com/watch?v=ED2H_y6dmC8

06:05

 

- Environment
  - Node.js (min 18.18)

- Setup Next.js app
- Setup Shadcn/UI
- Create GitHub repository

 

 

1. Node 버전 확인 및 설정

• 프로젝트용 Node 버전: 22.20.0
• nvm을 사용해 버전 관리

nvm install 22.20.0

npm -v  //10.9.3
npx -v  //10.9.3

 

 

2. nextJs 설치

• Next.js 15.5.4
• App Router 기반 프로젝트 생성

npx create-next-app@15.5.4 nodebase_clone

 

 

 

3. Tailwind CSS IntelliSense 설치

• VS Code 확장 프로그램 Tailwind CSS IntelliSense 설치
• 클래스 자동완성, 미리보기, 오류 표시 용도

 

 

********
* Next.js App Router(app/page.tsx)에서는 페이지 컴포넌트를 반드시 default export로 내보내야한다.

• page.tsx → default export 필수
• layout.tsx → default export 필수
• loading.tsx, error.tsx, not-found.tsx → default export 필수

export const Page = () =>{      return(          <div className="text-red-500 font-extrabold">              Hello World          </div>      )  }

app/page.tsx에서는 React 컴포넌트를 반드시 export default로 내보내야 한다.
named export만 쓰면 Next.js가 페이지를 인식하지 못한다 ❌

********

 

 

4. Tailwind CSS 기본 적용 확인

const Page = () =>{
  return(
    <div className="text-red-500 font-extrabold">
      Hello World
    </div>
  )
}

export default Page

 

💫 Tailwind v3 vs v4 차이점

• Tailwind v3
  • 사용자가 content에 스캔 경로를 직접 지정해야 함
• Tailwind v4 + Next.js 15
  • Next.js를 자동 인식
  • 아래 폴더를 자동 스캔:
    • app/
    • pages/
    • components/
  • content 설정이 더 이상 필요 없음
  • 기본 설정에서 의도적으로 제거됨

 

 

 

5. shadCn 설치

• lib/utils.ts 생성
• cn 함수 추가
• clsx, tailwind-merge 패키지 설치

 npx shadcn@3.3.1 init

 

 

cn 함수란?

• className helper
• 조건부 Tailwind 클래스 정리용
• JSX를 깔끔하게 만들어줌

import { cn } from "@/lib/utils"

const Page = () =>{

  const somthing = true

  return(
    <div className={cn(
      "text-red-500 font-extrabold",
      somthing === true && "text-green-500 font-extrabold"
    )}>
      Hello World
    </div>
  )
}

export default Page

 

 

 

 

6. shadcn/ui 컴포넌트 추가

- 컴포넌트들이 src/components/ui 경로에 생성됨

npx shadcn@3.3.1 add --all

 

import { Button } from "@/components/ui/button"

const Page = () =>{
  return(
    <div className="min-h-screen min-w-screen flex items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}

export default Page

 

 

7. Create a new repository

git에 커밋해주기 :)

git remote add origin https:-----
git branch -M main
git push -u origin main