1.3.2 camelCase - 낙타 등처럼 이름 짓기

📘 1.3.2 camelCase - 낙타 등처럼 이름 짓기

안녕하세요! 이전 시간에 좋은 변수 이름의 중요성에 대해 함께 배웠어요. 의미있는 이름을 붙이는 것이 얼마나 소중한지 깨달으셨을 거예요.

하지만 때로는 하나의 변수로 표현하고 싶은 의미가 여러 단어로 이루어진 경우가 있어요. 예를 들어 "학생의 이름", "수학 시험 점수", "숙제 완료 상태" 같은 복잡한 개념들을 어떻게 하나의 이름으로 만들 수 있을까요?

자바스크립트에서는 이런 상황을 위해 camelCase라는 특별한 이름 만들기 방법을 사용해요. 이 방법은 정말 신기한데, 낙타의 등처럼 생겼다고 해서 이런 이름이 붙었어요!

🧠 새로운 단어들과 친해지기

camelCase와 관련된 다양한 이름 만들기 방식들을 살펴볼게요.

단어	쉬운 설명
camelCase	이름을 낙타의 등 모양처럼 첫 글자는 소문자, 뒤의 단어들은 대문자로 시작하는 방식이에요
PascalCase	모든 단어의 첫 글자를 대문자로 쓰는 방식이에요
snake_case	단어 사이에 밑줄(_)을 넣는 방식이에요
kebab-case	단어 사이에 하이픈(-)을 넣는 방식이에요

camelCase는 낙타의 등처럼 생겼다고 해서 붙여진 이름이에요! myFavoriteFruit처럼 첫 단어는 소문자, 나머지는 대문자로 시작하는 모양이 낙타의 등과 닮았어요.

✨ camelCase가 뭔지 알아보기

camelCase는 자바스크립트 프로그래밍에서 가장 많이 사용되는 이름 만들기 방식이에요.

camelCase의 가장 소중한 특징은 첫 단어는 소문자로, 뒤따르는 단어들은 대문자로 시작한다는 거예요. 예를 들어 "내가 좋아하는 음식"이라는 의미를 나타내고 싶다면 myFavoriteFood와 같이 작성해요. 이때 my는 소문자로, Favorite과 Food는 대문자로 시작하죠.

이 방식의 가장 큰 장점은 띄어쓰기 대신 대문자로 단어를 구분하여 읽기 쉽게 만들어준다는 거예요. 자바스크립트에서는 변수 이름에 공백을 사용할 수 없기 때문에, camelCase는 여러 단어를 하나로 연결하면서도 각 단어를 명확히 구분할 수 있는 완벽한 해결책이에요.

재미있는 비유: 낙타 등에 올라타기

camelCase를 더 쉽게 이해하기 위해 낙타 등에 올라타기 이야기를 해볼게요.

동물원에 특별한 낙타가 있어요. 이 낙타는 단어들을 등에 태우고 다니는 신기한 일을 해요!

하지만 이 낙타에게는 따뜻한 규칙이 있어요. 첫 번째 단어는 겸손하게 낮은 자세로 앉아야 하고(소문자), 두 번째 단어부터는 자신감 있게 높은 자세로 서야 해요(대문자로 시작).

예를 들어 "내 가장 좋아하는 동물"이라는 문장을 낙타 등에 태운다면 어떻게 될까요?

🐪 my (겸손하게 낮은 자세) + Favorite (자신감 있게 높은 자세) + Animal (자신감 있게 높은 자세) = myFavoriteAnimal

사람들은 낙타의 등 모양만 봐도 단어들을 쉽게 구분할 수 있어요! "아, 세 개의 단어구나!" 하고 바로 알 수 있죠.

🎯 왜 camelCase를 사용할까요?

여러분이 궁금해할 거예요. "왜 이런 방법을 써야 하나요?"

첫 번째 이유는 읽기 쉬운 코드를 만들 수 있어요. 여러 단어를 하나로 붙여도 대문자를 통해 구분이 명확하게 돼요. myfavoritefood보다는 myFavoriteFood가 훨씬 읽기 쉽죠.

두 번째로는 자바스크립트 표준을 따르는 거예요. 전 세계 대부분의 자바스크립트 코드에서 관례로 사용되고 있어서, 이 방식을 따르면 다른 개발자들이 여러분의 코드를 쉽게 이해할 수 있어요.

세 번째로는 친구들과 함께 작업하기가 정말 쉬워져요. 친구들과 같은 방식으로 이름을 만들면 소통이 원활해지고, 코드를 확인하거나 고치는 일이 훨씬 쉬워져요.

⚙️ camelCase 규칙 알아보기

camelCase의 정확한 규칙과 다른 이름 만들기 방식들과의 차이점을 살펴볼게요.

camelCase 규칙:

