ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • JS 편 - 4일차
      개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 12. 09:00
      반응형



       

      4일차

       

       

       

      13. 프로그램, 프로그래밍, 프로그래머

      • 이번 장을 자바스크립트라는 프로그래밍 언어가 무엇인가를 이론적으로 돌아보는 장이다.
      • HTML과 자바스크립트는 둘 다 컴퓨터 언어이다.
      • 하지만 자바스크립트는 컴퓨터 언어 또는 컴퓨터 프로그래밍 언어라고 하지만 HTML은 컴퓨터 프로그래밍 언어라고 하지 않는다.
      • 이 차이를 알기 위하여 프로그램의 어원을 알아보자
      • 음악회 같은 경우에는 시간의 흐름에 따라 음악이 연주되는 순서가 있으며, 이런 순서를 프로그램이라 한다.
      • 즉, '프로그램'이라는 단어의 중심에는 순서라는 의미가 있다.
      • 이 순서를 만드는 행위를 프로그래밍이라고 하며, 이 순서를 만드는 사람을 프로그래머라고 한다.
      • 다시 돌아와 컴퓨터에는 여러가지 기능이 있고, 이것을 작동시키는 것이 일반적으로 컴퓨터를 사용하는 방법이다. 어떠한 순서대로 컴퓨터를 조작하고 또 반복되고, 또 반복되며, 이러한 반복 작업 중 사용자는 실수와 불행을 안게 될 것이다. 그래서 고민한 끝에 컴퓨터 프로그래밍 언어라는 것을 만들었다.
      • 이것은 시간 순서에 따라 실행되어야 할 기능을 프로그래밍 언어의 문법에 맞게 글로 적어두는 방식을 고안한 것이다.
      • HTML은 웹 페이지를 묘사하는 목적의 언어이기 때문에 시간의 순서에 따라 무엇을 할 필요가 없다. 그래서 HTML은 시간의 순서에 따라 실행되게 하는 기능을 가지고 있지 않다. 그래서 컴퓨터 프로그래밍 언어라고 하지 않는다.
      • 하지만 자바스크립트는 사용자와 상호작용하기 위해 고안된 컴퓨터 언어이고, 그러기 위해서는 시간 순서에 따라 웹 브라우저의 여러 기능이 실행되어야 하기 때문에 프로그램이라는 형태를 띄고 있다.
      • 이런 점이 HTML과 자바스크립트를 다르게 하는 중요한 특징이다.
      <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
">
      • 위 코드를 보면 <body>태그의 배경색을 검은색으로 지정한 다음, 텍스트 색상을 흰색으로 설정하라고 자바스크립트를 통해 웹 브라우저에게 명령을 하고 있다. 이것 자체가 순서이며 이미 프로그래밍이다.
      • 다음 장부터는 컴퓨터 프로그래밍 언어의 핵심적인 기능들인 조건문, 반복문, 함수 등을 살펴볼 것이다.

       

       

       

       

       

       

      14. 조건문 예고

      • 조건문이라고 하는 것은 하나의 프로그램이 하나의 흐름으로 가는 것이 아니라 조건에 따라 다른 순서의 기능들이 실행되게 하는 것이라고 할 수 있다.
      • 프로그래밍이란 것을 통해 반복적인 일을 하지 않게 되었다면 조건문이라는 것은 단순한 반복문이 아니라 아주 복잡한 업무에서도 우리가 해방되게 하는 아주 혁명적인 도구이다.
      • 예를 들어 주간모드와 야간모드가 가능한 예제에서 버튼이 2개인 것이 불편하여 버튼 1개로 주간모드와 야간모드가 되는 기능을 구현하고자 한다. 이런 것을 토글(toggle)이라고 하며, 나중에 다른 장에서 if문과 ===라는 비교연산자, 그리고 이 비교 연산자를 통해 만들어진 불리언(boolean)이라는 것도 살펴볼 것이다.

       

       

       

       

       

       

      15. 비교 연산자와 불리언

      • 자바스크립트의 여러 기능 중에서 비교 연산자라는 것과 비교 연산자를 통해 만들어지는 불리언이라는 새로운 데이터 타입을 살펴보자.
      • 먼저 비교연산자의 예제는 아래와 같다.
      <h1>Comparison operators & Boolean</h1>
