01. 컴퓨터에게 업무를 설명하기

01. 코딩은 ‘업무 절차를 빠짐없이 쓰는 일’입니다

동료에게 “이번 달 예산 좀 정리해 주세요”라고 말하면 동료는 문맥을 짐작합니다. 컴퓨터는 ‘이번 달’의 범위, 어떤 자료를 읽을지, 어떻게 계산할지, 무엇을 보여 줄지 스스로 정하지 못합니다. 프로그램은 이 결정을 작은 명령으로 적은 것입니다. 코드는 그 명령을 프로그래밍 언어의 문법으로 쓴 글이고, 실행은 컴퓨터가 그 글의 지시를 수행하는 일입니다.

JavaScript(자바스크립트)는 브라우저가 실행할 수 있는 프로그래밍 언어입니다. 버튼을 눌렀을 때 계산하고 화면을 바꾸는 데 사용할 수 있습니다. Java와는 별개의 언어입니다. 이 수업은 브라우저에서 작은 계산과 화면 연결을 익힙니다. 서버를 만들거나 회사 시스템을 연결하는 과정은 후속 학습으로 남깁니다.

02. 설치 없이 첫 결과를 봅니다

1. 아래 실행창에서 코드를 먼저 읽습니다. 결과가 무엇일지 종이에 적습니다.
2. 실행을 누릅니다. 아래 짙은 색 영역이 이 교재의 출력창입니다.
3. 문장의 ‘기획팀’을 본인의 가상 부서로 바꾸고 다시 실행합니다.
4. 100을 200으로 바꿔 숫자 결과도 달라지는지 확인합니다.

console.log("안녕하세요, 기획팀입니다.");
console.log(100 + 20);

안녕하세요, 기획팀입니다.
120

console.log(값);는 값을 확인하도록 출력하는 명령입니다. 여기서 console.log는 도구의 이름, 소괄호 ( ) 안은 확인할 값입니다. 따옴표 안의 글자는 문자열이고, 100 + 20은 숫자 계산입니다. 세미콜론 ;은 문장 끝을 표시합니다. // 뒤는 같은 줄의 주석으로, 사람이 읽는 설명이며 계산하지 않습니다.

// 단위: 만원
console.log((80 / 100) * 100);
console.log("위 숫자의 단위는 %입니다.");

80
위 숫자의 단위는 %입니다.

03. 브라우저의 실제 콘솔도 알아 둡니다

교재의 실행창은 연습용 출력 도구입니다. 실제 브라우저에도 개발자 도구의 Console 탭이 있습니다. Chrome에서 Windows는 Ctrl + Shift + J, Mac은 ⌘ + ⌥ + J로 엽니다. Edge에서는 메뉴의 ‘개발자 도구’를 열어 Console을 선택할 수 있습니다. 회사 설정에 따라 도구가 제한되면 교재 실행창을 사용합니다.

이번 단계에서는 1 + 2처럼 직접 이해한 짧은 식만 손으로 입력하고 Enter를 눌러 봅니다. 브라우저가 붙여넣기 경고를 표시하면 해제하지 말고 교재 실행창에서 연습합니다. 실제 콘솔에서 console.log(1 + 2)를 실행하면 3 외에 undefined가 보일 수 있습니다. 3은 출력한 값이고 undefined는 그 출력 명령 자체의 반환값이어서, 오류가 아닙니다.

04. 오늘부터 사용할 표기 약속

예제의 금액은 모두 가상의 만원 단위입니다. 100은 100만원을 뜻하며 숫자 자체에 ‘만원’이나 쉼표를 넣지 않습니다. 영문 코드 기호는 반각 문자로 입력합니다. “ ”처럼 문서 편집기가 바꾼 굽은 따옴표 대신 " " 또는 ' '를 사용합니다. 코드의 영문 이름은 대소문자를 구별합니다.