이번 포스팅은 ‘웹 개발 배우기’ 시리즈의 일부인데요.
프로그래밍 경험이 전혀 없는 분들을 위해 자바스크립트(JavaScript)로 웹 앱을 만드는 방법을 알려드리는 시리즈입니다.
이번 챕터에서는 자바스크립트의 가장 첫걸음을 떼면서 숫자, 변수, 그리고 함수에 대해 알아볼 거거든요.
다음 챕터부터는 실제로 유용한 앱을 만들면서 배우겠지만, 이번에는 간단한 상호작용을 통해 워밍업을 하는 시간이라고 생각하시면 됩니다
브라우저 콘솔 #
자바스크립트 프로그램을 실행하려면 ‘자바스크립트 엔진’이라는 것이 필요한데요.
다행히도 모든 웹 브라우저에는 자바스크립트 엔진이 내장되어 있습니다.
이 엔진과 상호작용하는 한 가지 방법이 바로 브라우저의 ‘콘솔’(자바스크립트 셸이라고 생각하시면 됩니다)을 이용하는 겁니다.
우선, 지금 사용하고 계신 웹 브라우저의 콘솔을 여는 방법을 먼저 알아봐 주세요.
웹 개발자에게는 스스로 무언가를 알아내는 능력(웹 검색 등)이 아주 중요하거든요.
콘솔은 어떻게 작동할까요? #
콘솔은 우리와 자바스크립트 사이에 끝없는 대화를 가능하게 하는데요.
우리가 자바스크립트 코드 형태로 입력을 제공하면, 웹 브라우저는 그에 상응하는 출력, 즉 결과를 표시합니다.
숫자 자바스크립트를 계산기처럼 사용하기 #
가장 간단한 자바스크립트 코드인 ‘숫자 표현식’, 즉 숫자가 포함된 “공식"부터 시작해 보겠습니다.
예를 들어, 자바스크립트는 숫자를 더할 수 있습니다.
> 3 + 2
5
지금부터 콘솔 상호작용은 위와 같이 표시될 건데요.
첫 줄 시작의 >는 우리의 입력을 나타내며, 우리가 직접 입력하는 부분은 아닙니다.
두 번째 줄은 브라우저의 출력입니다.
연산자와 피연산자 #
지금까지 우리는 덧셈 연산자 +를 사용했는데요.
그 왼쪽과 오른쪽에 있는 값들을 ‘피연산자’라고 부릅니다.
더 많은 숫자 연산자 #
자바스크립트에는 숫자를 위한 더 많은 연산자들이 있는데요.
뺄셈(-), 곱셈(*), 나눗셈(/) 등이 있습니다.
더 긴 숫자 표현식 #
더 긴 숫자 표현식도 작성할 수 있는데요.
> 1 + 2 * 3
7
어떤 연산자가 먼저 적용될지 즉시 명확하지 않을 수 있기 때문에, 이럴 때는 괄호를 사용해서 순서를 명확히 해주는 것이 좋습니다.
> (1 + 2) * 3
9
자바스크립트 코드는 어떻게 실행될까요? #
자바스크립트 프로그램을 실행하려면 자바스크립트 엔진이 필요한데요.
우리는 그 엔진에 자바스크립트 ‘소스 코드’를 제공합니다.
이 코드는 엔진에게 무엇을 해야 할지 알려주는 ‘명령어’를 포함하고 있거든요.
엔진은 이 명령어들을 따르고, 엔진 내부에서 일들이 일어납니다.
일반적으로 자바스크립트 엔진은 블랙박스인데요.
내부에서 무슨 일이 일어나는지 우리는 볼 수 없습니다.
하지만 브라우저 콘솔은 명령어가 실행된 후 결과를 추출해서 보여주는 예외적인 경우입니다.
변수 (Variables) #
변수는 자바스크립트에서 아주 중요한 구성 요소인데요.
변수는 우리가 숫자와 같은 값을 넣을 수 있는, 이름이 붙은 상자입니다.
> let myNumber = 8;
undefined
> myNumber * 2
16
첫 번째 줄에서 우리는 myNumber라는 변수를 생성했는데요.
이것은 ‘변수 선언’이라는 ‘구문(statement)‘입니다.
구문은 실행될 때 어떤 일을 하는 문법이고, ‘표현식(expression)‘은 실행될 때 값을 생성하는 문법입니다.
let myNumber = 8; 이라는 구문은 undefined라는 결과를 생성하는데요.
undefined는 “실제 결과가 없다"는 것을 의미하는 유사 값입니다.
구문은 종종 결과를 갖지 않습니다.
변수 이름 규칙 #
변수 이름의 첫 문자는 글자, 달러 기호($), 또는 밑줄(_)이어야 하고요.
이후 문자들은 첫 문자에 허용되는 모든 문자와 더불어 숫자도 포함될 수 있습니다.
보통 변수 이름은 소문자로 시작하고, 단어 경계는 대문자로 표시하는데요.
numberOfPeople처럼 말이죠.
이런 방식을 ‘카멜 케이스(camel case)‘라고 부릅니다.
구문의 결과는 일반 코드에서 거의 중요하지 않습니다 #
구문의 결과는 거의 유용하지 않으므로, 지금부터는 세미콜론으로 끝나는 콘솔 입력의 결과는 생략하겠습니다.
문법 오류 #
문법 규칙을 따르지 않으면 자바스크립트는 오류를 보고하는데요.
SyntaxError: Invalid or unexpected token과 같은 메시지를 보게 될 겁니다.
변수에 값 할당하기 #
변수의 내용을 변경할 수도 있는데요.
> let value = 0;
> value = 3;
> value
3
우리는 value 변수를 0으로 초기화했다가 나중에 그 값을 3으로 변경했습니다.
이를 위해 ‘할당 연산자(=)‘를 사용했습니다.
할당 연산자의 오른쪽에는 어떤 표현식이든 올 수 있는데요.
myVar = myVar + 1; 과 같은 구문은 수학적으로는 이상해 보이지만, 프로그래밍에서는 “myVar의 현재 값에 1을 더한 결과를 다시 myVar에 저장하라"는 의미로 사용됩니다.
상수 (변경 불가능한 변수) #
만약 변수의 값을 절대 변경하지 않을 거라면, 다른 방식으로 선언할 수 있는데요.
const를 사용하면, 실수로 값을 변경하려고 할 때 자바스크립트가 경고를 해줍니다.
> const TWO = 2;
> TWO = 3;
TypeError: Assignment to constant variable.
const는 프로그래머에게 “이 변수는 절대 바뀌지 않을 거야"라는 힌트를 주는 데 가장 유용합니다.
함수 (Functions) #
지금까지 우리가 본 유일한 값은 숫자였는데요.
다음으로 ‘함수’라는 또 다른 종류의 값을 탐색해 보겠습니다.
함수는 우리가 변수 안에 저장하는 작은 프로그램과 같은데요.
함수를 ‘호출’하면, 0개 이상의 값을 입력으로 받아 하나의 값을 결과로 ‘반환’합니다.
> const timesThree = (x) => { return x * 3; };
> timesThree(2)
6
(x)에서 x는 함수의 ‘파라미터(parameter)‘라고 불리고요.
{ return x * 3; }는 함수의 코드를 지정하는 ‘본문(body)‘입니다.
이런 함수 생성 문법을 ‘화살표 함수’라고 부릅니다.
파라미터 vs. 아규먼트 #
‘파라미터’와 ‘아규먼트(argument)‘라는 용어는 종종 혼용되지만, 구분을 할 수 있는데요.
const add = (x, y) => { ... }에서 x와 y는 함수 add의 ‘파라미터’입니다.
add(2, 3)에서 2와 3은 함수 호출의 ‘아규먼트’입니다.
예제 섭씨를 화씨로 변환하기 #
다음 함수는 섭씨 온도를 화씨 온도로 변환하는데요.
const celsiusToFahrenheit = (c) => {
const f = (c * (9/5)) + 32;
return f;
};
이 여러 줄 코드를 콘솔에 붙여넣고 함수를 호출해 볼 수 있습니다.
> celsiusToFahrenheit(0)
32
연습 문제 (해결책 없음) #
-
브라우저 콘솔에서 몇 가지 숫자 계산을 수행해보세요.
-
화씨를 섭씨로 변환하는
fahrenheitToCelsius함수를 작성하고, 몇 가지 함수 호출 결과를 확인하여 제대로 작동하는지 확인해보세요.