프로그래밍 일기 — JavaScript (2편)

16 min readJul 4, 2023

마법주문 파헤치기는 계속된다.

#JavaScript, #JQuery, #웹프로그래밍, #프론트엔드, #backtick, #반복문, #조건문

JavaScript에대한 기초는 어느 정도 학습했지만, 아직 본격적으로 프로그래밍에 활용해 보지는 못했다. 과연 어떻게 이 마법주문을 실제 브라우저상에서 다룰 수 있을까? 그리고 이 것으로 실제로 어떤 것을 구현해 볼 수 있을까? 이런 궁금증이 생기기 시작했다.

JavaScript에 관해 공부하던 중 JQuery라는 것을 알게되었다. 이 것은 마치 Java에서 프레임워크(Framework)의 개념처럼 웹 상에서 프로그래밍에 필요한, 자주 사용되는 기능들을 미리 구현한 라이브러리라 할 수 있다. HTML의 요소들을 보다 간편하게 조작할 수 있게 해주는, JavaScript 상에서는 매우 훌륭한 마법 백과사전이라 할 수 있다.

JQuery

JavaScript로 모든 기능을 구현하지 않고, 자주 쓰이는 기능들을 미리 구현해 놓은 라이브러리라고 볼 수 있다. JavaScript기반이기 때문에 당연히, 해당 언어를 활용하여 구현되었다. 예를 들어 버튼의 글씨를 바꾸는 작업을 일일히 매번 JavaScript로 쓸 수도 있겠지만, 차라리 이 것을 특정 객체로 만들어 필요할 때마다 가져올 수 있게 하는 것이 더 효율적일 수 있다. 코드가 복잡해 질 수록 이러한 반복적인 기능을 구현하는 것이 더 소모적일 수 있기 때문이다.

뿐만아니라, 브라우저간 호환성 문제가 있을 수 있다. 어떤 기능은 인터넷 익스플로러에서 되는데, 어떤 기능은 크롬에서 안될 수도 있다. 이런 상황을 피하기 위해 범용적으로 활용될 수 있는 라이브러리를 정의해놓고, 여기서 브라우저에 관계없이 가져다 쓸 수 있도록 하는 도구가 필요하기도 했다. JQuery는 이러한 관점에서 웹 개발자들에게 매우 유용할 수 밖에 없으며, 실제로도 프론트엔드 엔지니어들에게 널리 활용되고 있다.

JavaScript와 JQuery가 어떻게 다른지를 비교하기 위해 아래 예제를 보자. JavaScript를 쓴다면 아래와 같이 코드가 쓸데없이 길어지며, 가독성을 떨어뜨린다. 반면, JQuery를 활용할 경우, 문법이 훨씬 더 간결해진다. 간결한 문법은 다른 사람들이 읽기에도 편하다.

// JavaScript vs JQuery 예제
// JavaScript 예
document.getElementById("element").style.display = "none";
// JQuery 예
$('#element').hide();

JavaScript상에서 JQuery를 활용하는 방법은 Java에서와 같이 활용할 라이브러리를 import 하는 것이다. 이전에 우리가 부트스트랩(Bootstrap)을 학습할 때, 분명히 아래와 같은 방법으로 부트스트랩을 가져올 때 JQuery를 포함시켰었다. 이 방법은 Google CDN(Content Delivery Network)를 활용하여 가져오는 방법이다. 혹은, JQuery를 다운로드하여 현재 HTML 페이지가 있는 똑같은 경로에 위치시킨 후, 조금 더 간결한 문법으로 가져올수도 있다.

<!-- 일반적인 JQuery 가져오기 방법 -->

<html>
  <head>
    ...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    // 위와 같이 script내 src 매개변수를 활용해 Google CDN으로 JQuery를 가져온다.
    </script>
    <script src="jquery-3.5.1.min.js">
    // 혹은 jQuery를 다운로드한 후 위와 같이 좀 더 간결한 문법으로 가져올 수 있다. 
    </script>
  </head>
  <body>
    ...
  </body>
