코딩 컨벤션이란? (feat. 케이스 스타일)

 

 

 

안녕하세요 웹 YB 김시연입니다😀

세미나를 열심히 듣고 복습하던 중 '컨벤션'이 뭐지? 하고 찾아보다가

이후 협업 시에도 필요할테니 정리해보면 좋을 것 같아서 이번 공유 아티클 주제로 선정하게 되었습니다.

(뭔지도 잘 몰라서.. 이번에 빠삭 정리해보겠습니다!!!)

 

 

프로그래밍을 하다 보면 변수, 함수, 클래스 이름을 지을 때 다양한 규칙을 따르고는 하는데

이런 규칙들은 코드의 가독성을 높이고 팀 내에서 또는 개인 프로젝트에서 일관성을 유지하기 위해 중요하다고 한다.

먼저 코딩 컨벤션에 대해 정리하기 전에 케이스 스타일이 뭔지부터 짚고 넘어가면 좋을 것 같다.

 

🔎 케이스 스타일(Case Style)이란?

• 변수명, 함수명, 파일명 등에 사용하는 작명 규칙이다.

이름	예시	주로 사용하는 곳
카멜 케이스 (camelCase)	myVariableName	JavaScript 변수, 함수명
파스칼 케이스 (PascalCase)	MyComponent	React 컴포넌트명, 클래스명
스네이크 케이스 (snake_case)	my_variable_name	파이썬 변수명, 일부 JSON 키 등
케밥 케이스 (kebab-case)	my-variable-name	파일명, URL, CSS 클래스명 등

 

한 가지씩 조금 더 구체적으로 설명해보자면,

 

카멜 케이스 (Camel Case)

: 소문자로 시작, 단어 구분은 대문자

• 낙타(Camel) 케이스라고 기억할 수 있음! 🐫낙타의 등처럼 중간중간 높이가 솟은 모습을 하고 있어서 이런 명칭이라고 한다. 
• 여러 단어를 조합하는 경우 읽기 쉽고 명확한 식별자를 만들어 주기 때문에 단어 간 구분이 명확해지고, 식별자의 길이가 길어져도 가독성이 좋아진다.
• 주로 자바, 자바스크립트 같은 언어에서 변수나 함수의 이름을 지을 때 많이 사용된다.

// 예시
userName
handleClick

 

 

파스칼 케이스 (Pascal Case)

: 단어마다 대문자 시작

• 카멜 케이스와 유사하지만, 첫 단어의 첫 글자도 대문자로 시작하는 게 차이점!
• 클래스와 타입의 이름이 명확하게 드러나며, 다른 식별자와 구분하기 쉽다.
• 주로 클래스나 인터페이스의 이름을 지을 대 사용되며 C#, Java 같은 언어에서 널리 사용되는 규칙이다.
• 리액트 컴포넌트 정의할 때도 무조건 대문자로 시작해야 하기 때문에 파스칼 케이스를 사용!

// 예시
UserProfile
MainPage

 

 

 

 

스네이크 케이스 (Snake Case)

: 모든 단어를 소문자로 하고, '_' 로 연결 (뱀이 기어가는 걸 떠올리자 ㅋ.ㅋ 🐍)

• 단어 사이를 언더스코어(_)로 연결하는 방식이다.
• 파이썬에서 변수나 함수의 이름을 지을 대 특히 선호되는 방식으로, 코드의 가독성을 높이는 데 효과적인 방식 중 하나이다.

// 예시
user_name
my_number

 

 

여기서 잠깐!

상수(Constants) 네이밍에 쓰이는 표기법도 스네이크 케이스라고 할 수 있을까?
이런 건 어퍼 케이스(Upper Case) or 어퍼 스네이크 케이스(Upper Snake Case)라고 불리운다고 한다.

// 예시
MAX_WIDTH​
STUDENT_NUMBER

 

케밥 케이스 (Kebab Case)

: 모든 단어를 소문자로 하고, '-' 로 연결 (마치 케밥이 꼬챙이에 꽂힌 모습같죠? 🍢)

• 단어 사이를 하이픈(-)으로 연결하는 방식이다. (스네이크 케이스와 사용하는 기호만 다름!)
• HTML이나 CSS에서 클래스나 ID를 지정할 때 주로 사용된다. 다만 대부분의 프로그래밍 언어에서는 변수나 함수 이름에 하이픈을 사용할 수 없기 때문에, 코드 내에서 케밥 케이스는 사용하는 건 제한적이라고 한다.

// 예시
user-name
student-id

 

 

 

 

 

📜 코딩 컨벤션(Coding Convention)이란?

• 코딩 컨벤션은 코드를 작성할 때 지켜야 할 규칙이나 스타일 가이드를 말한다.
• 개발자들은 서로 다른 코딩 스타일을 가지고 있기 때문에 협업 시에는 일정한 규칙을 정해놓았을 때 코드가 깔끔해지고, 일관성 있는 코드를 유지할 수 있다!

ex) 들여쓰기를 2칸으로 할지, 4칸으로 할지
변수명은 어떤 규칙으로 지을지 (카멜 케이스? 스네이크 케이스?)
파일명은 소문자로만? 대문자 포함?
함수 하나가 얼마나 길어야 하는지
주석은 어떻게 쓸지

 

출처: https://ko.javascript.info/coding-style

 

특히 자바스크립트는 언어 특성상 다른 언어에 비해 유연한 구조를 가지고 있기 때문에 개발자간 코드의 의도를 파악하기 어려워질 수 있다고 한다.