<h2>===</h2>
<h3>1===1</h3>
<script>
    document.write(1===1); // true
</script>

<h3>1===2</h3>
<script>
    document.write(1===2); // false
</script>
      • === 연산자는 왼쪽에 있는 값과 오른쪽에 있는 값이 같은지 판단한다.
      • 1===1은 같으므로 true(참)이 출력된다.
      • 1===2는 다르므로 false(거짓)이 출력된다.
      • ===는 비교 연산자이면서 이항 연산자이다. 이항 연산자를 사용할 때는 좌항과 우항이 있고 이것을 결합하여 어떠한 데이터를 만든다. 즉, 좌항과 우항의 관계에 따라 true 또는 false 중 하나의 값을 만들어내는 연산자이며, 이 true와 false 라는 두 가지 값을 묶어서 불리언(boolean)이라고 부른다.

       

      • 지금까지 살펴본 데이터 타입은 세 가지가 있다.
        • 첫 번째로 숫자(Number)이고 구체적인 데이터는 무한히 많다.
        • 두 번째로 문자열(String)이고 이것 또한 무한히 많다.
        • 세 번째로 불리언(boolean)이고, 단 두 개의 데이터로 이루어진 데이터 타입이다.
      • 불리언을 통해 인류는 단순 반복에서 해방되었다. 불리언이라는 것은 영국의 수학자 조지 부울이라는 분의 수학적인 업적을 기리기 위한 것이다.

       

      • 이제 다음 예제를 보자.
      <h3>1&lt;2</h3> <!-- Less Than (<, 보다 작은) -->
<script>
    document.write(1<2); // true
</script>

<h3>1&lt;1</h3>
<script>
    document.write(1<1); // false
</script>
      • 1<2를 작성하려고 하니 HTML에서는 <가 태그를 시작하는 문법이기 때문에 <를 출력하고자할 때는 'less than'이라는 뜻에서 &lt;이라 쓴다.
      • 1<2는 맞으므로 true를 출력하며, 1<1은 틀리므로 false를 출력한다.

       

      • 지금까지 비교 연산자를 통해 만들어지는 결과는 true나 false 중 하나이며, 그 값을 묶어서 불리언이라고 부른다는 것을 배웠다.

       

       

       

      16. 조건문

      • 이번 장에서는 불리언과 비교 연산자를 어떻게 쓰는지 살펴보자.
      • 아래의 예제를 보자.
      <h2>Program</h2>
<script>
    document.write("1<br>");
    document.write("2<br>");
    document.write("3<br>");
    document.write("4<br>");
</script>
<!--
1
2
3
4
-->
      • 위 코드 대로면 1 ~ 4까지 나열되며 출력된다.
      • 그리고 이제 if 문을 써보자.
      <h2>IF-true</h2>
<script>
    document.write("1<br>");
    if(true){
        document.write("2<br>");
    } else {
        document.write("3<br>");
    }
    document.write("4<br>");
</script>
<!--
1
2
4
-->

<h2>IF-false</h2>
<script>
    document.write("1<br>");
    if(false){
        document.write("2<br>");
    } else {
        document.write("3<br>");
    }
    document.write("4<br>");
