프로그래밍 허브

1. ESLint란?

“코드 규칙의 경찰관”

• 코드에 문법 오류, 스타일 규칙 위반, 버그 가능성 등을 검사
• 미리 정한 규칙에 따라 경고/에러 표시
• 팀 프로젝트에서 일관된 코드 스타일 유지에 필수

✅ 비유

ESLint는 문서 작성 시 맞춤법 검사기와 같다.
틀린 글자를 빨간 줄로 알려주듯, 잘못된 코드를 실시간으로 지적해 준다!

✅ 예시 규칙

• no-unused-vars → 선언했는데 쓰지 않는 변수 잡아줌
• eqeqeq → == 대신 === 쓰라고 알려줌
• semi → 세미콜론 누락 감지

2. Prettier란?

“자동 정리 도구”

• 코드 스타일을 통일해 주는 툴
• 들여쓰기, 따옴표, 줄바꿈 등 코드 포맷팅 담당
• ESLint가 규칙 검사라면, Prettier는 형식을 “자동으로 고쳐주는” 역할

✅ 비유

Prettier는 엑셀의 자동 서식 정리처럼, 코드를 “예쁘고 깔끔하게” 정리해 준다.

✅ 사용 예

• 2칸 들여쓰기
• 탭 대신 스페이스
• 한 줄 길이 제한

✅ ESLint vs Prettier 차이

3. TypeScript 설정과 설명

“자바스크립트에 타입을 입혀 안정성을 높여주는 언어”

• JavaScript + 타입 시스템
• 변수, 함수, 객체에 타입 지정
• 런타임 에러를 컴파일 단계에서 미리 차단

✅ 비유

TypeScript는 자동차 보험과 같다.
사고가 나기 전에 대비해 두면, 나중에 큰 피해를 막을 수 있다!

✅ tsconfig.json 예시

json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

• strict → 엄격한 타입 체크
• baseUrl, paths → 경로 Alias 설정 가능
• esModuleInterop → CommonJS 모듈 호환

4. shadcn/ui란?

“Next.js 기반의 React UI 컴포넌트 라이브러리”

• shadcn/ui는 Next.js, TailwindCSS에 최적화된 UI 라이브러리
• 컴포넌트를 설치하면 코드 그대로 프로젝트에 카피되어 커스터마이즈가 매우 쉬움
• shadcn/ui는 라이브러리가 아니라 컴포넌트 소스를 직접 설치해 쓰는 점이 독특함

✅ 비유

shadcn/ui는 쿠킹 클래스 레시피 같다.
이미 완성된 음식을 사 먹는 게 아니라, 레시피를 직접 가져와 내 스타일대로 요리할 수 있다!

✅ 설치 방법

Next.js + TypeScript 프로젝트 기준

npx shadcn-ui@latest init

• 질문에 따라 Tailwind, Typescript 설정 여부를 선택

✅ 컴포넌트 설치 예

npx shadcn-ui@latest add button

• 결과
  • /components/ui/button.tsx 생성
  • Tailwind 스타일 + Radix UI 활용

✅ shadcn/ui의 장점

• 컴포넌트 소스 직접 커스텀 가능
• TailwindCSS 기반 → 스타일 일관성
• Radix UI 기반 → 접근성(a11y) 우수
• 디자인 시스템 구축에 유리

AI 증강 개발(AI-Augmented Development)이란 무엇인가요?

최근 개발 트렌드에서 빼놓을 수 없는 키워드가 바로 AI 증강 개발입니다.
이는 개발자와 AI가 협업하여 생산성과 코드 품질을 높이는 방식을 의미합니다.
즉, AI가 개발자를 대체하는 것이 아니라, 개발자가 더 창의적이고 고차원적인 문제 해결에 집중할 수 있도록 개발 과정을 보조해 주는 것이 핵심이에요.

AI 증강 개발의 주요 기능

1. 코드 생성 및 완성

