드리프트 / Posts / 웹 개발 배우기 2편 - 자바스크립트 문자열과 메소드, 드디어 첫 앱 만들기

Created Fri, 19 Sep 2025 09:58:27 +0900 Modified Sat, 04 Oct 2025 22:19:42 +0900

웹 개발 배우기 2편 - 자바스크립트 문자열과 메소드, 드디어 첫 앱 만들기

‘웹 개발 배우기’ 시리즈의 두 번째 시간이 돌아왔는데요.

지난 1편에서는 자바스크립트의 숫자와 변수, 함수에 대해 알아봤습니다.

이번 챕터에서는 텍스트, 즉 ‘문자열’을 다루는 방법과 함께 우리의 첫 번째 애플리케이션을 직접 만들어 볼 거거든요.

텍스트를 위한 데이터 타입, 문자열

우리는 지금까지 숫자(8, 1.5 등)와 함수((x) => {return x} 등)라는 두 가지 데이터 타입을 만나봤습니다.

이제 또 다른 데이터 타입인 ‘문자열’에 대해 알아볼 차례인데요.

문자열은 0개 이상의 문자(텍스트 기호)로 이루어진 텍스트를 의미합니다.

문자열을 만들 때는 작은따옴표나 큰따옴표로 감싸주거든요.

"이것도 문자열";
"이것 또한 문자열";

물론 아무런 문자도 포함하지 않는 ‘빈 문자열’도 만들 수 있습니다.

"";
"";

여기서 흥미로운 점은 'abc'"abc"가 문법적으로는 다르지만 결국 같은 결과값을 만들어낸다는 점인데요.

이건 우리가 이전에 봤던 숫자 123.0123이 문법은 달라도 결국 같은 값을 나타내는 것과 비슷한 원리입니다.

문자열의 길이

> ''.length
0
> 'abc'.length
3

이렇게 문자열의 길이를 쉽게 확인할 수 있습니다.

문자열 연결하기 + 연산자

이걸 ‘문자열 연결’이라고 합니다.

> let str = '';
> str = str + '만나서';
> str = str + ' 반가워요.';
> str
'만나서 반가워요.'

함수 역시 문자열을 반환할 수 있는데요.

const sayHello = name => {
  return "안녕하세요 " + name + "님!";
};

이 코드를 콘솔에 복사해서 붙여넣고 함수가 어떻게 작동하는지 시험해 볼 수 있습니다.

> sayHello('테리')
'안녕하세요 테리님!'

중첩된 변수 객체와 프로퍼티

이렇게 변수가 다른 변수를 담고 있는 구조를 ‘객체(object)‘라고 부릅니다.

그리고 객체 안에 들어 있는 변수들은 그 객체의 ‘프로퍼티(property)‘라고 하거든요.

예를 들어 자바스크립트에는 Math라는 미리 정의된 객체가 있고, 그 안에는 원주율 값을 가진 PI라는 프로퍼티가 있습니다.

> Math.PI
3.141592653589793

이렇게 점(.)을 사용해서 객체 안의 프로퍼티에 접근할 수 있습니다.

프로퍼티에 담긴 함수, 메소드

> Math.sqrt(9)
3

Math.sqrt는 숫자의 제곱근을 계산하는 함수를 담고 있는 프로퍼티인데요.

이처럼 프로퍼티의 값이 함수일 경우, 특별히 ‘메소드(method)‘라고 부릅니다.

어떤 메소드들은 자신이 속한 객체의 내용을 바탕으로 결과를 만들어내기도 하거든요.

> 'hello'.toUpperCase()
'HELLO'

toUpperCase 메소드는 ‘hello’라는 문자열 객체의 내용을 대문자로 바꿔주는 역할을 합니다.

코딩을 위한 필수 도구, 텍스트 에디터

그래서 이 파일들을 만들고 수정하려면 ‘텍스트 에디터’가 필요합니다.

특히 개발자들을 위해 전문화된 텍스트 에디터를 ‘IDE(통합 개발 환경)‘라고 부르는데요.

웹 개발에 널리 쓰이는 인기 있는 IDE 두 가지를 소개해 드립니다.

무료로 사용할 수 있는 ‘비주얼 스튜디오 코드(Visual Studio Code)‘와 개인 비상업용으로 무료인 ‘웹스톰(WebStorm)‘이 대표적입니다.

IDE를 다운로드해서 설치한 뒤에, 제공되는 프로젝트 폴더를 열어 파일을 만들어보고 텍스트를 입력했다가 다시 지워보면서 사용법을 익혀보세요.

프로젝트 log-hello.html

웹 앱이란 간단히 말해 ‘프로그램이 내장된 웹 페이지’라고 할 수 있습니다.

아래 HTML 코드는 자바스크립트 코드를 포함하고 있는데요.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Log hello</title>
  </head>
  <body>
    <script type="module">
      const sayHello = name => {
        return "Hello " + name + "!";
      };
      const message = sayHello("Terry");
      // `message`의 값을 콘솔에 기록합니다:
      console.log(message);
    </script>
  </body>
</html>

여기서 <script> 태그 안에 있는 코드가 바로 자바스크립트 코드입니다.

마지막 두 줄은 우리가 처음 보는 내용인데요.

//로 시작하는 줄은 ‘주석’이라고 합니다.

