코린이를 위한 개발 Tip + 웹 개발 - 원스탑 튜터링 2주차

코딩을 이제 막 시작했다면 알아두면 좋을 정보 4가지를 정리해봤습니다. 프로젝트 규모가 커지면 혼자 개발할 일이 거의 없을텐데, 그때는 '알아두면 좋을'이 아닌 '꼭 알아두어야 할' tip입니다. 기본적인 개발 tip도 있지만 웹 개발에만 해당하는 내용도 있습니다. 그럼 같이 보시죠..!!

---

1. 변수 이름은 신경 써서 짓는다

우리가 변수 이름을 짓고, 커밋 메세지를 보내고, 주석을 달 때 항상 고려해야 하는 것은 다른 사람이 알아보기 쉬워야 한다는 것이다. 나만 알아보는 변수명을 쓰고 주석을 열심히 다는 것보단, 처음부터 좋은 변수 이름을 지어서 주석을 달 필요가 없는 게 낫다. 변수 이름을 잘 지으면 주석이 없어도 직관적으로 쉽게 이해할 수 있다.

 

변수 길이는 평균적으로 10~16이라고 한다. 그러니 너무 짧게 쓰려고 하지 말고 차라리 길이를 늘려서 알아보기 쉽게 하자.

 

Camel case 표기법

첫 단어를 제외한 나머지 단어는 대문자로 시작한다. 물론 클래스는 첫 단어도 대문자로 시작한다.

const toDoList = [];
const createToDo = function() {};

 

BEM

Block, Element, Modifier을 줄인 말로, CSS와 HTML의 class 이름을 지을 때 사용하는 표기법이다. -, _ 를 사용하여 변수를 구분한다.

/* Block component */
.btn {}

/* Element that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

 

↓↓아래 사이트 참고↓↓

BEM 101

 

 

2. git commit은 기능별로 쪼갠다.

협업을 하는 개발자라면 git은 거의 필수라고 할 수 있다. 커밋(commit)은 중간중간 자신의 작업을 메시지와 함께 기록하는 것이다. 커밋을 보낼 때 자신의 작업을 한꺼번에 보내는 것보단 기능별로 쪼개서 보내는 것이 좋다. 잘 분류된 커밋은 다른 사람도 이해하기 쉽다.

 

기본 형식

<type>: <message>

#예시
build: update dependecy
bug: todo가 삭제되지 않는 버그 수정

 

 

type 종류

• feat: (new feature for the user, not a new feature for build script)
• fix: (bug fix for the user, not a fix to a build script)
• docs: (changes to the documentation)
• style: (formatting, missing semi colons, etc; no production code change)
• refactor: (refactoring production code, eg. renaming a variable)
• test: (adding missing tests, refactoring tests; no production code change)
• chore: (updating grunt tasks etc; no production code change)

물론 협업하는 사람마다 형식이 달라질 수 있다. type이 더 추가되거나 한글로만 적기도 한다.

 

• 기능추가: 기능 추가
• 기능삭제: 기능 삭제
• 기능변경: 기능 변경
• 버그: 버그 수정
• 문서: 문서 추가, 삭제, 변경
• 형식: 코드 형식, 정렬, 주석 변경 등 (코드 변경 X)
• 리팩토링: 코드 리팩토링 (변수 이름 변경 등)
• 테스트: 테스트 코드 추가, 삭제, 변경, 수행 등 (코드 변경 X)
• 기타: 위에 해당되지 않는 모든 변경

 

gitmoji

gitmoji를 사용해서 type 대신 이모지를 쓰기도 한다. 귀엽고 편리해 보이지만 아까 말했듯이 어떻게 적을 지는 다른 사람들과 상의해야 한다.

🐛 공백이 입력되는 버그 수정
✨ todo 삭제 기능 추가

gitmoji

 

 

 

3. 코드 포맷터(Formatter)를 사용한다

VSCode 에디터를 쓰고 있다면 코드 포맷터를 사용하도록 하자. 이건 남을 위해서이기도 하지만 코드를 짜는 사람에게도 무척 좋은 기능이다. 탭으로 들여쓰기를 안 했다던가, 세미 콜론을 안 붙였다든가, 함수 코드를 한 줄로 적었다는가 등등.. 이런 걸 일일이 찾아서 수정하는 건 쉬운 일이 아닐 거다.

 

코드 포맷터를 사용하면 파일을 저장할 때마다 알아서 보기 좋게 정렬해준다. VSCode의 대표적인 코드 포맷터는 Prettier와 Beautify가 있다. (개인적인 생각으로 사람들이 Prettier를 더 많이 쓰는 것 같다.) 설치는 VSCode Extension에 들어가서 prettier를 검색하고 install를 눌러주면 된다.

Prettier 설치 방법

 

 

4. 시맨틱 태그를 사용한다

시맨틱(sementic)을 영어사전에 검색해보면 connected with meaning of the words 라고 나온다. 어떤 의미가 담긴 것을 지칭하는 단어인 거 같다. 시맨틱 태그는 HTML에서 태그 이름만 보고도 어떤 역할을 하는지 알 수 있도록 써 놓은 태그를 말한다. 딱히 기능이 있는 건 아니지만 '이 태그 안에는 이런 게 들어갈 거야' 라는 의미를 담고 있다.

<header> </ header>
<nav> </ nav>
<main> </ main>
<section> </ section>
<article> </ article>
<footer> </ footer>

이 외에도 검색해보면 더 많은 태그들이 나온다. 필요할 경우 더 추가해서 사용하면 된다.

 

---

 

[참고자료]

https://geonlee.tistory.com/190

git 커밋 어떻게 써야하는가? 🤔

https://tttsss77.tistory.com/58

Git 사용 규칙 - Git commit 메시지