새로운 Cline 사용자를 위한 권장 스택 (2025)

완벽한 개발 환경

개발 도구

프런트엔드

  • Next.js 14+ - 앱 라우터가 있는 React 프레임워크
  • Tailwind CSS - CSS를 작성하지 않고도 아름다운 스타일링
  • TypeScript - JavaScript이지만 더 안전하고 스마트합니다.

백엔드

  • Supabase - 완벽한 백엔드 솔루션, GitHub로 가입
    • PostgreSQL 데이터베이스
    • 인증
    • 파일 저장소
    • 실시간 업데이트

배포

  • Vercel - 앱이 실행되는 곳, GitHub로 가입
    • GitHub에서 자동 배포
    • 테스트를 위한 미리 보기 배포
    • 프로덕션 준비 CDN

AI 개발

필요에 따라 AI 어시스턴트를 선택하십시오.
모델입력 비용(1M 토큰당)출력 비용(1M 토큰당)최적 용도
Claude 3.5 Sonnet$3.00$15.00프로덕션 앱, 복잡한 작업
DeepSeek R1$1.00$3.00예산에 민감한 프로덕션
DeepSeek V3$0.14$2.20예산에 민감한 개발

무료 등급 혜택

Vercel (취미)
  • 월 100GB 데이터 전송
  • 10만 서버리스 함수 호출
  • 100MB 배포 크기
  • 자동 HTTPS 및 CI/CD
Supabase (무료)
  • 500MB 데이터베이스 저장 공간
  • 1GB 파일 저장 공간
  • 월 5만 활성 사용자
  • 월 2백만 실시간 메시지
GitHub (무료)
  • 무제한 공용 리포지토리
  • GitHub Actions CI/CD
  • 프로젝트 관리 도구
  • 공동 작업 기능

시작하기

  1. 개발 필수 요소 설치:
  2. Cline의 메모리 뱅크 설정:
    • 메모리 뱅크 설정 지침을 따르십시오.
    • 프로젝트 루트에 빈 cline_docs 폴더를 만듭니다.
    • cline_docs 폴더에 projectBrief.md를 만듭니다(아래 예 참조).
    • Cline에게 “메모리 뱅크 초기화”라고 말합니다.
  3. 권장 스택 구성 추가:
    • .clinerules 파일을 만듭니다(아래 템플릿 참조).
    • 나머지는 Cline이 처리하도록 합니다!

예제 프로젝트 개요

# 프로젝트 개요

## 개요

[주요 목적]을 수행할 [애플리케이션 유형]을 구축합니다.

## 핵심 기능

-   기능 1
-   기능 2
-   기능 3

## 대상 사용자

[애플리케이션을 사용할 사람을 설명하십시오]

## 기술적 선호도 (선택 사항)

-   사용하고 싶은 특정 기술
-   특정 요구 사항 또는 제약 조건

.clinerules 템플릿

# 프로젝트 구성

## 기술 스택

-   앱 라우터가 있는 Next.js 14+
-   스타일링을 위한 Tailwind CSS
-   백엔드를 위한 Supabase
-   배포를 위한 Vercel
-   버전 제어를 위한 GitHub

## 프로젝트 구조

/src
/app # Next.js 앱 라우터 페이지
/components # React 구성 요소
/lib # 유틸리티 함수
/types # TypeScript 유형
/supabase
/migrations # SQL 마이그레이션 파일
/seed # 시드 데이터 파일
/public # 정적 자산

## 데이터베이스 마이그레이션

/supabase/migrations의 SQL 파일은 다음을 수행해야 합니다.

-   순차적 번호 매기기 사용: 001, 002 등
-   설명적인 이름 포함
-   실행 전에 Cline에서 검토
    예: 001_create_users_table.sql

## 개발 워크플로

-   Cline은 코드 변경 사항 작성 및 검토를 돕습니다.
-   Vercel은 기본 브랜치에서 자동으로 배포합니다.
-   데이터베이스 마이그레이션은 실행 전에 Cline에서 검토합니다.

## 보안

다음을 읽거나 수정하지 마십시오.

-   .env 파일
-   \*_/config/secrets._
-   API 키 또는 자격 증명이 포함된 모든 파일

학습 자료 (2025)

우리가 사용하는 기술에 대해 더 자세히 알고 싶으십니까? 다음은 훌륭한 자료입니다.

Next.js 및 React

Supabase

Tailwind CSS

기타 알아야 할 사항

Git 및 GitHub 작업

Git은 코드 변경 사항을 추적하고 다른 사람과 공동 작업하는 데 도움이 됩니다. 다음은 사용할 필수 명령어입니다. 일상적인 개발
# 변경 사항 저장 (자주 수행!)
git add .                                    # 변경된 모든 파일 스테이징
git commit -m "로그인 페이지 추가"              # 명확한 메시지와 함께 변경 사항 저장

# 변경 사항 공유
git push origin main                        # GitHub에 업로드
일반적인 워크플로
  1. 하루 시작: 최신 변경 사항 가져오기
    git pull origin main                     # 최신 코드 다운로드
    
  2. 개발 중: 작업 정기적으로 저장
    git add .
    git commit -m "변경 사항에 대한 명확한 메시지"
    
  3. 하루 종료: 진행 상황 공유
    git push origin main                     # GitHub에 업로드
    
모범 사례
  • 명확한 메시지와 함께 자주 커밋합니다.
  • 새 작업을 시작하기 전에 풀합니다.
  • 완료된 작업을 푸시하여 다른 사람과 공유합니다.
  • 민감한 파일을 커밋하지 않도록 .gitignore를 사용합니다.
: Vercel은 기본 브랜치에 푸시하면 자동으로 배포합니다!

환경 변수

  • 개발을 위해 .env.local에 비밀을 저장합니다.
  • 프로덕션을 위해 Vercel 프로젝트 설정에 추가합니다.
  • .env 파일을 Git에 절대 커밋하지 마십시오.

도움 받기

  1. 즉각적인 지원을 받으려면 Cline 채팅에서 /help를 사용하십시오.
  2. Cline 설명서를 확인하십시오.
  3. Discord 커뮤니티에 참여하십시오.
  4. 일반적인 문제에 대해 GitHub 문제를 검색하십시오.
기억하십시오: Cline은 모든 단계에서 도움을 주기 위해 여기에 있습니다. 필요할 때 안내나 설명을 요청하십시오!