</html>

JavaScript 활용 예제

아래 예제에서는 “결과 확인하기!”라는 버튼이 하나 구현되어있다. 여기서 여러 값들을 출력할 수 있는 함수를 구현하려고한다. 이를 위해서 <script> 태그내 function checkResult(){} 라는 함수를 정의하였다. 브라우저에서 경고창을 띄워주는 alert() 기본함수를 활용했다. 또한 개발자도구 상에서 특정 값을 출력할 수 있는 console.log() 를 활용하였다.

또한 리스트 및 딕셔너리를 활용하여 특정한 데이터를 추가해 보았다.

<!-- HTML 예제 (script 태그내 JavaScript 작성) --> 

<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
    .button-part {
        display: flex;
        height: 50px;
    }
</style>
<script>
  // JavaScript 예제
    function checkResult() {
      alert("함수 출력!")
      console.log("함수 출력!")
    }
    // 리스트와 딕셔너리의 활용 예제
    let membersFruitList = [
        {
            'name': 'lee',
            'fav': '🍇'
        },
        {
            'name': 'hwang',
            'fav': '🍒'
        },
        {
            'name': 'joo',
            'fav': '🍊'
        }
    ]
</script>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr />
    <br>
    <h2>1. 함수</h2>
    <div class="button-part">
        <button onclick="checkResult()">결과 확인하기!</button>
    </div>
    <div class="list-part">
        <h2>2. 리스트</h2>
        <div id="q1"></div>
    </div>
    <div class="dict-part">
        <h2>3. 딕셔너리</h2>
        <div id="q2"></div>
    </div>
    <div>
        <h2>4. 리스트 딕셔너리</h2>
        <div id="q3"></div>
    </div>
</body>

</html>

JavaScript 기능으로 구현한 것들이 그대로 브라우져와 개발자 도구 상에서 구현된다.

JQuery활용 예제

CSS에서는 매서드를 활용하기 위해 class 매개 변수를 활용했는데, jQuery에서는 일반적으로 id 매개 변수를 활용하여 특정한 태그(<input>, <button>, <div>, …)를 참조하도록 구성한다. 즉, 각 태그의 고유한 요소를 참조하기 위해 있는 속성이다. class 는 하나 이상의 태그에 활용가능하지만, 한 개에만 고유하게 활용할 수 있는 것은 id 밖에 없기 때문이다. 주로 아래와 같은 문법으로 활용된다. HTML 상에서는 참조할 태그의 id 매개변수에 값을 지정하고, 이 값을 JQuery 상에서 # 부호를 활용해 해당id 값을 가진 태그를 참조한다.

<!-- id 기본 문법 (HTML) --> 
<div class="list-part">
    <h2>2. 리스트</h2>
    <div id="q1"></div> 
</div>

// id 기본 문법 (JQuery)
$('q1').text(membersFruitList) // 아이디가 'q1'인 태그에 membersFruitList의 값을 넣기

그렇다면 위 문법을 활용하여 JQuery를 활용해보자. 아래 예제에서는 호출시 각 id값을 가지고 있는 태그에 데이터를 넣는 .checkResult(){} 라는 매서드를 정의했다. 이 매서드가 button-part 라는 CSS매서드를 활용하여 꾸며진 button이 클릭될 시(onclick) 호출될 수 있도록 구성되었다.

<!-- JQuery 활용 예제 (HTML) -->

<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
    /* 버튼의 모양을 조정하는 .button-part{} CSS매서드 정의 */
    .button-part {
        display: flex;
        height: 50px;
    }