(참고한 문서에서 어떤 분은 본인이 작성한 코드도 몇 달만에 보면 이해되지 않을 때가 많아서 개인 프로젝트를 진행할 때도 코딩 컨벤션을 정하고 시작하신다고 한다..!)

 

 

3주차에 리액트 내용을 배웠기 때문에 React에서의 코딩 컨벤션을 조금 알아보았다.

React는 JavaScript와 JSX를 함께 쓰기 때문에 일반적인 JS 컨벤션 + React 만의 규칙이 있다고 한다.

모두가 같은 걸 사용하는 건 아니지만 자주, 많이 사용되는 걸 정리해보았다!!!

*사실 필자는 아직 리액트를 잘 몰라서... 참고 문서들을 보며 거의 그대로 가져온 수준이지만,,,, 나중에 나만의 컨벤션을 만들 수 있길ㅎㅎ..

 

변수, 함수, 컴포넌트명 

용도	규칙	예시
변수/함수명	camelCase	handleClick, userList
컴포넌트 이름	PascalCase	UserCard, TodoList
파일 이름	PascalCase 또는 kebab-case	UserCard.jsx or user-card.jsx
CSS 클래스 이름	kebab-case	.nav-bar, .main-section

 

 

🪄 ESLint, Prettier 사용

• airbnb style guide를 사용한다.

ESLint: 자바스크립트 코드가 규칙을 잘 지키고 있는지 검사하고 알려주는 도구
Prettier: 코드 모양을 예쁘고 일관되게 자동 정리해주는 도구

 

🚀 코드 작성 시 규칙 모음

 

⚡문장 종료

• 반드시 세미콜론 사용

⚡주석

• 짧은 1줄 주석(//)은 가능하면 변수, 함수 등의 이름에 반영하는 것을 권장한다.
• 주석엔 복잡한 로직에 대한 설명 등을 담을 수 있다.

 

⚡명명 규칙

• 상수는 영문 대문자, 어퍼 스네이크 표기법 사용

const EXAMPLE_WORD;

• 변수 및 함수는 카멜 케이스 사용

 

⚡블록구문

• 한 줄짜리 블록일 경우라도 {}를 생략하지 않고, 명확히 줄 바꿈하여 사용한다.

// 나쁜 예
if(true) return 'true';

// 좋은 예
if(true){
	return 'true';
};

 

⚡함수

• 함수는 함수 표현식을 사용하며, 화살표 함수를 사용한다.
• 바로 return하는 경우

// 나쁜 예
const badExample = () => { return "bad"; }

// 좋은 예
const goodExample = () => "good"

 

⚡주석

• Comment Anchors를 사용한다.
  • VScode의 extension에서 앵커를 다운 받으면 주석을 좀 더 직관적으로 볼 수 있다고 함

 

⚡태그 네이밍

• Styled-component 태그 생성 시 네이밍 규칙을 준수하여 의미 전달을 명확하게 한다.
• 태그명이 길어지더라도 의미 전달의 명확성에 목적을 두어 작성한다.
• 전체 영역: container
• 영역의 묶음: {Name}Area
• 의미없는 태그: <>

<Container>
	<ContentsArea>
    	<Contents>...</Contents>
        <Contents>...</Contents>
	</ContentsArea>
</Container>

 

⚡폴더 네이밍

• 카멜 케이스를 기본으로 하며, 컴포넌트 폴더일 경우에만 파스칼 케이스로 사용한다.

// 카멜 케이스
myPage
// 파스칼 케이스
ComponentFolder

 

⚡파일 네이밍

• 컴포넌트일 경우만 .jsx 확장자를 사용하고 그 외에는 .js 사용
• customHook을 사용하는 경우: use + 함수명

⚡이벤트 핸들러 네이밍

• Props의 경우: on (onClick 등)
• 함수인 경우: handle (handleClick 등)

<ExComponent onclick={this.handleClick} />

 

 

 

🛠️ 기타 자주 쓰이는 컨벤션

• 들여쓰기 2칸
• JSX에서 속성 정렬: props가 많을 경우 한 줄에 하나씩

<MyComponent
  title="제목"
  onClick={handleClick}
  disabled={isDisabled}
/>

 

• 파일당 하나의 컴포넌트
• 상태(state)는 useState 등 훅을 이용하고, isLoading, userList 같은 camelCase 사용

 

 

 

 

마무리하며

 

아직 리액트를 잘 몰라서 위에서 적으면서도 익숙치 않은 것들이 많았는데 공부 열심히 해서 다 이해하고 싶습니다!!!

코딩 컨벤션 말고 깃 컨벤션도 있고.. 알아가야 할 게 참 많은데요.. 더 노력하겠습니다,,

깃 컨벤션은 나중에 따로 혼자서라도 정리해보려고요!

 

 

 

 

 

---

참고 문서

https://myung-ho.tistory.com/100

https://kyledev.tistory.com/91

https://ddorimeo.tistory.com/7

https://togll.tistory.com/53

https://kimhongsi.tistory.com/entry/%EA%B0%9C%EB%B0%9C-%EC%B9%B4%EB%A9%9C-%EC%BC%80%EC%9D%B4%EC%8A%A4-%EC%BC%80%EB%B0%A5-%EC%BC%80%EC%9D%B4%EC%8A%A4-%ED%8C%8C%EC%8A%A4%EC%B9%BC-%EC%BC%80%EC%9D%B4%EC%8A%A4-%EC%8A%A4%EB%84%A4%EC%9D%B4%ED%81%AC-%EC%BC%80%EC%9D%B4%EC%8A%A4%EB%9E%80

https://ccomccomhan.tistory.com/185