일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- CSS애니메이션
- @keyframes
- 웹스크래핑
- to do list
- 코딩컨밴션
- Vue.js
- MariaDB
- 로딩UI
- 구글스타일가이드
- 뉴스수집
- 코딩규칙
- 파이썬
- vue-cli
- 자기개발
- javascript
- css rule
- 스타일가이드
- python
- google style guide
- 투두리스트
- 구글CSS
- CSS로딩
- 개발회고
- 자바스크립트
- html제거
- css규칙
- 코딩가이드
- vuejs입문
- 프레임워크
- vueJS
- Today
- Total
코드공부방
변수, 함수, 클래스, 아이디 네이밍 스타일 / variable, function, class, id naming style 본문
변수, 함수, 클래스, 아이디 네이밍 스타일 / variable, function, class, id naming style
:- ) 2019. 8. 30. 11:12변수, 함수, 클래스, 아이디 네이밍 스타일 /
variable, function, class, id naming style
프로그래밍을 할때 고민을 많이 하게 되는 것중 하나가 네이밍이 아닐까 싶다.
변수, 함수, 클래스, 아이디.. 네이밍 해야할 것도 많다. 해당 기능에 맞게, 내용에 딱 맞는 아름다운(?) 이름을 지어주기 위하여 오늘도 열심히 구글 번역기를 돌리고 있다. (프로그래밍 작명소는 없나..)
이름을 뭐라고 짓냐는 것도 고민인데 그 이름을 짓는 방식도 한가지가 아니다. 이것은 사실 스타일이기 때문에 각 프로젝트에서 협의된 대로 따르는 게 좋지만 어떤 종류가 있는지 알고 있으면 좋으니 정리해보았다.
1. 카멜 표기법 (Lower Camel Case : LCC)
첫단어는 소문자로 표기하며 이후 연결되는 단어부터는 첫자를 대문자로 표기한다. 이 모습이 낙타 등의 봉과 닮았다고 하여 camel 표기법이라고 한다.
//camel case name
var cameCaseName;
var firstBoxSize;
var heightCalculator;
2. 카멜 표기법 (Upper Camel Case : UCC), 파스칼 표기법 (Pascal Case)
카멜표기법의 또다른 방식이며 첫단어를 포함하여 모든 단어의 첫자를 대문자로 표기한다. 파스칼 표기법(Pascal case) 이라고도 부른다.
//pascal case name
var PascalCaseName;
var FirstBoxSize;
var HeightCalculator;
3. 스네이크 표기법 (Snake Case), 언더스코어 표기법(Under Score Case)
각 단어와 단어 사이 연결을 언더바(_)로 잇는 표현방식이다. 떄문에 언더스코어 표기법(Under score case) 라고도 부른다.
//snake case name
var snake_name;
var first_box_size;
var height_calculator;
4. 케밥 표기법 (Kebab Case)
각 단어와 단어 사이 연결을 대쉬(-)로 있는 표현방식이다. 단어들을 연결해놓은 형상이 케밥과 같다고 하여 명칭이 붙여졌다.
//kebab case name
var kebab-name;
var first-box-size;
var height-calculator;
이미지 출처
1. https://en.wikipedia.org/wiki/Camel_case
2. https://www.youtube.com/watch?v=eCFDnHeAQAM
3. https://www.ikea.com/us/en/catalog/products/20402850/
4. https://www.chefsteps.com/activities/carne-asada-chuck-steak-kebabs
'웹퍼블리셔 > 업무 도움되는' 카테고리의 다른 글
지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (With.Image Map Generator) (1) | 2020.02.12 |
---|---|
VSCode(비주얼스튜디오코드)에서 SFTP에 직접 붙어 작업하기(부제 : 안녕, Editplus) (0) | 2020.02.11 |
무료 온라인 이미지 최적화 서비스 - Optimizilla (0) | 2020.01.29 |
작업 샘플(임시) 이미지 자동 생성 placeholder.com / picsum.photos (1) | 2019.08.28 |