</style>
<script>
    // checkResult() 함수를 통해 각 ID를 가진 태그에 데이터를 삽입
    function checkResult() {
        let a = ['사과', '배', '감', '귤']
        $('#q1').text(a[1]) // id = 'q1'에 a 배열의 두 번째 값을 넣기 
        let b = { 'name': '철수', 'age': 35 }
        $('#q2').text(b['name']) // id = 'q2'에 b 배열의 키 'name'에 해당하는 값을 넣기
        let c = [
            { 'name': '철수', 'age': 35 },
            { 'name': '영희', 'age': 35 }
        ]
        $('#q3').text(c[1]['age']) // id = 'q2'에 c 배열의 키 'age'에 해당하는 값을 넣기
    }
</script>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr />
    <br>
    <h2>1. 함수</h2>
    <!-- 버튼에 button-part CSS매서드를 활용 -->
    <div class="button-part">
        <!-- 버튼 클릭시 checkResult() 함수 호출 -->
        <button onclick="checkResult()">결과 확인하기!</button>
    </div>
    <div class="list-part">
        <h2>2. 리스트</h2>
        <!-- id = 'q1' 를 가진 태그--> 
        <div id="q1">테스트</div>
    </div>
    <div class="dict-part">
        <h2>3. 딕셔너리</h2>
        <!-- id = 'q2' 를 가진 태그-->
        <div id="q2">테스트</div>
    </div>
    <div>
        <h2>4. 리스트 딕셔너리</h2>
        <!-- id = 'q3' 를 가진 태그-->
        <div id="q3">테스트</div>
    </div>
</body>

</html>

“결과 확인하기!” 버튼을 클릭하면, 각 구성 요소들에 정의한 데이터가 입력된다.

반목문과 조건문 활용

내가 원하는 데이터를 일일히 인덱스나 키 값으로 참조해서 봐야한다면 불편할 것이다. 반복적으로 배열의 요소 값들을 출력하는 방법이 있다면 훨씬 편할 것이다. Java에서처럼, 반복문을 활용해 아래와 같이 개발자도구에서 배열의 요소들을 출력해볼 수 있다.

이전에 활용한 membersFruitList 의 개별적인 요소들을 출력하기 위해 아래 .forEach() 라는 매서드를 활용할 수 있다.

// 반복문 예제

// 데이터 선언
let membersFruitList = [
        {
            'name': 'lee',
            'fav': '🍇'
        },
        {
            'name': 'hwang',
            'fav': '🍒'
        },
        {
            'name': 'joo',
            'fav': '🍊'
        }
    ]

// 반목문 활용하여 데이터 출력

membersFruitList.forEach((a) => {console.log(a)})

이번에는 조건문을 작성해 보자. Java에서는 if(조건){수행 코드} 의 문법을 통해 특정 조건에 맞는 상황에서 원하는 작업을 수행할 수 있도록 했다. JavaScript에서도 같은 문법을 활용한다. 역시 else{} 를 활용해 조건에 맞지 않는 상황에 수행할 코드도 정의가능하다. 조건문을 .foreach() 반복문 내 활용할 수도 있다.

// 조건문 예제

// if 문 문법
// if (조건) {
// 조건이 맞을 경우 수행할 코드
// } else {
// 조건에 맞지 않을 경우 수행할 코드
// }

// JavaScript 조건문 활용

let age = 35

if (age > 20) {
  console.log('성인')
}  else {
    console.log('청소년')
}

>> "성인"

// 반복문과 혼합
membersFruitList.forEach((a) => {
  if (a['name'] == 'lee'){
      console.log(a['name'], ", 당신이 좋아하는 과일은 포도입니다.")
  } else {
      console.log(a['name'], ", 당신이 좋아하는 과일은 포도가 아닙니다.")
  }
})

>> 

lee , 당신이 좋아하는 과일은 포도입니다.
hwang , 당신이 좋아하는 과일은 포도가 아닙니다.
joo , 당신이 좋아하는 과일은 포도가 아닙니다.

심화 JQuery 연습

자 이제 조금 더 심화된 JQuery를 연습해보자. JQuery에서 정의한 매서드를 한번 활용해보자. 그 전에 알아야할 것이 몇개 있다.

