1. 좋은 코드란 무엇일까?
앞으로, 코딩을 할 때 꼭 염두해두어야 하는 Code Refactoring 에 대해 알아보자.
코드를 짤 때 중요하게 여겨야 하는 것
: 코드의 가독성 / 코드의 확장성
코드는 한번 작성되고 끝나는 게 아니다. 유지보수를 용이하게 하기 위해서는 코드의 가독성과 확장성이 좋아야한다. 이러한 사항을 염두해 두고 다시 코드를 짜는 과정을 Refactoring이라고 한다.
💡 좋은 개발자가 되기 위해선,
하나를 구현하더라도 좋은 코드가 무엇인지 고민하고 효율적이고 확장성 있는 코드, 즉 유지보수가 용이한 코드를 작성할 줄 알아야한다.
2. Basic
2-1. 테스트 후, console.log 지우기!
테스트 끝난 콘솔은 모두 지워야 한다. 'console.log'는 코드 테스트를 할 때는 필수적이지만 최종 결과물에는 포함되면 안된다.
사실 아직 뭣이 중요한 지도 잘 모르는 .. 입문자이기 때문에 console.log를 많이 사용해보지 않았지만, 멘토님께서 테스트를 할 때 꼭 console.log를 사용해 테스트를 해보라고 하셨다. 항상 테스트하고난 후에 console 지우는 걸 습관화하자.
"코드의 가독성, 다른 팀원을 위한 기본적인 배려 차원에서 console.log를 지우는 것은 가장 기본적인 컨벤션"
2-2. id ・ class명, 변수명, 함수명 의미가 직관적으로 드러나게 작성하기
프로그래머가 가장 힘들어하는 일 중 대표적인 것이 이름짓기라고 한다. 하지만 무엇보다도 중요한 일 중 하나이다.
// bad
let value = "Tom";
let value2 = "Cruise"
// good
let firstName = "Tom"
let lastName = "Cruise"// bad
const data = ["tory", "mozzi"];
// good
const petsOfYeonuk = ["tory", "mozzi"];data, value 등의 포괄적인 이름은 지양해야 한다.
개발자가 보내는 시간 중 코드를 짜는 시간은 10%, 나머지 90% 시간은 모두 코드를 읽고 해석하면서 시간을 보낸다. 그렇기 때문에 내가 짠 코드를 읽기 쉽게 만드는 일은 가장 기본이면서 가장 중요한 일이다.
2-3. 들여 쓰기
💡
프로그래밍 언어에서 규칙성 있는 들여 쓰기는 가독성 측면에서 매우 중요합니다.
규칙성 있는 들여 쓰기는 기본 중의 기본 코드의 가독성을 높이려면 규칭성 있게 들여 쓰기를 해야한다.
javascript는 2칸 들여 쓰기를 컨벤션으로 정하고 있다.
3. HTML
3-1. Semantic Tag의 사용
HTML에는 다양한 태그가 존재하며 그 중에서도 Semantic Tag를 적절하게 사용하는 것은 가독성 ・ SEO(검색엔진최적화) 측면에서 너무나 중요하다.
HTML은 웹브라우저가 읽을 수 있는 문서를 작성하기 위해 사용하는 마크업 언어이다. 즉, 웹브라우저가 문서가 나타내는 정보를 잘 이해할 수 있게 하기 위해서, 시맨틱 태그를 잘 사용하는 것이 중요하다.
참고 : Semantic Web과 Semantic Tag
3-2. img tag alt 속성
img tag를 사용하실 때 반드시 alt 속성 부여해야 한다. 사실 이번에 westagram을 만들 때, 종종 까먹곤 했는데 alt 속성은 아래와 같은 이유로 필수이다.
-
이미지가 로딩되지 않을 경우 alt 속성에 적힌 값이 보여진다.
시각장애인의 경우 alt 속성을 통해 어떤 이미지가 보여지는지 알 수 있다. -
SEO 검색엔진 최적화에서 어떤 img인지 인식하는 코드는 alt 속성이다.
3-3. Self Closing Tag
Self Closing이 가능한 tag들은 Self Closing을 적용시켜야 한다.
- 열고닫는 태그 없이 스스로 닫을 수 있는(Self Closing) tag
<br />
<hr />
<img />
<meta />
<link />
<input />
: 불필요하게 모든 태그를 열고 닫으면 가독성을 해칠 수 있습니다.
<!-- Bad -->
<input type="password"></input>
<!-- Good -->
<input type="password" />