// ✅ 올바른 camelCase
let studentName = "철수";           // 학생 이름
let mathTestScore = 95;            // 수학 시험 점수  
let isHomeworkFinished = true;     // 숙제 완료 여부
let favoriteFoodList = ["피자"];   // 좋아하는 음식 목록

다른 표기법들 (참고용):

// PascalCase (주로 특별한 이름에 사용해요)
let StudentInfo = "정보";

// snake_case (자바스크립트에서는 잘 안 써요)  
let student_name = "철수";

// kebab-case (이름으로 사용 불가예요!)
// let student-name = "철수";  // 에러가 나요!

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: camelCase로 의미 있는 이름 만들어보자

학생 정보를 camelCase를 사용하여 체계적으로 표현해보겠어요.

// camelCase로 학생 정보 이름들 만들기
let firstName = "김";              // 성 (첫 번째 이름)
let lastName = "민수";             // 이름 (마지막 이름)  
let currentAge = 12;              // 현재 나이
let favoriteSubject = "과학";      // 좋아하는 과목
let bestFriendName = "지수";       // 가장 친한 친구 이름

// 이름들 사용해보기
console.log("전체 이름:", firstName + lastName);    // "김민수"
console.log("현재 나이:", currentAge);              // 12  
console.log("좋아하는 과목:", favoriteSubject);     // "과학"
console.log("가장 친한 친구:", bestFriendName);     // "지수"

// 문장으로 만들어보기
let introduction = firstName + lastName + "는 " + currentAge + "살이고, " + favoriteSubject + "을 좋아해요.";
console.log(introduction); // "김민수는 12살이고, 과학을 좋아해요."

🔹 두 번째 예시: 잘못된 방법과 올바른 camelCase 비교해보자

다양한 잘못된 방법들과 올바른 camelCase를 비교하여 차이점을 명확히 이해해보겠어요.

// ❌ 잘못된 방식들
let My_Favorite_Color = "파랑";     // 대문자와 밑줄 섞임 (일관성이 없어요)
let myfavoritecolor = "파랑";       // 모두 소문자 (읽기 어려워요)
let MyFavoriteColor = "파랑";       // PascalCase (변수 이름으로는 부적절해요)
// let my-favorite-color = "파랑";  // kebab-case (에러가 발생해요!)

// ✅ 올바른 camelCase 방식
let myFavoriteColor = "파랑";       // 완벽한 camelCase!
let todayWeather = "맑음";          // 오늘 날씨
let mathHomeworkCount = 5;          // 수학 숙제 개수
let isWeekendFun = true;           // 주말이 재미있는지

// 사용해보기
console.log("내가 좋아하는 색:", myFavoriteColor);
console.log("오늘 날씨:", todayWeather);
console.log("수학 숙제 개수:", mathHomeworkCount);
console.log("주말이 재미있나요?", isWeekendFun);

🔹 세 번째 예시: 복잡한 의미도 camelCase로 표현해보자

복잡한 의미들을 camelCase로 어떻게 깔끔하게 표현할 수 있는지 알아보겠어요.

// 복잡한 의미를 camelCase로 표현하기
let currentMathTestMaxScore = 100;               // 현재 수학 시험 최고 점수
let nextWeekScienceProjectDeadline = "금요일";   // 다음 주 과학 프로젝트 마감일  
let isAfterSchoolSoccerClubMember = true;       // 방과후 축구 동아리 회원인지
let todayLunchMenuSpecialDish = "김치찌개";      // 오늘 점심 메뉴 특별 요리

// 길어도 의미가 명확해요!
console.log("수학 시험 만점:", currentMathTestMaxScore);
console.log("과학 프로젝트 마감:", nextWeekScienceProjectDeadline);
console.log("축구 동아리 가입:", isAfterSchoolSoccerClubMember);
console.log("오늘 특별 메뉴:", todayLunchMenuSpecialDish);

// 적당히 줄여서 쓸 수도 있어요 (의미만 명확하면!)
let mathMaxScore = 100;              // 수학 최고 점수
let scienceDeadline = "금요일";       // 과학 마감일
let isSoccerMember = true;           // 축구 동아리 회원인지
let todaySpecialMenu = "김치찌개";    // 오늘 특별 메뉴

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: 첫 단어도 대문자로 시작하기 (PascalCase와 혼동)

// ❌ 이렇게 하면 안 돼요
let MyAge = 12;          // 이건 PascalCase예요

// ✅ 이렇게 해야 해요
let myAge = 12;          // 이게 올바른 camelCase예요

❌ 실수 2: 모든 글자를 소문자로 쓰기

// ❌ 이렇게 하면 안 돼요
let myfavoritefood = "피자";     // 단어 구분이 안 돼요

// ✅ 이렇게 해야 해요
let myFavoriteFood = "피자";     // 단어가 명확히 구분돼요