먼저 “``"기호는 Backtick(백틱)이라고하여, HTML 요소를 JavaScript상에서 표현하기 위해 사용된다. 문자와 변수를 함께 쓸 수 있게 하는 특수기호이다. 즉, 문자 내에서 변수에 들어있는 값을 출력하고자 할 때, 이를 용이하게 할 수 있게 해준다. 예를 들어서 아래와 같이 쓸 수 있다. ${출력할 변수 이름} 의 문법이다.

let my_result = `${var_1} 는 ${var_2}다.`

위 문법을 활용하여 코드를 작성해보자. 아래는 백틱을 활용한 예제이다. 개발자 도구에서 JavaScript를 활용하여 리스트를 생성해본다. 개발자 도구 상에서 먼저 people 이라는 이름과 나이 정보가 담긴 배열을 정의하고, 이를 .forEach(){} 반복문을 활용하여 순차적으로 이름과 나이를 출력한다. 백틱을 활용하여 문자열 사이에 출력하고자하는 데이터를 넣을 수 있다. 아래 JavaScript 코드는 HTML 상에서 <script> 태그내 function checkResult (){} 매서드안에 들어간다는 것에 주의하라(이 함수는 아래 버튼 onclick시 발동된다.)

<!-- JQuery 심화 예제 (HTML) -->

<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
    function checkResult() {
        // 아래 코드가 여기 들어간다.
    }
</script>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr />
    <br>
    <h2>1. 함수</h2>
    <!-- JavaScript 함수 활용할 태그 (버튼이 눌리면 호출된다.)-->
    <div class="button-part">
        <button onclick="checkResult()">결과 확인하기!</button>
    </div>
    <!-- 리스트 생성 -->
    <div class="list-part">
        <h2>2. 붙이기</h2>
        <div id="q1">
            <p>포도</p>
            <p>사과</p>
            <p>수박</p>
        </div>
    </div>
    <!-- 리스트 생성 -->
    <div class="list-part">
        <h2>3. 붙이기</h2>
        <div id="q2">
            <p>철수는 30살입니다.</p>
            <p>영희는 35살입니다.</p>
            <p>길동은 40살입니다.</p>
        </div>
    </div>
</body>

</html>

_______________________________________________________________

// 개발자 도구 상에서 실행할 JavaScript

// 아래 코드는 function checkResult{} 매서드 안에 들어감

    // 배열을 정의한다.
    let people = [
        { 'name': '영심', 'age': 24 },
        { 'name': '하늬', 'age': 30 },
        { 'name': '둘리', 'age': 12 },
        { 'name': '까치', 'age': 15 },
        { 'name': '지니', 'age': 18 },
        { 'name': '코난', 'age': 36 }
    ]

    //JQuery 매서드 .append() 활용하여 요소 추가
    
    // ``는 백틱(backtick)으로써 JavaScript상에서 HTML태그를 표현하기 위해 사용될 수 있다.
    // .forEach() 매서드를 활용하여 리스트의 요소들을 출력한다.
    people.forEach((a) => {console.log(`${a['name']}`, "는", `${a['age']}`, "살이다.")})


>>

영심 는 24 살이다.
하늬 는 30 살이다.
둘리 는 12 살이다.
까치 는 15 살이다.
지니 는 18 살이다.
코난 는 36 살이다.

팁: append() 를 활용하면 리스트에 요소들을 추가할 수 있다. 백틱을 활용하여 아래와 같이 html요소를 추가하는 것도 가능하다. 아래 코드는 id = q2를 가진 태그에 temp_html요소를 추가한다는 의미다. 아래 코드를 <script> 태그내 function checkResult(){} 내 포함시켜 실행해 볼 수 있다.

// append()를 활용하여 HTML요소를 JavaScript로 추가하기
let temp_html = `<p>논개는 20살</p>`
$('#q2').append(temp_html)