[FE] JavaScript

Ryong·2024년 2월 23일

FE

목록 보기

2/3

JavaScript는 웹 페이지의 동적인 기능을 구현하기 위한 프로그래밍 언어로, 주로 클라이언트 측에서 실행. HTML 및 CSS로 구성된 정적인 웹 페이지를 동적으로 변경하고 상호 작용할 수 있게 해준다.

기본 구조:

// 주석은 이렇게 작성합니다.

// 변수 선언과 할당
var x = 5;
let y = 10;
const pi = 3.14;

// 조건문
if (x > y) {
    console.log('x는 y보다 큽니다.');
} else if (x < y) {
    console.log('x는 y보다 작습니다.');
} else {
    console.log('x와 y는 같습니다.');
}

// 반복문
for (let i = 0; i < 5; i++) {
    console.log('반복 횟수:', i);
}

// 함수 정의
function add(a, b) {
    return a + b;
}

// 함수 호출
let result = add(3, 4);
console.log('덧셈 결과:', result);

변수:

var: ES5 이전에 사용되던 변수 선언 키워드. 함수 스코프를 가지며 호이스팅이 발생.
let: 블록 스코프를 가지는 변수 선언 키워드. 변수의 재할당 가능.
const: 블록 스코프를 가지는 상수 선언 키워드. 한 번 할당된 값은 변경할 수 없다.

조건문:

if, else if, else: 조건에 따라 코드 블록을 실행.

let num = 10;

if (num > 0) {
    console.log('양수입니다.');
} else if (num < 0) {
    console.log('음수입니다.');
} else {
    console.log('0입니다.');
}

반복문:

for, while, do-while: 코드 블록을 반복해서 실행.

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

// while 문
let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

// do-while 문
let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

함수:

함수는 코드를 재사용하고 모듈화하기 위해 사용.

// 함수 선언
function multiply(a, b) {
    return a * b;
}

// 함수 표현식
const divide = function(a, b) {
    return a / b;
};

// Arrow 함수
const add = (a, b) => a + b;

// 함수 호출
console.log(multiply(3, 4));
console.log(divide(6, 2));
console.log(add(1, 2));

이벤트 처리:

웹 페이지에서 발생하는 이벤트에 대한 처리를 구현할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Event Handling</title>
</head>
<body>

    <button id="myButton">Click me</button>

    <script>
        // 버튼 요소 가져오기
        const button = document.getElementById('myButton');

        // 이벤트 핸들러 등록
        button.addEventListener('click', function() {
            alert('버튼이 클릭되었습니다.');
        });
    </script>

</body>
</html>

객체와 배열:

객체는 키-값 쌍의 집합이며, 배열은 여러 값을 순서대로 나열한 리스트입니다.

// 객체
const person = {
    name: 'John',
    age: 30,
    job: 'Developer'
};

// 배열
const fruits = ['apple', 'banana', 'orange'];

console.log(person.name); // John
console.log(fruits[1]);   // banana

Ajax와 Fetch API:

JavaScript를 사용하여 비동기적으로 서버와 통신할 수 있습니다.

// Fetch API를 이용한 데이터 가져오기
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

DOM (Document Object Model):

JavaScript는 DOM을 사용하여 HTML 문서의 구조, 콘텐츠 등에 접근하고 조작할 수 있다. DOM을 통해 동적으로 웹 페이지를 업데이트하고 사용자와 상호 작용할 수 있다.

// DOM을 통한 요소 선택
const myElement = document.getElementById('myElement');

// 요소의 내용 변경
myElement.innerHTML = '새로운 내용';

// 새로운 요소 생성 및 추가
const newElement = document.createElement('p');
newElement.textContent = '새로운 단락';
document.body.appendChild(newElement);

비동기 프로그래밍:

JavaScript는 비동기적으로 작동하는 특징을 가지고 있다. 콜백 함수, Promise, async/await 등을 사용하여 비동기 코드를 다룰 수 있다.

// 비동기적인 데이터 가져오기 예제 (Promise)
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('데이터가 성공적으로 가져왔습니다.');
        }, 2000);
    });
}

fetchData()
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

클로저 (Closure):

클로저는 함수와 그 함수가 선언된 렉시컬 스코프의 조합으로, 외부 함수의 변수에 접근할 수 있는 함수.

function outerFunction() {
    let outerVariable = '외부 변수';

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // 외부 변수

ES6+ (ECMAScript 2015+):

최신 JavaScript 표준으로 추가된 기능들인 화살표 함수, 템플릿 리터럴, 클래스 등을 활용하여 코드를 더 간결하고 가독성 있게 작성할 수 있다.

// 화살표 함수
const add = (a, b) => a + b;

// 클래스
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`안녕하세요, ${this.name}(${this.age}세)입니다.`);
    }
}

const john = new Person('John', 30);
john.greet();