</script>
<!--
1
3
4
-->
      • IF-true 예제를 보면 if 문 안에 true가 입력되었고 결과는 1, 2, 4가 출력되며, 3은 출력되지 않는 것을 확인할 수 있다. 즉, else에 적힌 코드를 무시하는 방향으로 진행되었다.
      • IF-false 예제를 보면 if 문 안에 false가 입력되었고 결과는 1, 3, 4가 출력되며, 2은 출력되지 않는 것을 확인할 수 있다. 즉, else에 적힌 코드를 출력하는 방향으로 진행되었다.
      • 정리하면 if 문의 뒤에 따라오는 괄호 안에는 불리언 데이터 타입(true나 false)이 오는데, true면 첫 번째 중괄호 안의 코드가 실행되고, false면 else 안에 있는 코드가 실행된다는 것이다.
      • 즉, 불리언의 값이 무엇이냐에 따라 실행되는 코드가 바뀐다는 것이다.

       

       

      17. 조건문의 활용

      • 지금까지 비교 연산자, 불리언, 조건문이라고 하는 보기에 따라 상당히 관념적으로 볼 수 있는 도구들을 살펴보았다.
      • 이번에는 예제의 night 버튼과 day 버튼을 하나로 만들 것이며, 먼저 완성된 코드를 확인해보자.
      <input id="night_day" type="button" value="night" onclick="
    if(document.querySelector('#night_day').value === 'night') {
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white'; 
        document.querySelector('#night_day').value = 'day';
    } else {
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        document.querySelector('#night_day').value = 'night';
    }
">
      • 위 코드를 보면 처음 버튼에 night라고 적혀있고, 이것을 클릭하면 조건문이 동작하게 된다.
      • 만약 버튼의 이름이 night라면 야간모드로 바꾸고 버튼의 이름을 day로 바꾼다.
      • 그렇지 않을 경우 주간모드로 바꾸고 버튼의 이름을 night로 바꾼다.
      • 이렇게 간단하게 버튼 하나로 주간모드나 야간모드로 바꿀 수 있는 기능을 구현해보았다.

       

       

       

      18. 중복의 제거를 위한 리팩터링

      • 이번 장에서는 리팩터링(refactoring)에 대해 살펴보자.
      • 리팩터링이란 단어에서 팩터리(factory)는 '공장'이며, 리(re)는 '다시'라는 뜻으로 리팩터링이란 공장으로 다시 보내 개선한다는 뜻이다.
      • 코딩을 하고 나면 코드에 비효율적인 면이 생기기 마련이다. 그럼 동작하는 것은 그대로 두고 코드 자체를 효율적으로 만들어서 그 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업을 리팩터링이라고 한다.
      • 소프트웨어의 규모가 커지고 복잡해지면 틈틈히 리팩터링을 해야 좋은 프로그램을 만들 수 있다.
      • 앞서 만든 코드에서 리팩터링 사례를 확인해보자.
      <!-- 리팩터링 전 -->
<input id="night_day" type="button" value="night" onclick="
    if(document.querySelector('#night_day').value === 'night') {
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white'; 
        document.querySelector('#night_day').value = 'day';
    } else {
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        document.querySelector('#night_day').value = 'night';
    }
">

<!-- 리팩터링 후 -->
<input type="button" value="night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'night') {
        target.style.backgroundColor = 'black';
        target.style.color = 'white'; 
        this.value = 'day';
    } else {
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        this.value = 'night';
    }
">
      • 리팩터링 전의 코드는 만약 같은 버튼을 2개를 넣고 싶을 때 문제가 된다. id값이 중복되며 코드내의 아이디 선택자를 다 바꿔주어야 한다. 만약 버튼 갯수가 늘어나면 더욱 힘들어질 것이다.
      • 반면 리팩터링을 진행한 코드는 어디에 복사하여도 잘 동작하며, 코드 또한 간결해져 가독성이 좋다.
      • 특히 this라는 키워드는 onclick과 같은 이벤트 안에서 실행되는 코드에서는 현재 코드가 속해 있는 태그를 가리키도로고 약속돼 있는 특수한 키워드이다.
      • this를 사용함으로써 아이디 선택자도 필요없게 되니 유지보수 또한 편리해진다.
      • 유일하게 코딩을 잘하는 방법은 중복을 끝까지 쫓아가 다 없애버리는 것이다.

       

       

       

       

      해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

       

       

       

       

      반응형

      '개발 공부 > 생활코딩! HTML+CSS+JavaScript' 카테고리의 다른 글

      JS 편 - 6일차  (1) 2025.05.14
      JS 편 - 5일차  (1) 2025.05.13
      JS 편 - 3일차  (0) 2025.05.11
      JS 편 - 2일차  (0) 2025.05.10
      JS 편 - 1일차  (1) 2025.05.09

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바