티스토리 뷰

HTML과 CSS를 배웠다면 이제 배워야 할 것은 자바스크립트겠죠? 오늘부터는 자바스크립트에 대해서 계속 다뤄보도록 하겠습니다. 자바스크립트 첫 강의 주제는 주석입니다. 

주석은 무엇일까요



위키백과에는 주석은 프로그래밍에 있어서 내용을 메모하는 목적으로 쓰이며 소스코드를 더 쉽게 이해할 수 있게 만드는 것이 주 목적이며, 컴파일러와 인터프리터에 의해 일반적으로 무시되어 프로그램에 영향을 주지 않는다고 정의되어 있습니다. 


즉 컴퓨터는 읽지 않고 사람들이 코드를 이해하는데 도움을 주는 것이 주석이라는 것입니다. 


소스코드를 통해 자바스크립트 주석부터 알아보도록 하겠습니다.


<!DOCTYPE html>
<html>
  <head>
    <title>주석</title>
 </head>
 <body>
  <script>
    //한 줄 주석

    /*
      여러줄 주석
      여러줄 주석
      여러줄 주석
    */
  </script>
 </body>
</html>


<script>태그를 사용하면 자바스크립트 코드를 <html>문서 안에 사용할 수 있죠? <script>태그 사이에 주석을 넣었습니다. 자바스크립트엔 //을 사용하면 그 뒤에 있는 문장은 주석처리가 됩니다. 줄이 바뀌면 주석처리가 되지 않습니다. 그리고 /* */은 여러줄로 주석을 처리할 때 사용합니다. 사이에 오는 것은 다 주석이 됩니다. 여러줄 주석이라고 합니다. 꼭 여러문장을 써야한다고 해서 /* */만 쓸 필요는 없습니다. 


<script>
  //여러줄 주석을
  //이런식으로
  //쓸 수도 있습니다
</script>

html과 css 주석



html과 css 수업을 하면서 주석에 대한 설명을 드리지 않았으니 지금 같이 설명하도록 하겠습니다. html 주석은 <!-- 주석 -->형태로 되어있습니다. 


<!-- 한 줄에 표현하면 한 줄 주석 -->
<!--
  여러줄에 
  표현하면 
  여러 줄 주석
  입니다.
-->


아주 간단하죠? 한 형태를 여러줄에 쓰면 여러줄 주석이고, 한 줄에 쓰면 한 줄 주석입니다.


<!-- 사이에 오는 것이 주석으로 인식됩니다. -->


css의 주석은 자바스크립트에서의 여러줄 주석과 똑같은 형태입니다. /* */라는 형태 안에 쓰면 주석으로 처리됩니다.


<style>
  /*한 줄을 주석 처리*/
  /* 여러줄을 
     주석처리 */
</style>


css도 /* 사이에 오는 것이 주석으로 인식됩니다. */

주석엔 어떤 내용이 와야할까요?



어떻게 하면 주석처리가 되는건지 배우는 건 아주 쉽습니다. 외우는 것도 아주 간단하구요. 하지만 중요한 건 주석에 어떤 내용이 들어가면 되는지를 고민하는게 아닐까요? 여러 기능이 들어가다 보면 코드는 순식간에 복잡해집니다. 공들여서 만든 나의 코드라도 시간이 조금만 지나면 남의 코드가 되어버립니다. 그래서 단순히 짧게 코드를 구성한다고 좋은 것이 아니고 주석을 아주 상세히 쓴다고 좋은 것도 아닙니다.  


//변수 a에 1이라는 값을 넣습니다.
var a = 1;


아직 변수에 대해서 모르시는 분들도 있겠지만, 간략히 코드를 설명드리면 a의 값으로 1을 지정한 것입니다. 그 상황에서 저렇게 주석을 주는 것이 좋은 것일까요? 사람들이 직관적으로 이해할 수 있는 간단한 코드에는 주석을 주는 것은 쓸데없는 행동입니다. 설명이 필요한 부분은 설명하되, 정말 설명이 필요한 부분인 지 꼭 생각하고 쓰시는 게 더 좋은 코드를 완성시킵니다. 



프론트엔드 개발자에겐 필수적인 언어인 자바스크립트! 이제부터 시작합니다.



공감은 제작자에게 큰 힘이 됩니다. 


댓글