❌ 실수 3: 다른 방법과 섞어서 사용하기

// ❌ 이렇게 하면 안 돼요
let my_favoriteColor = "빨강";   // camelCase와 snake_case 섞임
// let my-favorite-color = "빨강";  // 하이픈은 사용 불가

// ✅ 이렇게 해야 해요
let myFavoriteColor = "빨강";    // 순수한 camelCase

📦 기본 연습문제

이제 배운 내용을 손으로 직접 써보면서 camelCase와 친해져보세요. 천천히, 마음 편하게 연습해보면 돼요.

연습문제 1: 다음 의미를 camelCase로 변환해보자

// "학생 번호" → studentNumber
let studentNumber = 20241205;

// "좋아하는 음식" → favoriteFood  
let favoriteFood = "치킨";

// "오늘 날씨" → todayWeather
let todayWeather = "흐림";

// 만든 이름들을 사용해보기
console.log("학생 번호:", studentNumber);
console.log("좋아하는 음식:", favoriteFood);
console.log("오늘 날씨:", todayWeather);

연습문제 2: 잘못된 이름을 올바른 camelCase로 고쳐보자

// 잘못된 것들
// let My_Name = "지수";     // PascalCase + snake_case 섞임
// let currenttime = "3시";  // 모두 소문자
// let is_student = true;   // snake_case

// 올바른 camelCase로 수정
let myName = "지수";         // 첫 단어는 소문자
let currentTime = "3시";     // 두 번째 단어부터 대문자
let isStudent = true;        // 참/거짓 질문은 is로 시작

console.log("내 이름:", myName);
console.log("현재 시간:", currentTime);
console.log("학생인가요?", isStudent);

연습문제 3: 복잡한 의미를 camelCase로 만들어보자

// "가장 좋아하는 과목의 선생님 이름"
let favoriteSubjectTeacherName = "김선생님";

// "다음 주 수학 시험 날짜"  
let nextWeekMathTestDate = "화요일";

// "방과후 동아리 활동 참여 여부"
let afterSchoolClubParticipation = true;

// 복잡한 의미도 camelCase로 명확하게 표현할 수 있어요
console.log("좋아하는 과목 선생님:", favoriteSubjectTeacherName);
console.log("다음 주 수학 시험:", nextWeekMathTestDate);
console.log("동아리 참여:", afterSchoolClubParticipation);

🤔 연습문제

차 한 잔 놓고 여유롭게 생각해보면서 camelCase에 대한 이해를 확인해볼게요.

문제 1: 다음 중 올바른 camelCase는?

A) MyFavoriteGame
B) myfavoritegame
C) myFavoriteGame
D) my_favorite_game

정답: C) myFavoriteGame

이유: camelCase는 첫 단어는 소문자, 나머지 단어들은 첫 글자만 대문자로 시작해야 해요.

문제 2: "현재 학년"을 camelCase로 쓰면?

정답: currentGrade

이유: "현재"는 current (소문자), "학년"은 Grade (첫 글자 대문자)로 조합해서 만들어요.

문제 3: 다음 의미를 camelCase로 변환해보세요: "우리 반 학생 수"

정답: ourClassStudentCount

이유: "우리"는 our, "반"은 Class, "학생"은 Student, "수"는 Count로 조화롭게 조합해서 만들어요.

💡 심화 문제

심화문제 1: camelCase의 규칙 3가지

camelCase의 규칙을 써보세요.

정답: 1) 첫 번째 단어는 모두 소문자, 2) 두 번째 단어부터는 첫 글자만 대문자, 3) 단어 사이에는 공백이나 특수문자 없이 붙여쓰기

심화문제 2: PascalCase와 camelCase의 차이점

정답: PascalCase는 모든 단어의 첫 글자가 대문자 (예: MyName), camelCase는 첫 번째 단어만 소문자 (예: myName)

심화문제 3: 왜 자바스크립트에서 camelCase를 사용할까요?

정답: 1) 자바스크립트 개발자들 사이의 표준 관례이기 때문, 2) 하이픈(-)은 빼기 연산자로 인식되고 밑줄(_)보다 읽기 쉽기 때문

✅ 소단원 정리

이 단원에서 배운 내용들을 확인해볼게요!

체크 항목	확인
camelCase가 무엇인지 알아요	☐
camelCase 규칙을 알아요	☐
여러 단어를 camelCase로 만들 수 있어요	☐
다른 표기법과의 차이를 알아요	☐
자주하는 실수들을 피할 수 있어요	☐

지금까지 camelCase에 대해 차분히 알아봤어요. 이 이름 만들기 방식은 자바스크립트 프로그래밍에서 매우 중요한 관례예요. 계속 사용하다 보면 자연스럽게 익숙해질 거예요!

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---