HTML 시작하기 앞서

정연희·2021년 9월 11일
0

HTML

목록 보기
2/2
post-thumbnail

변수명은 어떻게 지으면 좋을까?

변수명을 어떻게 짓는지는 매우 중요한데요, 그 이유는 다른 프로그래머들이 읽고 어떤 변수인지 인지할 수 있도록 해야 하기 때문입니다. 애플리케이션이나 소프트웨어 개발할 때 대부분 많은 사람들과 함께 코드를 작성해야 하는 경우가 많으며, 프로젝트 진행 시 협업하고 있는 다른 사람들이 자신의 코드를 봐야 하는 경우도 많습니다. 이렇게 다른 사람들과의 협업과 소통해야 하기 때문에 코드 작성 시 다른 사람들이 쉽게 코드를 이해할 수 있도록 하고, 읽고 이해하는 시간을 최소화하는 것이 매우 중요한데, 변수명이 그것에 큰 영향을 끼치는 요소입니다. 직접 이름을 설정할 수 있는 만큼 변수의 역할 및 기능을 직관적으로 나타낼 수 있기 때문입니다.

그러면 어떻게 변수명을 지어야 좋은 변수명이 될까요? 그건 여러가지 방법이 있지만 대표적으로는 lowerCamelCase 방법입니다. 이 방법은 명명규칙 이름에 나온것과 같이 여러 단어들을 띄어쓰기 없이 이어서 쓰되 첫 단어를 제외한 다른 단어들의 첫 글자를 대문자로 쓰는 방식입니다. 이 방법은 주소 Java나 Javascript에 사용되는데, 언어에 따라 지향되는 명명규칙이 다릅니다. 가령 CSS에서는 띄어쓰기를 -로 대신하는 것을 선호합니다. helloWorld가 아니라 hello-world처럼 쓰는 것이죠. 또한, 어떤 용도의 변수인지에 따라서 명명규칙을 달리하는 것이 좋습니다. 함수 변수는 lowerCamelCase 방식을 쓰되 데이터를 저장하는 용도의 변수는 hello_world처럼 모두 소문자와 _기호를 사용하고, 생성자 함수는 UpperCamelCase(lowerCamelCase과 비슷하지만 첫 단어의 첫 글자도 대문자로 하는 표기법)로 나타내는 것입니다. 이런 명명규칙을 똑같이 따를 필요는 없습니다. 팀 내에서 정한 규칙이 있을 수도 있다면 그 방식대로 하면 되기도 하고 개인적인 코드일 경우 명명규칙을 가질 필요가 없을 수도 있습니다. 하지만 많은 사람들이 사용하는 명명규칙을 사용하면 더욱 읽기 좋은 코드로 만들 수 있기 때문에 위와 같은 명명규칙을 따르는 것을 추천드립니다.

코드 포맷터(Code Formatter) 사용하기

코드 포멧터(Code Formatter)란 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구를 말합니다.
출처: https://www.daleseo.com/js-prettier/

자바스크립트와 같이 많은 개발자들이 사용하는 프로그래밍 언어의 경우, 개발자마다 선호하는 코딩 스타일이 다를 수 있습니다. 가령, 문자열을 쌍따음표로 감싸줘야 한다고 주장하는 사람이 있는 한편, 홑따음표를 사용해야 한다고 생각하는 사람들이 있을 수 있습니다. 이렇게 다른 코딩 스타일을 가진 개발자들이 한 팀에서 일할 경우 코딩 스타일 차이로 인한 갈등이 발생할 수 있습니다. 코드 포맷터는 개발자가 작성한 코드를 자동적으로 정해진 코딩 스타일대로 변환해주기 때문에 이런 갈등을 예방하고 모든 사람들이 코드를 편하게 읽을 수 있도록 합니다. Prettier는 포맷터 중 가장 인기가 있고 거의 표준이되고 있는 자바스크립트 라이브러리입니다. 이는 자바스크립트 이외에도 타입스크립트, JSON, HTML, CSS등에 적용되는데 HTML 코드 작성하기 이전에 이 코드 포맷터를 다운받는 걸 추천합니다.

시맨틱 태그(semantic tag)을 지향하기

시맨틱(semantic) 태그란 그 이름 자체만으로 브라우저나 길 잃은 사람들, 지구 상의 원주민, 개발자, 수정자들에게 의미를 전달할 수 있는 태그다.
출처: https://nonipc.com/entry/시맨틱-태그semantic-tag-사용-방법

시맨틱 태그는 <div><span>처럼 태그만으로 내용을 짐작할 수 없는 태그가 아닌, <header><img>처럼 직관적으로 내용을 추측할 수 있는 태그를 의미합니다. 이런 시맨틱 태그를 지향하는 것이 다른 개발자가 그 코드를 읽고 이해하는 데 큰 도움을 줄 수 있습니다.


참고문헌

0개의 댓글