안녕하세요!김코딩입니다
이번에는 자바스크립트를 처음 배우려는 분들을 위한 블로그 시리즈를 시작합니다. 오늘은 첫걸음으로, 자바스크립트를 설치하고 실행하는 방법을 알아볼게요. 사실 자바스크립트는 다른 프로그래밍 언어와 달리 시작하기가 정말 쉬워요. 별도의 복잡한 설치 과정 없이도 바로 코드를 써볼 수 있답니다. 그럼 바로 시작해볼까요?
자바스크립트란 무엇인가?
자바스크립트(JavaScript)는 웹을 더 생동감 있게 만드는 프로그래밍 언어입니다. 예를 들어, 웹사이트에서 버튼을 누르면 알림이 뜨거나, 스크롤할 때 애니메이션이 나타나는 기능들이 자바스크립트로 만들어진 거예요. HTML이 웹의 구조를, CSS가 디자인을 담당한다면, 자바스크립트는 그 위에 상호작용을 더하는 역할을 합니다. 원래는 브라우저에서만 동작했지만, 요즘은 Node.js 덕분에 서버 개발에도 활용되고 있죠. 하지만 초보자인 우리에겐 웹 브라우저에서 사용하는 게 첫걸음이에요!
자바스크립트 설치: 따로 할 필요 없어요!
자바스크립트를 시작하려면 설치가 필요할 거라고 생각할 수 있지만, 놀랍게도 따로 설치할 필요가 없습니다. 왜냐하면 여러분이 지금 사용하는 웹 브라우저(구글 크롬, 파이어폭스, 사파리 등)에 이미 자바스크립트 실행 엔진이 내장되어 있기 때문이에요. 즉, 브라우저만 있으면 바로 코드를 작성하고 실행해볼 수 있습니다. 정말 간편하죠?
실행 방법 1: 브라우저 콘솔에서 놀아보기
가장 빠르게 자바스크립트를 테스트해볼 수 있는 방법은 브라우저의 “개발자 도구”를 여는 겁니다. 크롬을 예로 들어 설명해볼게요:
- 크롬 브라우저를 열고 빈 탭을 띄웁니다.
- 키보드에서 F12를 누르거나, 오른쪽 상단 메뉴(⋮)에서 “도구 더보기” > “개발자 도구”를 선택하세요.
- 개발자 도구 창이 열리면 상단 탭 중 “Console”을 클릭합니다.
- 콘솔에 alert(“안녕, 자바스크립트!”)를 입력하고 Enter를 누르면 작은 알림 창이 화면에 나타납니다.
콘솔에서는 간단한 계산도 가능해요. 5 + 3을 입력하면 8이 출력되고, console.log(“테스트”)를 입력하면 “테스트”라는 메시지가 콘솔에 찍힙니다. 이렇게 브라우저 콘솔은 자바스크립트를 바로 써보고 결과를 확인할 수 있는 놀이터 같은 곳이에요.
실행 방법 2: HTML 파일로 제대로 시작하기
조금 더 진지하게 코드를 작성하고 싶다면, HTML 파일에 자바스크립트를 연결해보세요. 방법은 간단합니다:
- 메모장이나 Visual Studio Code 같은 텍스트 에디터를 엽니다.
- 아래 코드를 입력하고 index.html이라는 이름으로 저장하세요:
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 자바스크립트</title>
</head>
<body>
<h1>자바스크립트 테스트 페이지</h1>
<script>
console.log("안녕하세요, 콘솔입니다!");
alert("자바스크립트를 시작합니다!");
</script>
</body>
</html>
- 파일을 저장한 뒤 더블클릭해서 브라우저로 열면, 알림 창이 뜨고 개발자 도구 콘솔에 메시지가 표시됩니다.
<script> 태그 안에 자바스크립트 코드를 넣으면 HTML과 함께 동작해요. 이 방식은 나중에 버튼이나 입력창 같은 요소와 연결할 때도 유용합니다.
개발 환경 설정 팁
코드를 편리하게 쓰려면 약간의 준비가 필요해요:
- 에디터 추천: 초보자라면 Visual Studio Code(VS Code)를 써보세요. 무료이고, 코드 자동 완성 기능이 있어 실수를 줄일 수 있습니다. 설치방법은 자바스크립트 설치를위한 vs코드
- Live Server: VS Code에 “Live Server” 확장을 설치하면 코드를 저장할 때마다 브라우저가 자동으로 새로고침돼서 결과를 바로 확인할 수 있어요.
마무리
이제 자바스크립트를 설치하고 실행하는 기본 방법을 배웠습니다! 브라우저 콘솔로 간단히 테스트하거나, HTML 파일을 만들어 제대로 시작해볼 수 있어요. 다음 글에서는 변수와 기본 문법을 배우며 코딩의 세계로 더 깊이 들어가볼게요. 궁금한 점이 있다면 언제든 질문 남겨주세요. 자바스크립트 여정, 함께 재밌게 시작합시다!
[…] 지난 글에서 자바스크립트의 기본 개념인 변수, 함수, 조건문을 배웠죠? 이번에는 배열과 이벤트를 배워볼 거예요. 배열은 여러 데이터를 한 번에 다룰 수 있게 도와주고, 이벤트는 웹에서 사용자의 반응을 처리할 수 있는 기능을 제공합니다. 이 두 가지를 배우면, 리스트를 관리하거나 버튼 클릭처럼 사용자의 상호작용에 반응하는 기능을 만들 수 있습니다. […]