12장

[Do it! 실습] conventions.md 파일 만들기

01.

02.
.claude/skills/-convention-check/ 폴더를 만들고 그 안에 conventions.md 파일을 만들어 줘.

아래 내용으로 작성해 줘.

## 네이밍
- 변수명, 함수명: 카멜 케이스 (예: fetchNews, isLoading)
- 컴포넌트명: 파스칼 케이스 (예: NewsCard, Dashboard)
- 상수: UPPER_SNAKE_CASE (예: MAX_NEWS_COUNT)

## 포매팅
- 들여쓰기: 2칸
- 한 함수는 하나의 역할만 담당

## 코드 품질
- console.log는 커밋 전에 반드시 제거
- URL, 숫자 등 하드코딩된 값은 환경 변수로 분리 (예: process.env.API_URL)
- DB 조작 코드는 반드시 try-catch로 감싸기
- 오류 응답은 적절한 HTTP 상태 코드와 함께 반환 (예: 500, 404, 400)

03.

---

[Do it! 실습] SKILL.md 파일 만들기

01.
.claude/skills/convention-check/ 폴더 안에 SKILL.md 파일을 만들어 줘.

이 스킬은 커밋 전에 변경된 코드의 품질을 검토하는 스킬이야.

## 프론트매터:
- name: convention-check
- description: 커밋 전 변경된 코드를 검토한다. 코딩 컨벤션 준수 여부와 코드 품질을 점검한다.
- disable-model-invocation: true
- allowed-tools: Bash(git *)

##스킬 내용:

1. 현재 브랜치에서 변경된 코드를 가져온 후
   
2. conventions.md의 규칙을 기준으로 변경된 코드의 각 항목을 ‘통과’ 또는 ‘개선 필요’로 표시해 줘.
   
3. ‘개선 표시’ 항목이 있으면 어떻게 수정해야 하는지 코드 예시와 함께 알려 줘.
   
4. 모든 항목이 ‘통과’라면 ‘커밋 준비가 완료되었습니다!’를 출력해.
   

## 참조 파일
- 검토 기준: [conventions.md](conventions.md)

02.

---

[Do it! 실습] 뉴스 카드 삭제 기능 추가하기

01.
/news-workflow delete-news

02.
뉴스 카드에 삭제 버튼을 추가해 줘.
각 뉴스 카드 오른쪽 상단에 X 버튼을 만들고,
버튼을 누르면 해당 뉴스가 DB에서 삭제되고 화면에서도 사라지게 해 줘.

03.

---

[Do it! 실습] convention-check 스킬 사용하기

01.
/convention-check

02.

03.
개선이 필요한 항목을 수정해 줘.

04.
완료

05.
커밋해 줘.

06.