자바스크립트는 // 기호를 만나면 그 줄의 끝까지 모든 내용을 무시하는데요.

덕분에 우리는 컴퓨터가 아닌 사람을 위해 코드에 대한 설명을 남길 수 있습니다.

그리고 console.log(message);message라는 변수에 담긴 값을 콘솔에 출력하라는 명령어입니다.

이 HTML 파일을 브라우저에서 열고 개발자 도구 콘솔을 확인하면 ‘Hello Terry!‘라는 메시지가 출력된 것을 볼 수 있을 겁니다.

프로젝트 log-clicks.html

아래와 같이 id가 ’link’인 < a > 태그가 있다고 가정해 봅시다.

<a id="link" href="">Click here</a>

그리고 이 링크가 클릭될 때마다 콘솔에 메시지를 찍어주는 자바스크립트 코드입니다.

let count = 1;
const link = document.querySelector("#link");
link.addEventListener("click", event => {
  event.preventDefault(); // (A)
  console.log("Click " + count); // (B)
  count = count + 1;
});

2번째 줄의 document.querySelector('#link')는 HTML 문서에서 id가 ’link’인 요소를 찾아오라는 뜻입니다.

그리고 3번째 줄의 addEventListener는 ‘이벤트 리스너’를 추가하는 메소드인데요.

‘click’ 이벤트가 발생할 때마다, 즉 사용자가 링크를 클릭할 때마다 두 번째 인자로 전달된 함수를 실행하라는 의미입니다.

A라인의 event.preventDefault()는 링크를 클릭했을 때 페이지가 이동하는 기본 동작을 막아주는 역할을 하거든요.

이렇게 하면 클릭할 때마다 콘솔에 ‘Click 1’, ‘Click 2’와 같이 숫자가 1씩 증가하며 기록되는 것을 볼 수 있습니다.

숫자 123과 문자열 ‘123’의 차이

그렇다면 숫자 123과 문자열 '123'은 무슨 차이가 있을까요?

123은 숫자라서 산술 연산을 할 수 있지만, '123'은 문자열이라 다른 문자열과 연결하는 등의 작업만 가능합니다.

이 차이는 ‘강아지’와 ‘강아지 사진’의 차이와 비슷한데요.

사진이 강아지처럼 보이긴 하지만, 우리가 사진을 데리고 산책을 할 수는 없는 것과 같습니다.

마찬가지로 문자열 '123'은 숫자처럼 보이지만 숫자는 아닙니다.

숫자와 문자열 변환하기

String() 함수는 숫자를 문자열로, Number() 함수는 문자열을 숫자로 바꿔줍니다.

> String(123)
'123'
> Number('123')
123

또한 플러스(+) 연산자는 다른 한쪽이 문자열일 경우, 숫자를 자동으로 문자열로 변환해서 연결하거든요.

> '구매한 사과 개수: ' + 3
'구매한 사과 개수: 3'

이런 특징을 잘 알아두면 유용합니다.

프로젝트 display-clicks.html

이제는 웹 페이지에 직접 정보를 표시해 볼 건데요.

클릭 횟수를 보여줄 <span> 태그를 HTML에 추가하고, 자바스크립트 코드를 조금 수정해 보겠습니다.

<div>클릭 횟수: <span id="clickCount">0</span></div>
const clickCountElement = document.querySelector("#clickCount"); // (A)

// ... 이벤트 리스너 내부 코드 ...
clickCountElement.innerText = String(count); // (B)

A라인에서 id가 ‘clickCount’인 <span> 요소를 가져왔습니다.

그리고 B라인에서는 console.log 대신, count 값을 문자열로 변환해서 해당 요소의 .innerText 프로퍼티에 저장했는데요.

.innerText는 HTML 요소의 텍스트 내용을 바꾸는 특별한 프로퍼티입니다.

이제 링크를 클릭하면 콘솔이 아닌 웹 페이지의 숫자가 직접 바뀌는 것을 확인할 수 있습니다.

프로젝트 temperature-converter.html

한쪽 입력 필드에 숫자를 입력하면 다른 쪽에 변환된 결과가 나타나는 방식입니다.

HTML에는 id가 각각 ‘celsius’와 ‘fahrenheit’인 두 개의 <input> 필드가 있습니다.

const celsius = document.querySelector("#celsius");
const fahrenheit = document.querySelector("#fahrenheit");

const celsiusToFahrenheit = c => {
  return c * (9 / 5) + 32;
};

celsius.addEventListener("change", () => {
  const c = Number(celsius.value); // (B)
  fahrenheit.value = String(celsiusToFahrenheit(c)); // (C)
});

이번에는 ‘change’라는 이벤트를 사용했는데요.

이 이벤트는 입력 필드에 값을 입력하고 엔터를 치거나 다른 곳을 클릭했을 때 발생합니다.

이벤트가 발생하면, B라인에서는 celsius 입력 필드의 내용(.value)을 문자열로 가져와 숫자로 변환합니다.

그리고 C라인에서는 그 숫자를 화씨로 변환한 뒤, 다시 문자열로 바꿔 fahrenheit 입력 필드의 .value에 넣어주는 거죠.

이렇게 입력 필드의 .value 프로퍼티는 값을 읽어올 수도, 값을 넣어 화면을 변경할 수도 있습니다.