자바스크립트 시작하기: 브라우저 콘솔로 첫 코드 실행법

 

프로그래밍 공부를 시작할 때 가장 먼저 마주하는 장벽은 아마도 '환경 설정'일 것입니다. 하지만 자바스크립트(JavaScript)는 다릅니다. 여러분이 지금 이 글을 읽고 있는 **웹 브라우저(Chrome, Edge, Safari 등)**만 있다면 이미 모든 준비가 끝난 상태입니다.

오늘은 브라우저의 '개발자 도구'를 활용해 자바스크립트 코드를 즉석에서 실행해 보는 방법을 알아보겠습니다.

1. 개발자 도구 콘솔(Console) 창 열기

먼저 코드를 입력할 공간을 찾아야 합니다. 각 브라우저별 단축키는 다음과 같습니다.

• Windows/Linux: F12 또는 Ctrl + Shift + J
• Mac: Command(⌘) + Option(⌥) + J

창이 열리면 상단 탭 중에서 'Console' 혹은 **'콘솔'**이라고 적힌 부분을 클릭하세요. 이곳이 바로 자바스크립트와 직접 대화할 수 있는 마법의 창입니다.

2. 첫 번째 인사: "Hello, World!"

콘솔 창에 아래 코드를 입력하고 Enter를 눌러보세요.

console.log("Hello, World!");

실행 결과: 콘솔 창 바로 아래에 Hello, World!라는 문구가 출력됩니다. console.log()는 괄호 안의 내용을 화면에 보여달라는 자바스크립트의 가장 기본적인 명령어입니다.

3. 풍부한 실습 예제로 익히는 자바스크립트

단순한 출력 외에 콘솔에서 할 수 있는 다양한 작업들을 직접 따라 해 보세요.

① 계산기로 활용하기

자바스크립트는 복잡한 연산도 척척 해냅니다.

// 더하기, 빼기, 곱하기, 나누기
10 + 20;
100 - 45;
7 * 8;
10 / 2;

// 복합 연산
(10 + 5) * 2;

② 변수(Variable) 사용하기

데이터를 상자에 담아 이름을 붙여둘 수 있습니다.

let name = "철수";
let age = 25;

console.log(name + "의 나이는 " + age + "살입니다.");

결과: "철수의 나이는 25살입니다."

③ 팝업창 띄우기

브라우저 화면에 직접 알림창을 띄울 수도 있습니다.

alert("자바스크립트 학습을 환영합니다!");

④ 사용자에게 값 입력받기

사용자의 답변을 변수에 저장해 활용해 보세요.

let favoriteFood = prompt("가장 좋아하는 음식은 무엇인가요?");
console.log("당신이 좋아하는 음식은 " + favoriteFood + "이군요!");

⑤ 조건문 맛보기

숫자에 따라 다른 결과를 보여줄 수 있습니다.

let number = 10;

if (number > 5) {
    console.log("5보다 큰 숫자입니다.");
} else {
    console.log("5보다 작거나 같은 숫자입니다.");
}

4. 알아두면 유용한 콘솔 사용 팁

1. 여러 줄 입력하기: Enter를 누르면 코드가 즉시 실행됩니다. 코드를 실행하지 않고 다음 줄로 넘어가고 싶다면 Shift + Enter를 누르세요.
2. 이전 코드 불러오기: 키보드의 위쪽 화살표(↑) 키를 누르면 방금 입력했던 코드가 다시 나타납니다. 오타를 수정할 때 유용합니다.
3. 화면 깨끗이 지우기: clear()라고 입력하거나, 콘솔 창 좌측 상단의 금지 표시(Ø) 아이콘을 누르면 입력했던 내용이 모두 지워집니다.

5. 마치며

브라우저 콘솔은 자바스크립트 문법을 가장 빠르고 안전하게 테스트해 볼 수 있는 최고의 놀이터입니다. 거창한 프로그램을 만들기 전, 오늘 배운 예제들을 변형해가며 이것저것 시도해 보세요. 코드가 예상대로 동작할 때의 즐거움이 여러분의 프로그래밍 학습을 지속하게 만드는 큰 힘이 될 것입니다.