프로그래밍 일기 — JavaScript
브라우저의 그리기 마법 주문
#브라우저, #JavaScript, #프론트엔드, #웹프로그래밍, #리스트, #딕셔너리, #함수, #연산자
웹 프로그래밍의 기초가 HTML과 CSS로 이루어져있고, HTML은 웹사이트의 뼈대, CSS는 웹사이트의 인테리어를 담당한다는 것을 이제 이해했다. 그렇다면 이 HTML과 CSS로 이루어진 웹 사이트에서 실질적으로 데이터를 보여주고 유저와 상호작용하여 유저가 원하는 것을 출력하는 주체는 누구일까? 분명 HTML과 CSS어디를 봐도 유저와 상호작용을 하면서 무언가 연산을 하거나 데이터를 처리하는 부분은 아직 보이지 않았다. 오늘은 그 궁금증을 풀 것이다.
JavaScript란?
브라우저에 유저가 원하는 방식으로 처리된 데이터를 그려주는 마법의 주문이다. HTML은 유저에게 보여주어야할 기본 뼈대이고 CSS는 그 뼈대를 꾸며서 유저가 보아야할 페이지의 시각적 요소들을 정의하지만, 그 안에서 데이터를 어떻게 처리해서 어떤 방식으로 보여주어야하는지에 대한 문제를 담당하지 않는다. 바로 이 역할을 JavaScript가 담당하는 것이다.
JavaScript는 이전에도 소개했듯이, 웹에서만 활용되는 객체지향언어로써, Java와 같은 객체지향 프로그래밍 언어가 웹 세계안으로 들어왔다고 이해하면 좋다(따라서 웹 세계 밖으로 벗어날 수 없는 존재이다.). 실질적으로 유저가 원하는 데이터를 백엔드 서버와 협력해 처리하여 유저가 원하는 방식으로 보여주는 역할을 한다. 서버는 클라이언트에게 데이터를 전달할 때 사실 HTML + CSS 만 전달하는 것이 아니라 이 JavaScript도 전달하여 어떤 방식으로 그 안에 있는 데이터를 보여줘야하는지에 대한 정보도 같이 준다.
여기서 이런 의문점이 생길 수 있다. 왜 브라우저는 Java/Python 같은 객체지향언어를 그대로 사용하지 않는 것일까? 굉장히 합리적인 의심이다. 다만, 웹 프로그래밍의 경우 그 표준들이 일반적인 어플리케이션 개발과 다를 수 있다. 예를 들어 웹에서 활용되는 HTTP 및 TCP/IP같은 프로토콜이 자동차 등에서 활용되는 RS-232같은 통신 규약과 100% 같을 수는 없을 것이다. 웹 프로그래밍은 나름의 표준이 계속 만들어져왔고 지금은 다른 분야의 개발과 비슷한 점도 있지만 차이가 나는 점도 많다. 이러한 웹 세계에서의 특수성과 필요성을 계속 반영하면서 업데이트 되어 온 것이 JavaScript이고 모든 웹서버들은 HTML, CSS, JavaScript를 표준으로 삼아 발전해왔다. 이러한 역사적인 이유로 JavaScript가 많이 활용되게 되었다. 그렇기에 JavaScript는 Java등과 이름은 비슷해 보이지만 전혀 다른 언어이다. 두 언어가 활용되는 영역이 아예 다르기 때문이다. JavaScript는 프론트 엔드 언어이며, Java는 백엔드 언어다. 결정적으로 JavaScript는 웹 밖의 영역에서 사용될 수 없지만, Java는 훨씬 더 범용성이 크다.
JavaScript 예제
이전에 HTML을 확인해 보면 <script> 라는 태그가 있었음을 기억할 수 있는데, 바로 이 태그 안에 JavaScript로 쓰여진 코드가 들어간다. 드디어 수수께끼 같던 이 태그에 대한 궁금증이 풀렸다.
기본적인 JavaScript함수 문법은 아래와 같다. Java를 공부했다면 알겠지만, Java의 함수 문법과 크게 다르지 않아 보인다. Java처럼 코멘트가 필요할 시에 // 를 활용한다.
[매서드 타입] [매서드/변수 이름] (함수 동작 조건) {수행할 코드}
아래는 함수 예제이다. 이전에 활용한 코드를 재활용하여 간단한 함수를 정의하고, 이를 HTML상에서 활용해 볼 수 있다. <head> 부모태그내<script>자녀태그에서 간단히 Hello World! 를 출력하는 함수를 정의했고, 이를 아래 <body>부모태그내 <button> 자녀태그에서 onclick 매개변수에 정의해 활용했다. 적용된 버튼을 클릭하면 이 함수를 호출한다는 의미다.
// 기본 JavaScript 함수 예제
// 기본 함수 문법
// function hey(){
// alert('안녕!');
// }
<! -- HTML 파일 예제 (script 태그내 JavaScript함수 정의) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<!-- 이 곳에 JavaScript 코드가 들어간다. -->
<script>
// 간단한 "Hello World!" 출력 함수
function hello() {
alert("Hello World!");
}
</script>
</head>
<body>
<div Id="1" class="wrap">
<div Id="2" class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button type="button" class="btn btn-primary">로그인하기</button>
<form action="http://www.foo.com" method="POST">
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">이메일</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</label>
</div>
<div class="mybtn">
<!-- 버튼을 클릭하면 "hello()" 함수를 호출한다. -->
<button type="button" class="btn btn-dark" onclick="hello()">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
</form>
<div class="mycards" style="width: 18rem;">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072821_1280.jpg" class="card-img-top" s>
<div class="card-body">
<h5 class="card-title">당신이 좋아하는 책은 무엇인가요?</h5>
<h6 class="card-subtitle mb-2 text-muted">당신의 인생책을 꽃아줘요!</h6>
<p class="card-text">이번 여름은 책속으로의 여행 어떠신가요?</p>
<a href="#" class="card-link">내 인생책은...</a>
<a href="#" class="card-link">좋아하는 책이 없어요</a>
</div>
</div>
</div>
</body>
</html>
JavaScript 문법
JavaScript를 가장 빠르게 해 볼 수 있는 방법은 Chrome의 개발자 도구(Developer Tool)을 활용하는 것이다. 이 도구의 목적이 본래 Console창을 통해 브라우저의 웹 페이지에서 JavaScript코드를 빠르게 테스트해 볼 수 있게 하는 것이다. 그래서 이것을 개발자 도구라고 부르는 것이다. 새로고침할 경우 모든 기록이 삭제되는 점만 유의하자. MacOS에서는 단축키 F12를 누르면 바로 볼 수 있다.
아래는 console.log(변수1, 변수2, …)의 예제이다. 이 코드는 콘솔창에 괄호 안 값을 출력해 주는 매서드다. 개발자가 결과값을 바로 출력해 볼 수 있는 메서드라고 볼 수 있다. 변수의 수는 원하는 만큼 입력할 수 있다.
JavaScript상에서 변수를 선언하는 방법은 무엇일까? 바로 let 키워드를 활용하는 것이다. 주목할 것은 한번 let 을 활용해 선언을 한다면 다시 선언할 필요 없이 값을 넣을 수 있다는 장점이 있다는 것이다.
아래는 JavaScript상에서 기본적인 연산을 하는 예제이다. 변수를 선언한 후에, 한번 더 선언하지 않고 바로 사용이 가능하다는 것을 알 수 있다. 변수의 이름을 지을 때 첫 번째 단어와 두 번째 _ 를 활용하는 snake case를 활용할 수도 있고 Java처럼 두 번째 단어의 첫 글자는 대문자를 쓰는 camel case를 쓸 수도 있다. 주의할 것은 다른 사람이 무슨 목적인지 단번에 알수 있도록 최대한 직관적으로 쓰는 것과 띄어쓰기를 포함 다른 특수문자의 활용은 안된다는 것이다. 만약 문자 값을 더할 경우 문자들이 그대로 합쳐지며, 문자값과 숫자값을 더할 때는 숫자값이 문자화되어 문자값과 합쳐진다.
// 기본 변수 선언 및 연산 예제
// let number = 7 // (최초 변수 선언)
// number = "any" // (이후 사용 시 다시 선언할 필요가 없다.)
let a = 1
let b = 2
a+b // 3
a/b // 0.5
a-b // -1
a*b // 2
b%a //
let last_name = "Kahn" // 변수 이름에 snake case를 활용
let firstName = "Billy" // 변수 이름에 camel case 활용
firstName + last_name // "BillyKhan"
firstName + a // "Billy1" (숫자를 문자로 바꾼다.)
JavaScript 자료형
JavaScript는 웹 안에서만 사용이 가능한 언어지만, 일반적으로 Java와 같은 백엔드 언어의 특징을 거의다 가지고 있다. 예를 들어 객체 지향언어로 활용할 수 있는 일반적인 자료형을 거의 대부분 지원한다. 자료형은 컴퓨터 공학적인 개념으로써, 모든 언어에서 데이터를 다룰 때 중요하다. 따라서 이번에는 JavaScript로 활용 가능한 자료형에 대해 리뷰해보자. 위와 마찬가지로 개발자 도구 상에서 바로 입력해서 결과를 볼 수 있다.
List(리스트)
순서를 가지고 있는 배열의 형태이다. 아래의 예제와 같이 사용가능하다.
// 리스트 예제
let a_list = [] // 값이 없는 리스트 초기화
let b_list = [1, 2, 'hey', 3]
let b_list[1] // 2
let b_list[2] // 'hey'
b_list.push("안녕") // 리스트에 값을 넣기 (가장 뒤에 갚이 들어간다.)
b_list // [1, 2, "hey", 3, "안녕"]이 된다.
b_list.length // 5 (리스트의 크기를 출력)
Dictionary(딕셔너리)
Java에서는 Map(맵)이라는 자료구조라고도 불린다. key(키):value(값) 의 쌍으로 이루어진 자료형이다.
let a_dict = {} // 데이터가 없는 딕셔너리 초기화
let b_dict = {'name': 'Jack', 'age': 34} // 키 값을 모두 동시에 선언
b_dict['name'] // 'Jack'
b_dict['age'] // 21
b_dict['height'] = 185 // "키:값"을 딕셔너리에 넣는다.
b_dict // 전체 딕셔너리 출력 {'name': 'Jack', 'age': 34, 'height': 185}
리스트 & 딕셔너리
리스트와 딕셔너리를 혼합할 수도 있다. 이러한 형태의 데이터는 배열의 각 위치마다 특정 키값을 가진 값이 각각 필요할 경우에 유용하다. 예를 들어 한 가게에서 손님들 중 30대 이상의 사람들에게 할인 쿠폰을 제공하는 프로모션을 하려고한다. 이를 위해서는 프로모션에 참여를 원하는 손님의 이름과 연령대 정보가 가장 먼저 필요할 것이다. 손님의 이름과 나이 정보가 각각 한 쌍으로 저장이 되어야할 것이다. 이러한 정보가 한 쌍씩 한 곳에 저장을 한다면, 리스트 하나에 딕셔너리를 {'이름': '홍길동', '나이': 30}와 같은 식으로 저장을 할 수 있을 것이다.
이렇게 리스트와 딕셔너리를 혼합하여 사용하는 이유는 let 을 활용하여 개별적인 정보를 각각 다른 변수를 이용하여 저장하는 것이 비효율적이기 때문이다. 예를 들어 아래의 예를 보자.
let name_1 = ‘John’;
let age_1 = 40;
let name_2 = ‘Sam’;
let age_2 = 38;
위 처럼 작성한다면 가독성도 떨어질 뿐만 아니라 값마다 변수를 선언해야 하기 때문에 컴퓨터 메모리 면에서도 매우 비효율적이다. 따라서 아래와 같이, 리스트와 딕셔너리를 활용한다면 한번에 필요한 데이터를 지정하기도 훨씬 쉬울 뿐만 아니라 다른 사람의 입장에서도 훨씬 읽기 편하다. 더군다나 리스트라면 별도로 let 키워드를 쓰지 않아도 .push(추가할 데이터) 매서드로 새로운 데이터를 쉽게 추가할 수 있다.
// 리스트와 딕셔너리 데이터를 동시에 모두 선언
names = [{'name':'John','age':40},{'name':'Sam','age':38}] // 리스트 내 딕셔너리 선언
// names[0]['name']의 값은 'John'
// names[1]['name']의 값은 'Sam'
new_name = {'name':'Steve','age':37} // 새로운 딕셔너리 선언
names.push(new_name) // .push() 매서드로 리스트에 딕셔너리 넣기
// names의 값은 [{'name':'John','age':40},{'name':'Sam','age':38},{'name':'Steve','age':37}]
// names[2]['name']의 값은 'Steve'
함수(Function)와 연산자(Operator)
Java와 마찬가지로 JavaScript역시 기본적으로 제공하는 여러가지 함수들이 있다. 위에서 활용한 리스트의 .push() 함수도 기본적으로 JavaScript내에서 구현된 대표적 연산 함수들 중 하나로 볼 수 있다. 이처럼 JavaScript에는 미리 만들어진 유용한 함수들이 많다. 따라서, 먼저 구현하여 만들어 쓰기전에 기존의 함수가 이미 존재하는지 구글 검색을 통해 찾아보는 것이 좋다. 새로운 함수를 구현하는 것도 나쁘지는 않지만, 이미 존재하는 것을 활용하여 자신의 필요에 맞게 수정하는 것이 좀 더 시간 효율적일 수 있기 때문이다.
함수 뿐만이 아니라, 기본적인 연산자(+/-/*, 등등)들도 제공된다. 예를 들어 나눗셈의 나머지를 구하고 싶다면 / 연산자가 아닌 % 연산자를 활용할 수 있다.
// 함수와 연산자 예제
let a = 2
let b = 3
b % a // 나눗셈의 나머지 연산 부호 - 결과: 1
// 문자열 나누기 예제 - 빈칸(' ')을 기준으로 문자열을 나눈다.
let name = 'Clark Kent'
// .split(문자열을 나눌 기준 문자) 기본함수 활용
let result = name.split(' ') // ['Clark', 'Kent']
result[0] // Clark
result[1] // Kent
JavaScript마법주문 파헤치기는 계속된다.
참조:
(1) https://pixabay.com/photos/quote-create-your-own-magic-feathers-5543587/
