JavaScript 기초 완전정복 — 변수·함수·반복문을 초보자도 이해하게

JavaScript가 뭔지 한 줄로 설명하면

HTML이 집의 뼈대이고, CSS가 인테리어라면, JavaScript는 집을 살아 숨쉬게 만드는 전기 배선입니다. 버튼을 클릭하면 무언가가 일어나고, 폼을 입력하면 결과가 바뀌고, 알림창이 뜨는 것 — 이 모든 것이 JavaScript의 역할입니다.

웹 개발을 공부하다 보면 HTML → CSS → JavaScript 순서로 배우게 됩니다. HTML과 CSS는 "정적"이라 한번 만들면 변하지 않지만, JavaScript를 배우면 사용자의 행동에 반응하는 동적인 웹페이지를 만들 수 있게 됩니다.

JavaScript를 어디서 쓸 수 있나요?

예전에는 JavaScript가 웹 브라우저 안에서만 작동했습니다. 하지만 지금은 Node.js 덕분에 서버에서도 실행할 수 있게 되었고, React·Vue·Angular 같은 프레임워크로 앱 전체를 만들 수도 있습니다. 심지어 Next.js처럼 JavaScript 하나로 프론트엔드와 백엔드를 동시에 만들기도 합니다.

즉, JavaScript 하나만 잘 해도 풀스택 개발자가 될 수 있다는 뜻입니다!

개발 환경 준비

VS Code를 설치하고, 새 파일을 만들어 확장자를 .html로 저장합니다. 그 안에 <script> 태그를 넣으면 바로 JavaScript 코드를 작성할 수 있습니다.

또는 크롬 브라우저에서 F12키를 누르면 개발자 도구가 열리는데, 거기서 Console 탭을 클릭하면 바로 JavaScript를 입력하고 실행해볼 수 있습니다. 설치할 것 없이 바로 시작 가능합니다!

변수(Variable): 데이터를 담는 상자

변수는 쉽게 말해 데이터를 담아두는 이름 붙은 상자입니다.

JavaScript에서 변수를 선언하는 방법은 3가지입니다: var, let, const

현대 JavaScript에서는 let과 const를 주로 사용합니다:

• let: 나중에 값을 바꿀 수 있는 변수
• const: 한 번 정하면 바꿀 수 없는 상수 (constant)

예시:

let name = "방장"; — 이름을 나중에 바꿀 수 있음

const birthYear = 1990; — 태어난 해는 바뀌지 않음

변수에는 다양한 타입의 데이터를 넣을 수 있습니다:

• 문자열(String): "안녕하세요" — 따옴표로 감쌉니다
• 숫자(Number): 42 — 그냥 숫자를 씁니다
• 불리언(Boolean): true 또는 false — 참/거짓
• 배열(Array): [1, 2, 3, "사과"] — 여러 값을 순서대로 담음
• 객체(Object): {name: "방장", age: 30} — 키-값 쌍으로 데이터를 담음

함수(Function): 반복 작업을 묶어두는 레시피

함수는 특정 작업을 수행하는 코드 묶음입니다. 요리 레시피처럼, 한 번 만들어두면 필요할 때마다 꺼내 쓸 수 있습니다.

예를 들어 "안녕하세요 + 이름 + 님"을 출력하는 함수를 만들어보겠습니다:

function greet(name) { return "안녕하세요 " + name + "님!"; }

이제 greet("방장")을 호출하면 "안녕하세요 방장님!"이 반환됩니다.

함수의 구성요소:

• 매개변수(Parameter): 함수에 전달하는 입력값. 위 예시에서 name이 매개변수입니다.
• 반환값(Return Value): return 뒤에 오는 값이 함수의 결과물입니다.

조건문(If/Else): 상황에 따라 다른 행동하기

조건문은 "만약 이렇다면 이것을 해라, 그렇지 않으면 저것을 해라"를 표현하는 방법입니다.

예시: 나이에 따라 다른 메시지 출력하기

let age = 20;

if (age >= 19) { console.log("성인입니다."); } else { console.log("미성년자입니다."); }

실생활에서 조건문이 쓰이는 예시:

• 로그인 성공/실패 처리
• 쇼핑몰에서 재고 여부에 따라 구매 버튼 활성화/비활성화
• 검색 결과가 없을 때 "결과 없음" 메시지 표시

반복문(Loop): 같은 일을 여러 번 반복하기

반복문은 비슷한 작업을 여러 번 반복할 때 사용합니다. "1부터 10까지 출력해줘"를 코드 10줄로 쓰는 대신, 반복문 3줄로 해결할 수 있습니다.

가장 많이 쓰는 반복문 두 가지:

for 반복문: 횟수가 정해진 반복

for (let i = 1; i <= 5; i++) { console.log(i + "번째 반복"); }

→ "1번째 반복", "2번째 반복"... "5번째 반복" 순서로 출력됩니다.

forEach: 배열의 각 요소를 처리할 때

let fruits = ["사과", "바나나", "딸기"];

fruits.forEach(function(fruit) { console.log(fruit + "가 맛있어요!"); });

→ 과일 목록을 하나씩 꺼내서 처리합니다.

DOM: JavaScript로 HTML을 조작하기

JavaScript의 진짜 매력은 HTML 요소를 동적으로 바꿀 수 있다는 점입니다. 이를 위해 DOM(Document Object Model)이라는 개념을 이해해야 합니다.

DOM이란 HTML 문서를 JavaScript가 조작할 수 있는 객체 구조로 표현한 것입니다. document.getElementById("버튼ID")처럼 HTML 요소를 선택하고, 그 요소의 내용이나 스타일을 JavaScript로 바꿀 수 있습니다.

버튼을 클릭하면 텍스트가 바뀌는 예시:

<button id="myBtn" onclick="changeText()">클릭하세요</button>

<p id="myText">원래 텍스트</p>

function changeText() { document.getElementById("myText").innerText = "바뀐 텍스트!"; }

이것만 이해해도 인터랙티브한 웹페이지를 만들 수 있습니다!

이벤트(Event): 사용자 행동에 반응하기

이벤트는 사용자의 행동(클릭, 키보드 입력, 마우스 이동 등)을 감지해서 코드를 실행하는 방법입니다.

자주 쓰는 이벤트:

• click: 클릭했을 때
• keydown: 키보드를 눌렀을 때
• submit: 폼을 제출했을 때
• mouseover: 마우스를 올렸을 때

다음 단계로 나아가기

JavaScript 기초를 이해했다면, 다음 단계는 이렇게 권장드립니다:

1. JavaScript 30개 프로젝트 챌린지: "JavaScript30"을 검색하면 30일 동안 30개의 프로젝트를 만드는 무료 강의가 있습니다. 강력 추천!
2. React 입문: JavaScript를 어느 정도 익혔다면 React로 넘어가세요. 현업에서 가장 많이 쓰이는 프레임워크입니다.
3. 실습 프로젝트: 투두리스트, 날씨 앱, 계산기 등 간단한 프로젝트부터 만들어보세요.

마치며

JavaScript는 처음에는 낯설게 느껴지지만, 핵심 개념 몇 가지만 이해하면 갑자기 많은 것들이 보이기 시작합니다. 변수, 함수, 조건문, 반복문 — 이 4가지가 프로그래밍의 기초이며, 이것을 이해하면 어떤 프로그래밍 언어를 배워도 빠르게 적응할 수 있습니다.

막히는 부분이 있으면 댓글로 남겨주세요. 함께 해결해보겠습니다!