가독성이 좋은 자바스크립트[javascript] 코딩 - 스타일 가이드라인

가독성이 좋은 코드를 작성하는 것은 개발자라면 누구나 바라는 것입니다.

하지만 본인이 작성한 코드를 본인이 봐도 헷갈리는 경우가 태반이고 그나마도 본인이 하고 본인이

해결하지 못하는 경우도 가끔 봅니다.

 

따라서, 가독성이 좋은 코드는 본인과 유지보수를 하는 개발자에게도 중요한 요소입니다.

이번 글을 시작으로 가독성이 좋은, 읽기 좋은 자바스크립트 코딩에 대해서 포스팅을 해보려고 합니다.

 

1. 스타일 가이드라인은 돼 필요한가?

스타일 가이드라인을 정하는 절차는 생각보다 많은 시간이 필요합니다. 각자 의견이 다른 데다가 개발자는 보통 하루 8시간씩 코드를 작성해야 하는 터라 자신이 편한 방법으로 정하고 싶어하기 때문입니다.

그래서 팀원들이 조금씩 타협해야 하바니다. 또 팀 리더가 강하게 주도할 줄도 알아야 합니다.

이러한 과정을 거쳐 스타일 가이드라인이 정해지면, 코드에 일관성이 있어 더 이상 코딩 스타일 같은 사소한 일로 시간을 허비하지 않고 깊이 있는 논의를 할 수 있습니다.

 

2. 유용한 툴

코딩 가이드라인은 세우기도 어렵지만 지키는 것도 어렵습니다. 팀에서 논의해서 가이드라인을 세우고, 코드를 리뷰하면 어느 정도 수준까지는 올라갈 수 있지만 그래도 실수가 있게 마련입니다.

이때, 툴을 사용하면 팀 가이드라인을 세우는 데 도움이 됩니다.

특히 JSLint와 JSHint는 스타일 가이드라인에 매우 유용한 툴입니다.

 

3. 기본포맷

스타일 가이드의 핵심은 기본 포캣 규칙입니다. 규칙에 따라 코드를 어떻게 작성할지 큰 틀에서 정합니다.

개발자가 중요하게 생각하지 않는 문법을 다루기도 하지만 코드를 일관되게 적성하려면 이런 규칙이 중요합니다.

 

 3.1 들여쓰기

들여쓰기는 거의 모든 언어에서 첫번째로 결정하는 부분입니다. 그만큼 민감하지만 가정먼저 정해야 하는 주제이기도 합니다. 미루다 늦게 정하면 들여쓰기가 잘못되어 파일에 작업할 때마다 들여쓰기부터 손봐야 하는 문제가 발생할 수 있습니다.

 

들여쓰기에는 탭을 이용한 들여쓰기

들여쓰기를 탭으로 처리합니다. 한단계 들여쓰기는 탭 한 번이고, 두 단계 들여쓰기는 탭 두 번, 이런식으로 들여쓰기합니다.

장점은 탭과 들여쓰기 단계가 일대일로 대응되어 논리적입니다. 

각 테스트 에디터에서 탭 크기를 원하는대로 설정할 수 있어서 들여쓰기를 좁게 설정하는 개발자나 넓게 설정하는 개발자 모두 원하는 대로 볼 수 있습니다.

단점은 시스템마다 탭 크기를 다르게 표현해서 애초에 보던 방식이 다른 시스템에서는 달라져서 난감할 수 있습니다.

 

다음으로 공백을 이용한 들여쓰기가 있습니다.

공백으로 들여쓰기를 처리하는 방법은 2개, 3개, 8개 공백 중 한가지 방식을 이용해서 들여쓰기하는 것입니다.

이 방법은 자바스크립트뿐만 아니라 전반적인 프로그래밍 언어에서 사용하는 가이드라인입니다.

실무에서는 보통 2개나 8개 공백의 절충안으로 4개를 공백 들여쓰기로 사용합니다.

장점은 어떤 에디터나 시스템에서도 똑같이 보인다는 것입니다.

또 텍스트 에디터에서 탭 키를 누르면 여러개의 공백을 입력하도록 설정할 수도 있습니다.

즉 모든 개발자가 소스 코드를 동일하게 볼 수 있습니다.

 

개인마다 다른 방법을 추구할 수는 있지만, 팀 내 의견을 하나로 모으는 것이 무엇보다 중요합니다.

들여쓰기는 단계마다 공백 4개를 사용하길 추천합니다. 많은 텍스트 에디터에서 탭 키 대신 공백을 사용하도록 설정하면 기본값으로 공백 4개를 사용합니다.

공백 2개로 들여쓰면 들여쓰기를 했는지 구분하기 힘들수도 있기 때문입니다.

 

이것으로 가독성을 높이는 첫번째 들여쓰기에 대해 알아보았습니다.

본인이 생각하는 아무리 좋은 방법이라도 팀원들과 합의해서 정하는 것이 중요합니다.

 

그럼 이만.

끝.