웹 개발 필수 기술 Javascript의 기본 개념

JavaScript는 웹 개발에서 필수적인 프로그래밍 언어로, 주로 웹 페이지의 동적 콘텐츠를 구현하는 데 사용됩니다.

1. 개요

JavaScript는 1995년 Netscape에서 처음 개발되었으며, 오늘날에는 거의 모든 웹 브라우저에서 실행됩니다. ECMAScript 표준을 따르며, HTML 및 CSS와 함께 웹의 핵심 기술 중 하나입니다.

2. 문법과 기본 개념

변수

변수는 데이터를 저장하는 공간입니다. var, let, const 키워드를 사용하여 변수를 선언합니다.

var name = 'John';
let age = 30;
const PI = 3.14;

var는 함수 스코프를 갖고, let과 const는 블록 스코프를 가집니다. const는 상수로, 재할당이 불가능합니다.

데이터 타입

JavaScript에는 기본적으로 여섯 가지 데이터 타입이 있습니다:

- Number: 숫자

- String: 문자열

- Boolean: 논리값 (true 또는 false)

- Null: 빈 값

- Undefined: 값이 정의되지 않음

- Object: 객체

let isAdult = true; // Boolean
let user = null; // Null
let count; // Undefined
let person = { name: 'Alice', age: 25 }; // Object

연산자

JavaScript에는 산술 연산자, 비교 연산자, 논리 연산자 등이 있습니다.

// 산술 연산자
let sum = 10 + 20;
let product = 10 * 20;

// 비교 연산자
let isEqual = (10 == '10'); // true (값만 비교)
let isStrictEqual = (10 === '10'); // false (값과 타입 모두 비교)

// 논리 연산자
let isAdult = true;
let canDrink = isAdult && age >= 18; // true

3. 함수

함수는 재사용 가능한 코드 블록입니다. function 키워드를 사용해 정의합니다.

function greet(name) {
    return 'Hello, ' + name;
}

let message = greet('Alice');

ES6에서는 화살표 함수도 도입되었습니다.

const add = (a, b) => a + b;

4. 제어문

JavaScript에는 조건문과 반복문이 있습니다.

- 조건문

if (age >= 18) {
    console.log('Adult');
} else {
    console.log('Not an adult');
}

- 반복문

for (let i = 0; i < 5; i++) {
    console.log(i);
}

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

5. 객체와 배열

- 객체

객체는 키-값 쌍으로 구성된 데이터 구조입니다.

let person = {
    name: 'Alice',
    age: 25,
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};

person.greet();

- 배열

배열은 순서가 있는 데이터의 집합입니다.

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1

numbers.push(6);
console.log(numbers.length); // 6

6. 비동기 프로그래밍

JavaScript는 싱글 스레드 언어지만, 비동기 처리를 위해 콜백, 프로미스, async/await을 사용합니다.

- 콜백

콜백은 함수의 인자로 전달되는 함수입니다.

function fetchData(callback) {
    setTimeout(() => {
        callback('Data received');
    }, 1000);
}

fetchData(data => {
    console.log(data);
});

- 프로미스

프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다.

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Data received');
    }, 1000);
});

promise.then(data => {
    console.log(data);
});

- async/await

async/await는 프로미스를 더 쉽게 다루기 위한 구문입니다.

async function fetchData() {
    let data = await promise;
    console.log(data);
}

fetchData();

7. DOM 조작

Document Object Model(DOM)은 HTML 문서의 구조를 표현합니다. JavaScript는 DOM을 통해 HTML 요소를 조작할 수 있습니다.

let element = document.getElementById('myElement');
element.textContent = 'Hello, World!';
element.style.color = 'blue';

8. 이벤트 처리

이벤트는 사용자 행동에 반응하는 방식입니다.

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});

9. 모듈

ES6부터는 모듈을 사용해 코드를 분리하고 재사용할 수 있습니다.

// export.js
export const PI = 3.14;

// import.js
import { PI } from './export.js';
console.log(PI);

결론

JavaScript는 웹 개발에서 핵심적인 역할을 하는 강력한 언어입니다. 위에서 다룬 기본 개념들을 잘 이해하고 활용하면, 동적인 웹 애플리케이션을 쉽게 개발할 수 있습니다.

다음 포스팅부터는 기본적인 프로젝틀를 함께 만들 기 전 워크플로우를 설명해드리겠습니다.

저작자표시 비영리 변경금지

Tomtomi's blog