• AI가 문맥을 이해해 적절한 코드를 제안
• 보일러플레이트 코드 자동 생성

2. 코드 리뷰 및 품질 향상

• 버그, 보안 취약점, 코드 스타일 검사
• 성능 개선 포인트 제안

3. 문서화 지원

• 주석 생성, API 문서 작성, 기술 문서 초안 작성

4. 디버깅 지원

• 에러 원인 분석, 해결책 제시, 로그 분석

5. 지식 관리

• 코드베이스 이해 돕기
• 관련 문서 및 자료 추천
• 팀 내 지식 공유 촉진

Cursor AI Notepad로 AI 증강 개발 가속화하기

Cursor AI가 제공하는 Notepad는 AI 증강 개발을 한층 효율적으로 만드는 도구예요.
Notepad는 Composer와 채팅 사이에서 컨텍스트를 공유하는 메모장 같은 존재입니다.

특히 개발자들이 자주 참조하는 규칙, 코드 템플릿, 문서 등을 한 곳에 정리해 두고 @ 멘션으로 불러올 수 있는 점이 매우 강력합니다.

Notepad의 활용 사례

✅ 동적 보일러플레이트 생성
→ API 핸들러, 컴포넌트 템플릿, 서비스 생성 규칙 등을 저장

✅ 아키텍처 문서화
→ 프론트/백엔드 구조, 데이터 모델 설계, 시스템 아키텍처 가이드라인 정리

✅ 코딩 가이드라인
→ 코딩 컨벤션, 네이밍 규칙, 커밋 메시지 규칙 등 공유

✅ 팀 규칙 관리
→ 코드 리뷰 절차, 배포 프로세스, 릴리즈 노트 규칙 정리

역할 기반 개발 프로세스

AI 증강 개발의 효과를 극대화하려면 역할 정의가 중요합니다.
아래는 Cursor AI Notepad의 문서 구조와 함께 정리된 대표 역할들입니다.

📝 기획자 (planner.md)

• 사용자 중심 기획
• 정보 구조, 기능 명세, 사용자 시나리오 설계
• PRD(제품 요구사항 정의서), 사용자 여정도, MVP Scope 작성

🖥️ 프론트엔드 개발자 (frontend-ui.md)

• UX/UI 중심 개발
• 반응형, 애니메이션, 디자인 시스템 구현
• 성능 최적화, 컴포넌트 재사용성 극대화

🛠️ 풀스택 개발자 (fullstack.md)

• Next.js, TypeScript, Notion API 기반 개발
• AI 도구를 활용한 개발 최적화
• 코드 품질 관리, 생산성 향상

🌐 번역가

• 공식 문서 번역
• 신속한 지식 습득 지원

각 역할별로 마크다운 문서로 정리해두면, 팀 내 지식 공유와 커뮤니케이션이 훨씬 원활해집니다.

PRD와 SRS, 그리고 MVP

AI 증강 개발은 문서화도 매우 중요합니다.

• PRD (Product Requirements Document)
  → 제품이 무엇인지, 누구를 위한 것인지, 왜 필요한지를 비즈니스 관점에서 설명
• SRS (Software Requirements Specification)
  → 제품을 어떻게 만들 것인지, 아키텍처와 기술 명세를 기술 관점에서 설명
• MVP (Minimum Viable Product)
  → 최소한의 기능만 담은 초기 제품으로, 핵심 가치를 검증하는 것이 목표

이러한 문서들이 Cursor AI Notepad에 정리되어 있으면 팀 전체의 이해도와 속도가 크게 높아집니다.

AI가 개발을 대체하는 시대는 아닙니다.
다만, AI는 개발자의 가장 든든한 비서이자 동료가 될 수 있습니다.

앞으로 AI와 함께 더 똑똑하고 빠르게 개발해보세요! 🚀

혹시 이 내용 중 더 자세히 알고 싶은 주제 있으신가요? 댓글로 알려주세요!