JavaScript Bootcamp
JavaScript Bootcamp: 기초부터 고급까지의 집중 학습 가이드
이 JavaScript Bootcamp는 JavaScript의 기본 개념부터 고급 기능까지 단계적으로 배우기 위한 가이드입니다. 변수 선언, 조건문, 함수, 객체 지향 프로그래밍, 비동기 처리 등 다양한 주제를 다루며, 실습 예제와 함께 JavaScript의 기능을 익힐 수 있습니다.
1. JavaScript 기초
1.1. 변수 선언 (var, let, const)
JavaScript에서 변수를 선언하는 방법입니다.
var: 함수 스코프 변수 (이전 방식)let: 블록 스코프 변수const: 상수로, 값이 변경되지 않음
예시 코드:
var name = "John"; // 함수 스코프
let age = 25; // 블록 스코프
const city = "Seoul"; // 상수, 재할당 불가
console.log(name); // 출력: John
console.log(age); // 출력: 25
console.log(city); // 출력: Seoul
실습 과제:
let을 사용하여 나이를 변수로 저장하고, 이를 출력해보세요.const로 도시를 선언하고, 해당 도시명을 출력해보세요.
2. 조건문과 반복문
2.1. 조건문 (if, else if, else)
조건문을 사용하여 특정 조건에 따라 코드 실행을 분기합니다.
let age = 20;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
2.2. 반복문 (for, while)
for 또는 while 반복문을 사용하여 코드를 반복적으로 실행합니다.
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4 출력
}
실습 과제:
- 숫자가 10 이상일 때 "큰 숫자", 그렇지 않으면 "작은 숫자"라고 출력하는 조건문을 작성하세요.
for문을 사용하여 1부터 10까지의 숫자를 출력하세요.
3. 함수 (Functions)
3.1. 함수 선언 (Function Declaration)
함수를 선언하고 호출하는 기본적인 방법입니다.
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice")); // 출력: Hello, Alice!
3.2. 함수 표현식 (Function Expression)
함수를 변수에 할당하는 함수 표현식입니다.
const square = function (x) {
return x * x;
};
console.log(square(4)); // 출력: 16
실습 과제:
- 이름을 인자로 받아 "Hello, [이름]!"을 반환하는 함수를 작성하세요.
- 숫자를 제곱하는 함수를 작성하고, 숫자 5를 제곱하여 출력하세요.
4. ES6+ 기능: 화살표 함수 (Arrow Function)
화살표 함수는 더 간결한 방식으로 함수를 정의할 수 있습니다.
const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 출력: 6
실습 과제:
- 두 수를 더하는 화살표 함수를 작성하세요.
5. 배열 (Arrays)
5.1. 배열 선언 및 접근
배열은 JavaScript에서 여러 값을 저장할 수 있는 데이터 구조입니다.
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // 출력: Apple
console.log(fruits.length); // 배열의 길이 출력: 3
5.2. 배열 메서드
push(): 배열에 요소 추가pop(): 배열의 마지막 요소 제거forEach(): 배열을 순회
fruits.push("Orange");
fruits.forEach((fruit) => {
console.log(fruit);
});
실습 과제:
- "Apple", "Banana", "Cherry"로 이루어진 배열을 선언하고, 배열의 첫 번째 요소를 출력하세요.
- 배열에 "Orange"를 추가하고, 모든 요소를 출력하세요.
6. 객체 (Objects)
6.1. 객체 선언 및 속성 접근
객체는 키-값 쌍으로 데이터를 저장하는 구조입니다.
let person = {
name: "John",
age: 30,
city: "Seoul"
};
console.log(person.name); // 출력: John
console.log(person["age"]); // 출력: 30
6.2. 객체 메서드
객체에 함수를 포함하여 메서드를 정의할 수 있습니다.
let person = {
name: "Alice",
greet() {
console.log("Hello, " + this.name);
}
};
person.greet(); // 출력: Hello, Alice
실습 과제:
- 이름과 나이를 속성으로 가진 객체를 선언하고, 객체의 이름을 출력하세요.
- 객체에
greet메서드를 추가하고, 메서드를 호출해 인사말을 출력하세요.
7. 비동기 처리 (Asynchronous Programming)
7.1. 콜백 함수 (Callback Functions)
콜백 함수는 다른 함수의 인자로 전달되어, 특정 작업이 완료된 후 호출됩니다.
function fetchData(callback) {
setTimeout(() => {
callback("Data fetched");
}, 2000);
}
fetchData((message) => {
console.log(message); // 2초 후 "Data fetched" 출력
});
7.2. 프로미스 (Promise)
프로미스는 비동기 작업의 결과를 처리할 수 있게 해줍니다.
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Operation Successful");
} else {
reject("Operation Failed");
}
});
promise.then((message) => {
console.log(message); // 출력: Operation Successful
}).catch((error) => {
console.log(error);
});
실습 과제:
- 콜백 함수를 사용해 2초 후 데이터를 가져오고, 결과를 출력하세요.
- 프로미스를 사용해 성공 시 "Success", 실패 시 "Failed"를 출력하는 예제를 작성하세요.
8. ES6+ 기능: async/await
async/await은 프로미스를 더 간결하게 처리할 수 있는 방법입니다.
async function fetchData() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched"), 2000);
});
let result = await promise;
console.log(result); // 출력: Data fetched
}
fetchData();
실습 과제:
async함수 내에서await를 사용해 2초 후 데이터를 출력하세요.
9. DOM 조작 (Document Object Model)
9.1. 요소 선택과 조작
HTML 문서의 요소를 JavaScript로 선택하고 조작할 수 있습니다.
<div id="content">Hello, World!</div>
<button id="btn">Change Text</button>
<script>
const content = document.getElementById("content");
const button = document.getElementById("btn");
button.addEventListener("click", () => {
content.textContent = "Text Changed!";
});
</script>
실습 과제:
- 버튼을 클릭하면 HTML 요소의 텍스트가 변경되도록 코드를 작성하세요.
10. 이벤트 처리
10.1. 이벤트 리스너 등록
JavaScript를 사용하여 사용자 상호작용에 반응할 수 있습니다.
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
실습 과제:
- 버튼을 클릭할 때 경고창이 뜨도록 이벤트 리스너를 추가하세요.
11. JavaScript 프로젝트: 간단한 계산기
요구 사항:
- 두 숫자를 입력하고, 덧셈과 뺄셈을 수행할 수 있는 간단한 계산기를 만들어보세요.
- HTML을 사용하여 입력 필드와 버튼을 추가하고, JavaScript로 덧셈과 뺄셈 로직을 구현하세요.
예시 코드:
<h1>간단한 계산기</h1>
<input type="number" id="num1" placeholder="첫 번째 숫자">
<input type="number" id="num2" placeholder="두 번째 숫자">
<button id="addBtn">더하기</button>
<button id="subBtn">빼기</button>
<p id="result"></p>
<script>
document.getElementById("addBtn").addEventListener("click", function() {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);
document.getElementById("result").textContent = "결과: " + (num1 + num2);
});
document.getElementById("subBtn").addEventListener("click", function() {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);
document.getElementById("result").textContent = "결과: " + (num1 - num2);
});
</script>
요약
이 JavaScript Bootcamp는 변수 선언, 조건문, 함수, 배열과 객체를 포함한 기초부터, 비동기 처리, DOM 조작, 프로미스와 같은 고급 기능까지 다룹니다. 실습을 통해 실전 프로젝트를 구현하면서 JavaScript의 다양한 기능을 익히고, 웹 개발에 활용할 수 있습니다.