Step 2: 함수 네이밍

함수는 동사로 시작한다 🏃

🎯 핵심 규칙

함수 = 동작 = 동사로 시작 🏃

함수는 "무언가를 한다"
→ 이름도 "무엇을 하는지" 동사로 시작

💾 CRUD 패턴

데이터를 다루는 4가지 기본 동작 (Create, Read, Update, Delete)

Create - 생성

createUser()
addTodo()

Read - 읽기

getUser()
fetchTodoList()

Update - 수정

updateUser()
editTodo()

Delete - 삭제

deleteUser()
removeTodo()

💡 CRUD는 모든 앱의 기본! 게시판, SNS, 쇼핑몰 모두 CRUD로 이루어져 있음

📌 CRUD 동사 조합 참고표

Create

create, add, insert, new, register

Read

get, fetch, load, find, read

Update

update, edit, set, modify, change

Delete

delete, remove, clear, destroy

💡 팀마다 선호하는 조합이 다름 (예: get/set/add/delete 또는 fetch/update/create/remove)

📚 자주 쓰는 동사

get - 가져오기

getUserName()
getInputValue()

set - 설정하기

setUserName()
setInputValue()

calculate - 계산하기

calculateTotal()
calculateAverage()

check - 확인하기

checkIsValid()
checkIsEmpty()

update - 업데이트하기

updateDisplay()
updateCounter()

create - 만들기

createElement()
createUser()

delete - 삭제하기

deleteItem()
deleteUser()

show/hide - 보이기/숨기기

showModal()
hideMenu()

❌ 나쁜 예시 (동사 없음)

function total() { /* 계산? 반환? 출력? */ }
function user() { /* 가져오기? 만들기? 삭제? */ }
function display() { /* 무엇을? 어떻게? */ }

🤔 문제점:

함수 이름만 보고는 무엇을 하는지 알 수 없음

✅ 좋은 예시 (동사로 시작)

function calculateTotal() { /* 계산 */ }
function getCurrentUser() { /* 가져오기 */ }
function updateDisplay() { /* 업데이트 */ }

✨ 개선점:

함수 이름만 보고도 무엇을 하는지 명확!

💡 추가 팁: 한 가지 일만

❌ 나쁜 예시: 너무 많은 일

function getUserAndUpdateDisplayAndSendEmail() {
  // 함수 하나가 3가지 일을 함!
  const user = getUser();
  updateDisplay(user);
  sendEmail(user);
}

✅ 좋은 예시: 한 가지 일

function processUserLogin() {
  const user = getUser();
  updateDisplay(user);
  sendWelcomeEmail(user);
}

function getUser() { /* ... */ }
function updateDisplay(user) { /* ... */ }
function sendWelcomeEmail(user) { /* ... */ }

✨ 원칙

함수 하나 = 한 가지 일
이름이 너무 길어진다면, 너무 많은 일을 하는 것!

🎓 상급자 참고: 예외 케이스

대부분의 함수는 동사로 시작하지만, 특수한 경우 예외도 있음

1. 이벤트 핸들러 (on~)

onClick(), onSubmit(), onMouseEnter()

→ React, Vue 등에서 자주 사용

2. 익명 함수 / 화살표 함수

btn.addEventListener("click", () => { /* ... */ })

→ 이름이 없으므로 예외

3. React 컴포넌트

UserProfile(), TodoList(), Header() (PascalCase)

→ React 함수 컴포넌트 (명사로 작성)

4. 생성자 함수

User(), Product() (PascalCase)

→ 클래스처럼 사용되는 함수

5. 유틸리티 함수 (드물게)

$() (jQuery), router()

→ 라이브러리의 관례

⚠️ 초보자는 "동사로 시작" 원칙을 따르는 것이 안전!

🏃 실습

아래 함수들에 더 좋은 이름을 붙여보세요:

1. function name() { return "홍길동"; }

2. function display() { element.textContent = count; }

3. function total(a, b) { return a + b; }

4. function valid(email) { return email.includes("@"); }

5. function number() { count = count + 1; }

💡 정답 보기

1. getUserName() 또는 getName()

2. updateDisplay() 또는 updateCounter()

3. calculateSum() 또는 addNumbers()

4. checkIsValidEmail() 또는 validateEmail()

5. incrementCount() 또는 increaseCounter()

📌 핵심 정리

함수는 동사로 시작
자주 쓰는 동사: get, set, calculate, check, update, create, delete
함수 하나는 한 가지 일만
이름이 너무 길다면 쪼개기

← 이전: Step 1 다음: Step 3 (변수 네이밍) →