JavaScript 독학 가이드 1 - 소개 및 시작하기

2025년 11월 25일 learning by Seven Fingers Studio 12분

JavaScript프로그래밍웹개발입문독학

“프로그래밍 배우고 싶은데 뭐부터 해야 하죠?” 이 질문에 대한 답은 거의 항상 JavaScript입니다. 저도 처음엔 “HTML, CSS도 모르는데 JavaScript?” 했는데요. 지금 생각해보면 JavaScript부터 제대로 배웠어야 했어요.

JavaScript가 뭔가요?

JavaScript는 웹 페이지를 움직이게 만드는 프로그래밍 언어예요. 쉽게 비유하면:

HTML: 집의 뼈대 (구조)
CSS: 집의 인테리어 (디자인)
JavaScript: 집의 전기, 수도 (동작)

버튼 누르면 팝업 뜨는 거, 스크롤하면 이미지 바뀌는 거, 채팅 메시지 실시간으로 오는 거. 전부 JavaScript 덕분입니다.

왜 JavaScript를 배워야 할까?

1. 웹 개발의 필수

2025년 현재, JavaScript 없이 만들어진 웹사이트는 거의 없어요. 네이버, 유튜브, 인스타그램 전부 JavaScript로 작동합니다.

2. 프론트엔드부터 백엔드까지

예전엔 “프론트엔드는 JavaScript, 백엔드는 Java나 Python” 이랬는데요. 지금은 JavaScript 하나로 전부 가능합니다.

프론트엔드: React, Vue, Angular
백엔드: Node.js, Express
모바일 앱: React Native
데스크톱 앱: Electron

진짜 JavaScript 하나면 웹, 앱, 서버 전부 만들 수 있어요.

3. 진입 장벽이 낮음

Java나 C++ 같은 언어는 개발 환경 세팅만 하루 걸려요. JavaScript는? 크롬 브라우저만 있으면 끝입니다. F12 누르고 Console 탭에서 바로 코딩 시작할 수 있어요.

4. 엄청난 생태계

npm(Node Package Manager)에는 200만 개가 넘는 패키지가 있습니다. 뭘 만들든 이미 누가 만들어놨을 확률이 높아요. 가져다 쓰면 됩니다.

JavaScript 개발 환경 설정

1. 브라우저만으로 시작 (초보 추천)

가장 간단한 방법입니다.

크롬 브라우저 열기
F12 누르기 (개발자 도구)
Console 탭 선택
코드 입력하고 Enter

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

실행 결과:

> console.log("Hello, JavaScript!")
Hello, JavaScript!

이렇게만 해도 JavaScript 배울 수 있어요.

2. HTML 파일에서 실행

좀 더 제대로 하려면 HTML 파일 만들면 됩니다.

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 연습</title>
</head>
<body>
    <h1>JavaScript 테스트</h1>

    <script>
        console.log("페이지가 로드됐어요!");
    </script>
</body>
</html>

이 파일을 더블클릭해서 브라우저로 열고, F12 눌러서 Console 보면 메시지가 나옵니다.

3. VS Code 설치 (권장)

본격적으로 배우려면 에디터가 필요해요.

code.visualstudio.com 접속
Download 클릭
설치 진행
완료!

VS Code는 무료고, 가볍고, 확장 프로그램도 많아서 거의 모든 개발자가 씁니다.

4. Node.js 설치 (나중에 해도 OK)

브라우저 밖에서도 JavaScript 실행하려면 Node.js가 필요해요. 지금 당장은 안 해도 됩니다.

nodejs.org 접속
LTS 버전 다운로드 (안정화 버전)
설치 진행
터미널에서 node -v 입력해서 확인

첫 번째 코드 작성하기

자, 이제 진짜 코드를 작성해볼게요.

Console에 출력하기

console.log("안녕하세요!");
console.log(123);
console.log(10 + 5);

실행 결과:

> console.log("안녕하세요!")
안녕하세요!
> console.log(123)
123
> console.log(10 + 5)
15

console.log()는 괄호 안의 내용을 콘솔에 출력하는 명령어예요. 디버깅할 때 제일 많이 씁니다.

변수 사용하기

let name = "철수";
console.log(name); // 철수

실행 결과:

> let name = "철수"
> console.log(name)
철수

let은 변수를 만드는 키워드고, name은 변수 이름, "철수"는 값입니다.

계산하기

let a = 10;
let b = 20;
console.log(a + b); // 30

실행 결과:

> let a = 10
> let b = 20
> console.log(a + b)
30

JavaScript로 계산기도 만들 수 있어요.

JavaScript 배우는 순서

이 시리즈에서 다룰 내용 순서입니다:

소개 및 시작하기 ← 지금 여기
변수와 데이터 타입
연산자와 조건문
반복문과 배열
함수와 스코프
객체와 메서드
DOM 조작 기초
이벤트 처리
ES6+ 최신 문법
비동기 처리와 API

하나씩 천천히 따라오시면 됩니다. 급하게 하지 마세요.

공부 팁

1. 코드는 직접 쳐보기

복사 붙여넣기 하지 마세요. 손으로 직접 타이핑해야 손에 익습니다. 타이핑하면서 “아, 이게 이런 의미구나” 깨닫게 돼요.

2. 에러 두려워하지 않기

에러는 친구입니다. 제가 처음 배울 때 에러 보면 겁났는데, 지금은 에러 메시지가 뭘 잘못했는지 알려주는 거라서 고마워요.

3. 작은 프로젝트 만들기

문법만 공부하면 재미없어요. 간단한 거라도 직접 만들어보세요.

계산기
To-Do 리스트
간단한 게임 (숫자 맞추기)

만들다 보면 “아, 이럴 땐 이걸 써야겠구나” 자연스럽게 배웁니다.

4. 하루 30분이라도 꾸준히

주말에 10시간 몰아서 하는 것보다, 매일 30분씩 하는 게 훨씬 낫습니다. 프로그래밍은 근육 기억이에요.

다음 단계

다음 글에서는 변수와 데이터 타입을 배웁니다. JavaScript에서 데이터를 어떻게 저장하고 관리하는지, 숫자와 문자를 어떻게 다루는지 알아볼 거예요.

JavaScript 배우는 건 어렵지 않아요. 저도 비전공자로 시작했는데, 지금은 매일 JavaScript로 먹고삽니다. 여러분도 할 수 있어요!

JavaScript 독학 가이드 시리즈:

다음: JavaScript 독학 가이드 - 변수와 데이터 타입

← 블로그 목록으로