프로그래밍 허브

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) 우수
• 디자인 시스템 구축에 유리