[JavaScript] 자바스크립트를 사용한 다양한 기술 및 문법

이 글은 자바스크립트를 사용한 심화 기술을 활용할 수 있도록 기초적인 문법과 개념을 얕게 다룬다. 여기서 다루는 기술은 자바스크립트뿐만 아니라 다른 프로그래밍 언어, 라이브러리, 프레임워크에서 활용할 수 있다. 각 기술을 설명하기에 앞서 자주 사용되는 자바스크립트 문법을 짚고 넘어가도록 하자.

 

💡let과 const 키워드

---

let과 const의 역할

let을 사용하는 경우

• 변수를 선언하고, 나중에 재할당할 가능성이 있는 경우에 사용된다.
• 변수의 값이 변경될 수 있는 상황이거나, 변수의 스코프가 한정적인 경우에 사용된다.
• 반복문에서 반복 변수를 선언할 때 주로 사용된다.
• 예를 들어, 반복문 내에서 임시적으로 사용되는 변수나 조건에 따라 값이 변경되는 변수 등에 사용된다.

 

const를 사용하는 경우

• 변수를 선언하고, 이후에 재할당할 필요가 없는 경우에 사용된다.
• 변수의 값이 변경되지 않고 일정한 값을 유지해야 하는 상수값이거나, 객체나 배열을 가리키는 변수의 경우 내부 내용은 변경되지만 변수 자체는 재할당되지 않아야 하는 경우에 사용된다.
• 코드의 가독성과 유지보수성을 높이기 위해 상수값을 사용할 때 주로 const를 사용한다.
• 객체나 배열의 경우, 객체나 배열을 변경하지 않으면서 참조를 유지해야 할 때 const를 사용한다.

일반적으로 가능한 const를 사용하여 변수를 선언하는 것이 좋다. 값이 변경될 필요가 없는 경우에는 const를 사용하여 상수값으로 선언하는 것이 코드의 의도를 명확히 하고 실수를 줄일 수 있다. 단, 변수의 값이 변경될 가능성이 있는 경우에는 let을 사용하여 변수를 선언한다.

 

const로 선언된 객체와 배열

const 키워드로 선언된 변수는 재할당이 불가능하지만, 이는 변수가 가리키는 값을 변경할 수 없음을 의미한다. 그러나 const로 선언된 변수가 객체나 배열을 가리키는 경우, 객체나 배열의 내용은 변경할 수 있다.

 

예를 들어, const로 선언된 변수가 객체를 가리키는 경우에는 객체의 속성을 변경할 수 있다.

const person = {
    name: 'Isaac'
};

// 객체의 속성 변경
person.name = 'Sopia';

console.log(person); // 출력: { name: 'Sopia' }

위의 예시에서는 person이라는 변수가 가리키는 객체의 속성 name을 변경하였다. 이는 const로 선언된 변수가 가리키는 객체의 메모리 주소는 변경되지 않았고, 객체 내부의 값만 변경되었기 때문에 에러가 발생하지 않는다.

마찬가지로, const로 선언된 변수가 배열을 가리키는 경우에도 배열의 내용을 변경할 수 있다.

const numbers = [1, 2, 3];

// 배열 요소의 변경
numbers.push(4);

console.log(numbers); // 출력: [1, 2, 3, 4]

위의 예시에서는 numbers라는 변수가 가리키는 배열에 새로운 요소를 추가하였다. 이 또한 const로 선언된 변수가 가리키는 배열의 메모리 주소는 변경되지 않았고, 배열 내부의 값만 변경되었기 때문에 에러가 발생하지 않는다.

이러한 특성을 이용하여 const로 변수를 선언할 때 객체나 배열을 가리키는 경우에는 변수 자체를 재할당하지 않고도 내부의 값을 변경할 수 있다.

 

2023.10.11 - [Programming/JavaScript] - [JavaScript] Core: Variable declaration, Hoisting

[JavaScript] Core: Variable declaration, Hoisting

 

💡Symbol

---

Symbol은 ES6부터 추가된 원시 데이터 타입으로, 유일한 식별자를 생성한다. 즉, 동일한 내용의 두 개의 Symbol은 서로 다른 값으로 간주된다. 이러한 특성 때문에 Symbol은 객체의 프로퍼티 키로 사용되어, 프로퍼티 충돌을 방지하거나 프라이빗한 멤버를 구현하는 데 유용하게 활용된다.

 

Symbol의 특징

1. 유일성을 가진다.

const mySymbol = Symbol();
const anotherSymbol = Symbol(); // 유일한 심볼 생성

console.log(mySymbol === anotherSymbol); // 출력: false

위 코드에서 볼 수 있듯이, 두 개의 Symbol은 항상 서로 다른 값을 가진다. 이는 Symbol의 주요 특징 중 하나로, 각 Symbol은 유일성을 보장한다.

 

2. 객체 프로퍼티 키로 활용할 수 있다.

const mySymbol = Symbol('description');

const obj = {
    [mySymbol]: 'Hello, Symbol!'
};

console.log(obj[mySymbol]); // 출력: "Hello, Symbol!"

위 코드에서는 객체의 프로퍼티 키로 Symbol을 사용하여 프로퍼티를 정의하였다. 이렇게 하면 일반적으로 사용되는 문자열 키와 구별되며, 객체의 다른 프로퍼티와 충돌하지 않는다.

 

3. 전역 심볼로 공유할 수 있다.

const globalSymbol = Symbol.for('global');
const anotherGlobalSymbol = Symbol.for('global');

console.log(globalSymbol === anotherGlobalSymbol); // 출력: true

전역 심볼(Global Symbol)은 Symbol.for() 메서드를 사용하여 전역 Symbol 레지스트리에서 검색할 수 있다. 이를 통해 여러 곳에서 동일한 Symbol을 공유할 수 있다.

 

4. 심볼 프로퍼티를 숨길 수 있다.

const mySymbol = Symbol('private');

class MyClass {
    constructor() {
        this[mySymbol] = 'hidden';
    }

    getPrivateProperty() {
        return this[mySymbol];
    }
}

const instance = new MyClass();
console.log(instance.getPrivateProperty()); // 출력: "hidden"
console.log(instance[mySymbol]); // 출력: undefined (외부에서 접근 불가)

Symbol을 사용하면 객체의 일부 프로퍼티를 숨길 수 있다. 이는 외부에서 접근할 수 없는 프라이빗한 멤버를 구현하는 데 유용하게 사용된다.

위 예시에서는 Symbol을 사용하여 MyClass의 프라이빗한 멤버를 정의하였다. 이렇게 함으로써 외부에서 접근할 수 없는 보호된 프로퍼티를 구현할 수 있다.

 

💡화살표 함수 (Arrow Functions)

---

화살표 함수는 ECMAScript 6에서 도입된 함수 정의 문법으로, 기존의 함수 정의 방식에 비해 간결하고 가독성이 높다. 이 함수는 화살표(=>)를 사용하여 함수의 매개변수와 함수 몸체를 구분한다.

// 기존 함수 정의
function greet(name) {
    return "Hello, " + name + "!";
}

// 화살표 함수로 변경
const greetArrow = name => "Hello, " + name + "!";

화살표(=>)를 사용하여 매개변수와 함수 몸체를 구분하므로 함수 키워드(function)와 중괄호({})를 생략할 수 있다.

 

매개변수의 개수

// 매개변수가 하나인 경우, 괄호 생략
const hello = () => "Hello!";

// 매개변수가 여러 개인 경우, 괄호 사용
const add = (a, b) => a + b;

매개변수가 하나인 경우, 괄호를 생략할 수 있으며, 매개변수가 여러 개인 경우, 괄호를 사용한다.

 

this의 동작

const obj = {
    name: "Isaac",
    greet: function() {
        setTimeout(() => {
            console.log("Hello, " + this.name + "!");
        }, 1000);
    }
};
obj.greet(); // 출력: "Hello, Isaac!"

화살표 함수는 자체적인 this를 생성하지 않고, 상위 스코프의 this를 가리킨다. 이는 함수가 정의된 시점의 외부 스코프의 this를 상속받아 사용한다는 것을 의미한다.

위 코드에서 화살표 함수는 setTimeout 함수의 콜백으로 사용되었는데, 이때 화살표 함수는 외부 스코프인 obj 객체의 name 속성을 정확하게 참조할 수 있다. 이것은 화살표 함수의 this가 상위 스코프의 this를 가리키기 때문이다.

 

2023.10.13 - [Programming/JavaScript] - [JavaScript] Arrow Function (Lambda)

[JavaScript] Arrow Function (Lambda)

 

💡템플릿 리터럴 (Template Literals)

---

템플릿 리터럴은 ECMAScript 6에서 도입된 새로운 문자열 표기법으로, 기존의 문자열 연결 방식에 비해 가독성이 높고 표현력이 풍부하다. 이를 통해 복잡한 문자열을 보다 간편하게 작성할 수 있으며, 동적으로 값을 삽입하는 기능도 제공한다.

 

백틱을 사용한 문법

const name = "Isaac";
const age = 24;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message);
// 출력:
// "My name is Isaac and I am 24 years old."

템플릿 리터럴은 백틱(``)으로 문자열을 감싸는데, 이를 통해 여러 줄에 걸친 문자열을 작성할 수 있다.

const name = "Isaac";
const message = `Hello, ${name}!`;

${} 구문을 사용하여 변수나 표현식을 문자열에 삽입할 수 있다.

const a = 10;
const b = 20;
const result = `합계: ${a + b}`;
console.log(result);
// 출력:
// "합계: 30"

${} 내부에는 변수뿐만 아니라 임의의 표현식도 사용할 수 있으며, 해당 표현식은 평가되어 문자열에 포함된다.

const multiline = `첫 번째 줄
두 번째 줄
세 번째 줄`;
console.log(multiline);
// 출력:
// 첫 번째 줄
// 두 번째 줄
// 세 번째 줄

백틱으로 감싸진 문자열 내부에서는 줄 바꿈이 그대로 유지된다.

템플릿 리터럴은 이처럼 간편한 문법과 다양한 기능을 제공하여 문자열을 효율적으로 다룰 수 있도록 도와준다.

 

2023.10.11 - [Programming/JavaScript] - [JavaScript] Template String (Template Literal)

[JavaScript] Template String (Template Literal)

 

💡구조 분해 할당 (Destructuring Assignment)

---

구조 분해 할당은 ECMAScript 6에서 도입된 기능으로, 배열이나 객체에서 값을 추출하여 변수에 할당하는 문법이다. 이를 통해 코드를 더 간결하고 가독성 있게 작성할 수 있으며, 복잡한 데이터 구조를 다룰 때 특히 유용한다.

 

배열과 객체 구조 분해 할당

배열 구조 분해 할당

const [first, second] = [1, 2];
console.log(first); // 출력: 1
console.log(second); // 출력: 2

배열에서 값을 추출하여 변수에 할당할 때 사용된다. 할당할 변수의 순서는 배열의 순서와 일치해야 한다.

 

객체 구조 분해 할당

const { name, age } = { name: 'Isaac', age: 24 };
console.log(name); // 출력: "Isaac"
console.log(age); // 출력: 24

객체에서 특정 속성의 값을 추출하여 변수에 할당할 때 사용된다. 할당할 변수의 이름은 객체의 속성 이름과 일치해야 한다.

 

중첩된 객체 또는 배열의 구조 분해 할당

const { data: { name, age } } = { data: { name: 'Isaac', age: 24 } };
console.log(name); // 출력: "Isaac"
console.log(age); // 출력: 24

객체나 배열 내부에 중첩된 구조도 분해하여 할당할 수 있다.

 

기본값 설정

const { name = 'Unknown', age = 0 } = { age: 24 };
console.log(name); // 출력: "Unknown"
console.log(age); // 출력: 24

구조 분해 할당 시 기본값을 설정할 수 있다. 할당될 값이 존재하지 않는 경우에만 기본값이 사용된다.

 

💡디폴트 매개변수 (Default Parameters)

---

디폴트 매개변수는 ECMAScript 6에서 도입된 기능으로, 함수의 매개변수에 기본값을 설정함으로써 호출 시에 필수적으로 값을 전달하지 않아도 되는 장점을 제공한다. 이를 통해 코드를 간결하게 만들고, 호출자가 매개변수를 전달할 필요가 없는 경우에 유용하게 활용할 수 있다.

function greet(name = 'Guest') {
    return `Hello, ${name}!`;
}

greet(); // 출력: "Hello, Guest!"
greet('Isaac'); // 출력: "Hello, Isaac!"

위 예시에서 name 매개변수에 기본값으로 'Guest'를 설정하여, 함수를 호출할 때 name 매개변수를 전달하지 않아도 기본값이 적용된다. 이를 통해 호출자가 필요한 경우에만 값을 전달할 수 있으며, 그렇지 않은 경우에는 기본값이 적용되어 코드를 보다 간결하게 유지할 수 있다.

 

함수의 매개변수로 받은 값에 대한 유효성 검사를 수행하거나, 복잡한 계산을 수행하여 기본값을 동적으로 설정할 수도 있다.

function calculateTotal(price, taxRate = 0.1) {
    const total = price + (price * taxRate);
    return `Total: $${total.toFixed(2)}`;
}

console.log(calculateTotal(50)); // 출력: "Total: $55.00"
console.log(calculateTotal(50, 0.15)); // 출력: "Total: $57.50"

위 예시에서는 세금 비율을 기본값으로 설정하였지만, 필요에 따라 호출 시에 세금 비율을 전달하여 다양한 상황에 대응할 수 있다.

 

💡클로저 (Closure)

---

클로저는 JavaScript의 중요한 개념 중 하나로, 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합을 말한다. 클로저는 함수가 선언된 위치에 따라 해당 함수가 접근할 수 있는 변수 범위를 결정한다. 이를 통해 함수 내에서 외부 변수에 접근하고, 외부 변수를 변경하거나 저장할 수 있다.

function createCounter() {
    let count = 0; // 외부 변수

    function increment() {
        count++; // 외부 변수에 접근하여 값 증가
        console.log(`현재 카운트: ${count}`);
    }

    return increment; // 내부 함수를 반환
}

const counter1 = createCounter(); // 새로운 클로저 생성
const counter2 = createCounter(); // 또 다른 클로저 생성

counter1(); // 출력: 현재 카운트: 1
counter1(); // 출력: 현재 카운트: 2

counter2(); // 출력: 현재 카운트: 1 (다른 클로저이므로 count 값이 독립적으로 유지됨)

위 코드에서 createCounter 함수는 내부 함수 increment를 반환한다. 이 내부 함수는 외부 변수 count에 접근하여 값을 증가시키는 역할을 한다. createCounter 함수가 호출될 때마다 새로운 클로저가 생성되며, 각 클로저는 독립적인 count 변수를 기억한다. 따라서 counter1과 counter2는 서로 다른 클로저이므로 각각의 호출은 독립적으로 count 변수를 유지하고 증가시킨다. 이처럼 클로저를 통해 함수는 외부 변수를 기억하고 상태를 유지할 수 있으며, 주로 콜백 함수, 비동기 작업 처리, 정보 은닉 등에 활용된다.

 

2023.10.11 - [Programming/JavaScript] - [JavaScript] Core: Closure

[JavaScript] Core: Closure

 

💡메타 프로그래밍 (Meta Programming)

---

메타 프로그래밍은 프로그램이 자기 자신을 조사하고 변경할 수 있는 능력을 의미한다. 이를 통해 프로그램은 실행 중에 자신의 구조를 이해하고 수정할 수 있다. 자바스크립트에서는 주로 프로토타입과 객체의 동적 특성을 활용하여 메타 프로그래밍을 수행한다.

 

프로토타입을 이용한 동적 메서드 추가

// Person 함수 생성
function Person(name) {
    this.name = name;
}

// Person 프로토타입에 greet 메소드 추가
Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

// Person 객체 생성
const Isaac = new Person('Isaac');
Isaac.greet(); // 출력: "Hello, my name is Isaac"

위 코드에서는 Person 함수로 생성된 객체에 greet 메서드를 동적으로 추가하였다. 이렇게 추가된 greet 메서드는 모든 Person 객체에서 사용할 수 있다. 이렇게 동적으로 메서드를 추가함으로써 프로그램의 기능을 확장할 수 있다.

 

동적으로 메서드 추가

// Person.prototype에 동적으로 메소드 추가
Person.prototype.sayGoodbye = function() {
    console.log(`Goodbye, ${this.name}!`);
};

// 이미 생성된 Isaac 객체에 새로운 메소드 사용
Isaac.sayGoodbye(); // 출력: "Goodbye, Isaac!"

위 코드에서는 Person.prototype 객체에 동적으로 메서드를 추가하였다. 이렇게 추가된 메서드는 이미 생성된 객체에서도 사용할 수 있다. 이를 통해 이미 존재하는 객체들에게 새로운 기능을 추가할 수 있다.

 

💡리액티브 프로그래밍 (Reactive Programming)

---

리액티브 프로그래밍은 데이터 스트림이나 이벤트에 대한 처리를 중심으로 하는 프로그래밍 패러다임이다. 이는 데이터나 이벤트의 변화를 관찰(observe)하고 이에 대응하는 데이터 처리 방식을 채택한다. 주로 비동기적인 이벤트 기반 시스템에서 사용되며, 복잡한 상태 변화를 관리하고 코드를 간결하게 유지하기 위해 활용된다.

 

리액티브 프로그래밍은 일반적으로 스트림(Stream)이라고 하는 데이터나 이벤트의 시퀀스를 중심으로 작동한다. 이러한 스트림은 데이터의 흐름을 나타내며, 이를 통해 데이터의 비동기적인 변화를 다룬다. 주요 개념에는 옵저버(Observer), 옵저버블(Observable), 스트림 연산자(Stream Operator) 등이 있다.

 

RxJS 라이브러리

실무에서 리액티브 프로그래밍을 사용할 때, 주로 RxJS와 같은 라이브러리를 활용한다. RxJS는 리액티브 익스텐션(Reactive Extensions)의 자바스크립트 구현으로, 옵저버 패턴을 기반으로 한 스트림을 쉽게 조작할 수 있는 다양한 연산자를 제공한다.

 

예를 들어, 웹 애플리케이션에서 사용자의 클릭 이벤트를 관찰하고 이에 따라 화면을 업데이트하는 경우를 생각해보도록 하자. 이를 RxJS를 사용하여 다음과 같이 구현할 수 있다.

import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';

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

// 버튼 클릭 이벤트를 스트림으로 변환
const buttonClickStream = fromEvent(button, 'click');

// 버튼 클릭 스트림에 대한 연산을 체이닝하여 처리
buttonClickStream.subscribe(event => {
    console.log('Button clicked!');
});

// 버튼 클릭 이벤트를 일정 시간 동안 무시하는 스트림 연산
const throttledButtonClickStream = buttonClickStream.pipe(
    throttleTime(1000)
);

// 일정 시간 동안 무시된 버튼 클릭 이벤트를 처리
throttledButtonClickStream.subscribe(event => {
    console.log('Button clicked (throttled)!');
});

위 코드에서는 RxJS의 fromEvent 함수를 사용하여 버튼 클릭 이벤트를 스트림으로 변환하고, 이를 구독하여 버튼 클릭을 관찰한다. 또한 throttleTime 연산자를 사용하여 버튼 클릭 이벤트를 일정 시간 동안 무시하는 스트림을 생성하고, 이를 구독하여 무시된 클릭 이벤트를 처리한다.

이처럼 리액티브 프로그래밍을 활용하면 비동기적인 이벤트 처리나 데이터 스트림 관리를 간편하게 다룰 수 있으며, 복잡한 상태 변화를 관리하는 데에 사용할 수 있다.

 

💡비동기 프로그래밍 (Asynchronous Programming)

---

비동기 프로그래밍은 동기적인 코드 흐름을 멈추지 않고 작업을 수행하는 프로그래밍 패러다임이다. 자바스크립트에서는 비동기적인 작업을 처리하기 위해 콜백(Callbacks), 프로미스(Promises), async/await 등의 기술을 사용한다.

 

비동기 함수 (Async Functions)

비동기 함수는 비동기적으로 동작하는 코드를 더 간결하고 동기적으로 작성할 수 있도록 도와준다. async 키워드를 사용하여 비동기 함수를 정의하고, 내부에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있다.

// async/await를 사용한 비동기 코드 예시
async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 1000);
    });
}

async function getData() {
    const data = await fetchData();
    console.log(data); // 출력: Data fetched
}

getData();

비동기 프로그래밍은 네트워크 요청, 파일 시스템 액세스 등과 같이 시간이 걸리는 작업을 효율적으로 처리하는 데 중요하다. 이를 통해 웹 애플리케이션에서 사용자 경험을 향상하고 성능을 향상할 수 있다.

 

콜백 (Callbacks)

콜백은 비동기 작업이 완료되었을 때 실행되는 함수로, 주로 비동기 함수의 마지막 인자로 전달된다. 콜백 지옥(Callback Hell)이 발생할 수 있어 가독성이 낮고 유지보수가 어려울 수 있다.

// 콜백을 사용한 비동기 코드 예시
function fetchData(callback) {
    setTimeout(() => {
        callback('Data fetched');
    }, 1000);
}

fetchData(data => {
    console.log(data); // 출력: Data fetched
});

 

💡프로미스 (Promise)

---

프로미스는 비동기 작업을 처리하는 데 사용되는 JavaScript 객체로, 어떤 작업이 완료되었을 때 성공 또는 실패를 나타내는 결과를 반환한다. 프로미스는 주로 비동기 코드를 보다 구조화하고 관리하기 쉽게 만들어주는 데 사용된다.

 

프로미스의 특징

상태 (State)

프로미스는 대기(Pending), 이행(Fulfilled), 거부(Rejected)의 세 가지 상태 중 하나를 가진다. 대기 상태에서 시작하여 비동기 작업이 완료되면 이행 또는 거부 상태로 변경된다.

 

비동기 작업 처리

비동기 작업을 수행하는 함수를 프로미스로 감싸면, 해당 작업이 완료되었을 때 결과를 반환하는 데 사용된다. 이를 통해 콜백 지옥(callback hell)을 피하고 비동기 코드를 보다 구조화하고 관리하기 쉽게 만들 수 있다.

 

체이닝 (Chaining)

프로미스는 then() 메서드를 사용하여 연결할 수 있다. 이를 통해 여러 비동기 작업을 연속적으로 실행하고 각 작업의 결과를 다음 작업으로 전달할 수 있다.

 

프로미스를 사용한 예시 코드를 통해 비동기 작업을 수행해 보도록 하자.

// 비동기 작업을 수행하는 함수 예시 (1초 후에 완료됨)
function asyncTask() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const randomNumber = Math.random();
            if (randomNumber > 0.5) {
                resolve(randomNumber); // 이행 상태로 변경
            } else {
                reject(new Error('Random number is too small')); // 거부 상태로 변경
            }
        }, 1000);
    });
}

// 프로미스를 이용한 비동기 작업 처리 예시
asyncTask()
    .then(result => {
        console.log('비동기 작업 성공:', result);
        return result * 2; // 다음 작업을 위해 결과를 반환
    })
    .then(result => {
        console.log('두 배:', result);
        return result + 10; // 다음 작업을 위해 결과를 반환
    })
    .then(result => {
        console.log('더하기 10:', result);
    })
    .catch(error => {
        console.error('비동기 작업 실패:', error);
    });

비동기 작업 성공: 0.7313211591171694
두 배: 1.4626423182343388
더하기 10: 11.462642318234339

프로미스를 이용하여 비동기 작업이 수행되었으며, 각 작업의 결과가 연이어 출력되는 것을 확인할 수 있다. 만약 비동기 작업 중 에러가 발생한다면 catch() 블록에서 해당 에러를 처리할 수 있다.

 

2024.03.09 - [Programming/JavaScript] - [JavaScript] Promise: 비동기 작업 처리 객체

[JavaScript] Promise: 비동기 작업 처리 객체

 

💡이터레이터(Iterators)와 제너레이터(Generators)

---

이터레이터는 데이터를 반복하거나 처리할 때 사용된다. 예를 들어, 배열의 각 요소에 접근하거나 비동기 작업을 순차적으로 처리하는 데 활용될 수 있다.

제너레이터는 비동기 작업을 처리하거나 큰 데이터셋을 생성할 때 사용된다. 또한 제너레이터를 활용하여 무한한 데이터 스트림을 생성하거나 복잡한 비즈니스 로직을 단순하게 구현할 수 있다.

 

이터레이터 (Iterators)

이터레이터는 데이터의 순회를 담당하는 객체로, 순회 가능한 자료구조(예: 배열, 문자열)의 각 요소에 접근할 수 있는 메서드를 제공한다.

function createIterator(arr) {
    let index = 0;
    return {
        next: function() {
            return index < arr.length ? { value: arr[index++], done: false } : { done: true };
        }
    };
}

const fruits = ['apple', 'banana', 'cherry'];
const iterator = createIterator(fruits);

console.log(iterator.next()); // { value: 'apple', done: false }
console.log(iterator.next()); // { value: 'banana', done: false }
console.log(iterator.next()); // { value: 'cherry', done: false }
console.log(iterator.next()); // { done: true }

이터레이터는 next() 메서드를 호출하여 다음 요소로 이동하고 해당 요소를 반환한다. 또한 이터레이터는 내부적으로 done과 value 두 개의 프로퍼티를 가지며, done은 순회가 완료되었는지 여부를 나타내고, value는 현재 요소의 값이다.

 

제너레이터 (Generators)

제너레이터는 이터레이터를 생성하는 함수로, 함수의 실행을 중간에 멈추고 재개할 수 있는 기능을 제공한다.

function* generateNumbers() {
    yield 1;
    yield 2;
    yield 3;
}

const generator = generateNumbers();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { done: true }

제너레이터는 function* 키워드를 사용하여 선언하며, 함수 내부에서 yield 키워드를 사용하여 값을 반환하고 함수의 실행을 일시 중지한다. 제너레이터 객체는 이터레이터 인터페이스를 따르며 next() 메서드를 사용하여 실행을 재개한다.

 

💡프록시 (Proxy)

---

프록시는 자바스크립트에서 객체의 동작을 가로채고 수정할 수 있는 메타프로그래밍 기능을 제공한다. 객체의 속성 접근, 할당, 삭제 등의 동작을 가로채어 사용자 정의 로직을 수행하거나 보안 상의 이유로 동작을 제한할 수 있다. 또한, 프록시는 객체에 대한 중재자 역할을 하여 기존 객체의 동작을 변경하거나 확장한다.

 

프록시는 Proxy 객체를 사용하여 생성된다. Proxy 객체는 대상 객체와 핸들러(handler) 객체를 인수로 받으며, 핸들러는 프록시가 대상 객체에 대한 동작을 가로채고 수정하는 데 사용된다. 핸들러는 다양한 훅(hook)을 제공하여 객체의 다양한 동작을 가로챌 수 있다.

// 프록시 생성
const handler = {
    get: function(target, prop) {
        return prop in target ? target[prop] : 'Property does not exist!';
    }
};

const targetObject = {
    name: 'John',
    age: 30
};

const proxyObject = new Proxy(targetObject, handler);

console.log(proxyObject.name); // 출력: "John"
console.log(proxyObject.address); // 출력: "Property does not exist!"

위 예시에서, 프록시 핸들러의 get 메서드를 사용하여 대상 객체의 속성 접근을 가로채고 수정한다. 만약 속성이 존재하지 않으면 'Property does not exist!'를 반환하도록 핸들러가 설정되어 있다.

 

프록시는 보안, 로깅, 데이터 검증 등 다양한 용도로 활용될 수 있으며, 객체의 동작을 변경하거나 보완할 때 유용하게 사용된다. 프록시를 활용하여 객체의 동작을 관리하고 보안을 강화하는 등 다양한 작업을 수행할 수 있다.

 

💡리플렉션(Reflection)

---

리플렉션(Reflection)은 프로그램이 실행되는 동안에 자신의 구조를 조사하고 수정할 수 있는 능력을 의미한다. 자바스크립트에서는 Reflect 객체를 통해 리플렉션 기능을 지원한다. Reflect 객체는 다양한 메서드를 제공하여 객체를 조사하고 수정하는 데 사용할 수 있다.

 

Reflect 객체

Reflect.has 메서드

Reflect.has 메서드는 주어진 객체가 특정 속성을 가지고 있는지 여부를 확인한다. 객체가 해당 속성을 가지고 있으면 true를 반환하고, 그렇지 않으면 false를 반환한다.

const person = {
    name: 'Isaac',
    age: 30
};

console.log(Reflect.has(person, 'name')); // 출력: true
console.log(Reflect.has(person, 'address')); // 출력: false

위 예시에서는 person 객체가 'name' 속성을 가지고 있으므로 true를 반환한다.

 

Reflect.ownKeys 메서드

Reflect.ownKeys 메서드는 주어진 객체의 모든 속성 키를 배열로 반환한다. 이 메서드는 객체 자체의 속성뿐만 아니라 상속된 속성도 포함하여 반환한다.

const person = {
    name: 'Isaac',
    age: 24
};

console.log(Reflect.ownKeys(person)); // 출력: ["name", "age"]

위 예시에서는 person 객체의 모든 속성 키인 'name'과 'age'를 배열로 반환한다.

 

💡웹 워커 (Web Workers)

---

웹 워커는 웹 애플리케이션에서 백그라운드 스레드를 사용하여 병렬로 작업을 수행할 수 있게 해주는 기술이다. 메인 스레드와 별도로 동작하며, 장시간 실행되는 작업이나 CPU 집약적인 작업을 메인 스레드와 분리하여 성능을 향상한다.

// 웹 워커 생성
const worker = new Worker('worker.js');

// 메인 스레드에서 웹 워커로 메시지 전송
worker.postMessage('Hello from main thread!');

// 웹 워커에서 메시지 수신
worker.onmessage = function(event) {
    console.log('Message from web worker:', event.data);
};

웹 워커를 사용하면 메인 스레드의 블로킹을 방지하고 사용자 경험을 향상할 수 있다. 또한 멀티코어 CPU를 활용하여 성능을 최적화할 수 있으며, 웹 애플리케이션의 반응성을 높일 수 있다.

 

💡타입스크립트 (TypeScript)

---

타입스크립트(TypeScript)는 마이크로소프트에서 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트의 확장된 버전이다. 타입스크립트는 정적 타입을 지원하여 개발자가 코드를 작성할 때 변수의 타입을 명시하고 오류를 사전에 발견할 수 있도록 한다. 이러한 특징으로 인해 대규모 프로젝트에서 더 안정적이고 유지보수가 용이한 코드를 작성할 수 있다.

 

정적 타입

타입스크립트는 변수의 타입을 명시적으로 선언하여 코드를 작성한다. 이는 컴파일 시점에서 코드를 분석하고 타입 오류를 발견할 수 있도록 도와준다.

let name: string = 'Isaac';
let age: number = 24;
let isValid: boolean = true;

 

타입 추론 (Type Inference)

타입스크립트는 변수를 선언할 때 타입을 명시하지 않아도 할당된 값으로부터 타입을 추론한다.

let name = 'Isaac'; // name의 타입은 자동으로 string으로 추론

 

인터페이스 (Interfaces)

인터페이스는 타입스크립트에서 객체의 구조를 정의하는 역할을 한다. 이를 통해 코드의 가독성을 높이고 재사용성을 높일 수 있다.

interface Person {
    name: string;
    age: number;
}

function greet(person: Person): void {
    console.log(`Hello, ${person.name}!`);
}

 

제네릭 (Generics)

제네릭은 타입스크립트에서 함수, 클래스, 인터페이스를 작성할 때 타입을 파라미터화할 수 있도록 한다. 이를 통해 코드의 재사용성을 높이고 유연성을 확보할 수 있다. 예를 들어, 배열을 역순으로 정렬하는 함수를 작성할 때 제네릭을 활용할 수 있다.

function reverse<T>(arr: T[]): T[] {
    return arr.reverse();
}

const numbers: number[] = [1, 2, 3, 4, 5];
const reversedNumbers: number[] = reverse(numbers);

 

클래스(Class)와 모듈(Modules)

타입스크립트는 클래스와 모듈을 지원하여 객체 지향적인 프로그래밍을 할 수 있게 한다. 이를 통해 코드를 구조화하고 유지보수성을 높일 수 있다.

class Animal {
    constructor(private name: string) {}

    move(distance: number): void {
        console.log(`${this.name} moves ${distance} meters.`);
    }
}

export default Animal;

 

💡이벤트 핸들링 (Event Handling)

---

이벤트 핸들링은 사용자의 동작(예: 클릭, 입력 등)에 대한 응답으로 특정 동작을 수행하는 프로세스를 말한다. 자바스크립트를 사용하여 웹 애플리케이션을 개발할 때, 이벤트 핸들링은 매우 중요한 부분이다. 이벤트 핸들러를 등록하여 사용자의 동작에 대응하고, 애플리케이션의 동작을 조작할 수 있다.

// HTML
<button id="myButton">Click Me</button>

// JavaScript
const button = document.getElementById('myButton');

// 클릭 이벤트 핸들러 등록
button.addEventListener('click', function(event) {
    console.log('Button clicked!');
});

HTML에서 버튼 요소를 정의한다. 여기서는 id 속성을 사용하여 버튼을 식별할 수 있도록 한다. 그리고 자바스크립트에서 getElementById 함수를 사용하여 버튼 요소를 가져온다. addEventListener 메서드를 사용하여 클릭 이벤트에 대한 핸들러를 등록한다. 클릭 이벤트가 발생하면 핸들러 함수가 실행되며, 여기서는 콘솔에 "Button clicked!"라는 메시지를 출력한다.

이렇게 등록된 이벤트 핸들러는 사용자가 버튼을 클릭할 때마다 실행된다. 이벤트 핸들링은 웹 애플리케이션에서 사용자와의 상호작용을 담당하므로, 이벤트를 처리하고 그에 따른 동작을 수행하는데 활용할 수 있다.

 

💡배열 메서드 (Array Methods)

---

배열 메서드는 자바스크립트에서 배열을 조작하고 처리하는 데 사용되는 다양한 기능을 제공한다. 이러한 메서드들은 배열의 요소를 순회하거나, 조건에 따라 요소를 필터링하거나, 요소들을 변형하는 등의 작업을 수행할 수 있다. 주로 map, filter, reduce 등의 메서드가 자주 활용된다.

 

map

map 메서드는 주어진 배열의 각 요소에 대해 지정된 함수를 호출하고, 그 결과로 새로운 배열을 생성한다. 이 메서드를 사용하여 기존 배열의 각 요소를 변형하거나 다른 형태로 매핑할 수 있다.

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num ** 2);
console.log(squaredNumbers); // 출력: [1, 4, 9, 16, 25]

예를 들어, 배열의 각 요소를 제곱한 새로운 배열을 만들 수 있다.

 

filter

filter 메서드는 주어진 함수의 반환 값이 true인 요소로 이루어진 새로운 배열을 생성한다. 이 메서드를 사용하여 배열에서 필요한 요소만을 걸러낼 수 있다.

const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 출력: [2, 4]

예를 들어, 짝수만을 필터링한 새로운 배열을 만들 수 있다.

 

reduce

reduce 메서드는 배열의 각 요소에 대해 지정된 함수를 실행하고, 그 결과로 하나의 값이 생성된다. 이 메서드를 사용하여 배열의 요소를 결합하거나 요약하는 등의 작업을 수행할 수 있다.

const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 출력: 15

예를 들어, 배열의 모든 요소의 합을 구할 수 있다.

 

forEach

forEach 메서드는 배열의 각 요소에 대해 지정된 함수를 실행한다. 이 메서드를 사용하여 배열의 요소를 반복적으로 처리할 수 있다. 단순히 배열을 반복하면서 어떤 작업을 수행하고자 할 때 유용하다.

numbers.forEach(num => console.log(num));
// 출력:
// 1
// 2
// 3
// 4
// 5

이러한 배열 메서드들은 자바스크립트에서 데이터를 다루고 처리하는 데 매우 유용하다. 특히 함수형 프로그래밍의 개념을 적용하여 코드를 간결하고 읽기 쉽게 작성할 수 있다.

 

💡지연 평가 (Lazy Evaluation)

---

지연 평가는 함수형 프로그래밍에서 사용되는 개념으로, 연산이 필요한 시점까지 연산을 늦추는 것을 말한다. 이를 통해 불필요한 연산을 줄이고 성능을 향상할 수 있다.

// 무한으로 이어지는 정수 배열 생성
function* generateNumbers() {
    let number = 1;
    while (true) {
        yield number++;
    }
}

const numbers = generateNumbers();

// take: 주어진 개수만큼의 요소를 반환하는 함수
function take(iterable, count) {
    const result = [];
    for (const item of iterable) {
        result.push(item);
        if (result.length === count) {
            return result;
        }
    }
}

// 처음 5개의 짝수만 추출하여 반환
const evenNumbers = take(numbers.filter(num => num % 2 === 0), 5);

console.log(evenNumbers); // 출력: [2, 4, 6, 8, 10]

배열 메서드를 사용하면 배열을 다루는 다양한 작업을 편리하게 수행할 수 있다. 지연 평가를 이용하면 연산의 효율성을 높일 수 있고, 무한한 데이터 스트림과 같은 경우에 유용하게 활용할 수 있다.

 

💡고차 함수 (Higher-Order Functions)

---

고차 함수는 다른 함수를 인수로 받거나 함수를 반환하는 함수를 말한다. 이러한 고차 함수는 함수형 프로그래밍의 핵심 개념 중 하나로, 함수를 값으로 취급하여 동적으로 조작할 수 있게 해 준다. 이를 통해 코드의 추상화 수준을 높이고 재사용성을 높일 수 있다.

예를 들어, map 함수는 배열과 함수를 인수로 받아 배열의 각 요소에 함수를 적용하여 새로운 배열을 생성한다. 이는 고차 함수의 대표적인 예시이다.

// 고차 함수 예시: map
function map(arr, func) {
    const result = [];
    for (const item of arr) {
        result.push(func(item));
    }
    return result;
}

const numbers = [1, 2, 3, 4, 5];

// numbers 배열의 각 요소를 두 배로 만드는 함수를 전달하여 새로운 배열을 생성
const doubledNumbers = map(numbers, num => num * 2);

console.log(doubledNumbers); // 출력: [2, 4, 6, 8, 10]

위 코드에서 map 함수는 arr 배열과 변형할 함수 func를 받아서 새로운 배열을 생성한다. func 함수는 map 함수 내부에서 arr 배열의 각 요소에 적용된다. 이러한 고차 함수를 사용하면 변형 로직을 함수로 전달하여 코드의 유연성을 높일 수 있다.

 

💡커링 (Currying)

---

커링은 함수를 여러 개의 인자를 받는 함수로부터 한 개의 인자를 받는 함수들의 연속된 함수로 바꾸는 것을 말한다. 이를 통해 함수를 모듈화 하고 재사용성을 높일 수 있다.

커링의 핵심 아이디어는 함수의 일부 파라미터를 고정하여 새로운 함수를 반환하는 것이다. 이렇게 반환된 함수는 나중에 남은 파라미터를 받아 실행된다. 이 과정을 반복하여 필요한 만큼의 인자를 받는 함수를 생성할 수 있다.

// 커링을 적용하기 전의 함수
function add(x, y, z) {
    return x + y + z;
}

// 커링을 적용한 함수
function curryAdd(x) {
    return function(y) {
        return function(z) {
            return x + y + z;
        };
    };
}

// 커링을 사용하여 함수 호출
const curriedAdd = curryAdd(1)(2)(3);
console.log(curriedAdd); // 출력: 6

위의 예시에서 볼 수 있듯이, curryAdd 함수는 첫 번째 인자 x를 받고, 이후에는 각각의 반환된 함수에 나머지 인자들을 전달하여 적용한다. 이렇게 하면 curriedAdd 함수는 세 개의 인자를 받는 것처럼 동작한다.

 

💡모나드 (Monads)

---

모나드는 함수형 프로그래밍에서 사용되는 개념으로, 값의 컨텍스트를 추상화하는 방법이다. 모나드는 값 또는 값의 컨텍스트를 감싸고 있는 상자라고 생각할 수 있다. 이를 통해 부수 효과를 최소화하고 안전하게 값과 컨텍스트를 다룰 수 있다.

 

모나드의 세 가지 규칙

단위 법칙 (Unit Law)

unit 함수는 값을 가져와서 동일한 형태의 모나드로 변환해야 한다.

unit(a).flatMap(f) === f(a)

 

연쇄 법칙 (Associativity Law)

flatMap 함수를 연속적으로 호출할 때 결과는 합성 함수를 적용하는 것과 동일해야 한다.

m.flatMap(f).flatMap(g) === m.flatMap(x => f(x).flatMap(g))

 

결합 법칙 (Composition Law)

두 개의 함수를 조합한 함수를 모나드에 적용할 때 결과는 두 번 적용한 함수의 합성과 동일해야 한다.

unit(a).flatMap(f).flatMap(g) === unit(a).flatMap(x => f(x).flatMap(g))

 

모나드는 대부분의 함수형 언어에서 자주 사용되며, 자바스크립트에서도 이를 활용할 수 있다. 대표적인 예시로는 Maybe, Either, IO, Promise 등이 있다. 이러한 모나드는 값과 그 값을 다루는 함수를 래핑 하고, 함수 적용 시에 컨텍스트를 유지하면서 안전하게 값을 처리할 수 있도록 한다.

예를 들어, Maybe 모나드는 값이 존재하지 않을 수 있는 상황을 다룰 때 사용된다. Either 모나드는 오류 처리나 예외 상황을 다룰 때 유용하며, IO 모나드는 부수 효과를 추상화하여 안전하게 다룰 수 있도록 한다. 그리고 Promise 모나드는 비동기 작업을 다룰 때 사용된다.

 

💡웹 어셈블리 (WebAssembly)

---

웹 어셈블리(WebAssembly)는 웹 브라우저에서 실행되는 이진 형식의 바이트 코드이다. 이는 브라우저 상에서 고성능의 프로그램을 실행하기 위해 설계되었다. 웹 어셈블리는 웹 애플리케이션에서 JavaScript 외부에서 실행되며, 웹 어셈블리 모듈은 JavaScript에서 호출되어 사용될 수 있다.

 

웹 어셈블리는 네이티브 코드와 유사한 성능을 제공하며, 다양한 언어로 작성된 프로그램을 웹에서 실행할 수 있다. C, C++, Rust 등의 언어로 작성된 코드는 웹 어셈블리로 컴파일될 수 있다.

 

웹 어셈블리는 브라우저에서 바로 실행되는 것이 아니라 브라우저에서 다운로드되고 컴파일된 후에 실행된다. 이러한 접근 방식은 웹 애플리케이션의 성능을 향상하고, 더 많은 종류의 프로그래밍 언어를 웹에서 사용할 수 있게 한다.

 

간단한 웹 어셈블리 모듈을 생성하고 호출하는 방법을 살펴보도록 하자.

// example.c

int add(int a, int b) {
    return a + b;
}

위의 코드는 간단한 C 함수를 정의한 것이다. 이제 이 코드를 웹 어셈블리 모듈로 컴파일한다.

emcc example.c -o example.wasm -s EXPORTED_FUNCTIONS="['_add']"

위 명령어는 Emscripten을 사용하여 C 코드를 웹 어셈블리 모듈로 컴파일하는 명령어이다. 그리고 -s EXPORTED_FUNCTIONS="['_add']" 옵션은 add 함수를 웹 어셈블리 모듈에서 내보내겠다는 의미이다.

 

이제 이 모듈을 JavaScript에서 호출한다.

// example.js

// 웹 어셈블리 모듈 로드
const { instance } = await WebAssembly.instantiateStreaming(fetch('example.wasm'));

// 모듈에서 내보낸 함수 호출
const result = instance.exports._add(10, 20);
console.log(result); // 출력: 30

위의 JavaScript 코드는 웹 어셈블리 모듈을 로드하고, 모듈에서 내보낸 add 함수를 호출하여 결과를 출력하는 예시이다.

 

💡서버리스 아키텍처 (Serverless Architecture)

---

서버리스 아키텍처는 개발자가 서버를 관리하지 않고도 애플리케이션을 배포하고 실행할 수 있게 해주는 클라우드 컴퓨팅 모델이다. 서버리스 함수를 사용하여 필요한 리소스만 요금을 지불하고, 인프라 관리를 최소화할 수 있다.

// AWS Lambda를 사용한 서버리스 함수 예시
const AWS = require('aws-sdk');

exports.handler = async (event, context) => {
    // AWS DynamoDB에서 데이터 조회
    const dynamodb = new AWS.DynamoDB.DocumentClient();
    const params = {
        TableName: 'myTable',
        Key: {
            id: 'myItemId'
        }
    };

    try {
        const data = await dynamodb.get(params).promise();
        return {
            statusCode: 200,
            body: JSON.stringify(data.Item)
        };
    } catch (error) {
        return {
            statusCode: 500,
            body: JSON.stringify({ message: 'Error fetching data' })
        };
    }
};

서버리스 아키텍처를 사용하면 개발자는 서버 관리 및 확장성 문제에 대해 걱정하지 않고 애플리케이션을 구축할 수 있다. 또한 비용을 절감하고 개발 생산성을 향상할 수 있다.

 

💡GraphQL

---

GraphQL은 데이터를 효율적으로 관리하고 클라이언트와 서버 간의 효율적인 데이터 교환을 가능하게 하는 데이터 쿼리 언어 및 런타임이다.

RESTful API와는 달리 클라이언트가 필요한 데이터를 정확하게 요청할 수 있으며, 하나의 엔드포인트에서 여러 개의 요청을 처리할 수 있다.

// GraphQL 쿼리 예시
const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
    type Query {
        hello: String
    }
`;

const resolvers = {
    Query: {
        hello: () => 'Hello, world!'
    }
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
    console.log(`Server ready at ${url}`);
});

GraphQL을 사용하면 클라이언트가 필요한 데이터만 요청하고 응답받을 수 있어 네트워크 트래픽을 줄이고 성능을 향상시킬 수 있다. 또한 강력한 타입 시스템을 제공하여 데이터 요청 및 응답을 더욱 안전하고 효율적으로 관리할 수 있다.

 

💡테스트 주도 개발 (Test-Driven Development, TDD)

---

테스트 주도 개발은 소프트웨어 개발 방법론 중 하나로, 테스트 케이스를 먼저 작성한 후에 그 테스트 케이스를 통과하는 코드를 작성하는 방식이다. 이를 통해 개발자는 코드의 동작을 보장하고 버그를 사전에 발견할 수 있다.

// 예시: 테스트 주도 개발을 사용한 함수 개발
// 테스트 케이스 작성
test('add 함수가 두 숫자를 더한 결과를 반환한다', () => {
    expect(add(2, 3)).toBe(5);
});

// 함수 작성
function add(a, b) {
    return a + b;
}

테스트 주도 개발을 통해 코드의 품질을 높이고 유지보수성을 향상시킬 수 있다. 또한 개발자는 테스트 케이스를 통해 요구 사항을 명확히 이해하고 구현할 수 있다.

 

💡컨테이너화 (Containerization)

---

컨테이너화는 애플리케이션을 가상화된 환경인 컨테이너에 담아 배포하는 기술이다. Docker와 같은 컨테이너 플랫폼을 사용하여 애플리케이션의 실행 환경과 종속성을 캡슐화하고 효율적으로 관리할 수 있다.

// Dockerfile 예시
FROM node:14

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["node", "server.js"]

컨테이너화를 통해 개발 환경과 프로덕션 환경의 차이를 최소화하고, 애플리케이션의 배포 및 확장성을 향상시킬 수 있다. 또한 여러 개의 서비스를 쉽게 관리하고 확장할 수 있다.

 

💡CI/CD (Continuous Integration/Continuous Deployment)

---

CI/CD는 지속적 통합(Continuous Integration)과 지속적 배포(Continuous Deployment)의 약자로, 소프트웨어 개발 및 배포 과정을 자동화하여 개발자가 변경 사항을 빠르게 테스트하고 프로덕션 환경에 배포할 수 있도록 한다.

# CI/CD 파이프라인 설정 예시 (GitHub Actions)
name: CI/CD Pipeline

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Install dependencies
      run: npm install

    - name: Run tests
      run: npm test

    - name: Build and deploy
      run: |
        npm run build
        npm run deploy
      env:
        NODE_ENV: production

CI/CD를 사용하면 개발자는 변경 사항이 프로덕션에 배포되기 전에 테스트되고 검증될 수 있다. 이를 통해 버그를 사전에 발견하고 소프트웨어의 품질을 높일 수 있다.

 

💡웹 소켓(WebSockets)

---

웹 소켓은 클라이언트와 서버 간의 양방향 통신을 제공하는 통신 프로토콜이다. HTTP와는 달리 양방향으로 데이터를 주고받을 수 있으며, 실시간으로 데이터를 전송할 수 있는 기술로 널리 사용된다.

 

웹 소켓의 특징

1. 양방향으로 통신한다.

클라이언트와 서버 간의 양방향 통신을 지원하여 실시간으로 데이터를 주고받을 수 있다.

 

2. 실시간성을 가진다.

웹 소켓은 TCP 기반의 프로토콜로, 실시간으로 데이터를 전송할 수 있어 실시간 애플리케이션에 적합하다.

 

3. 지속적으로 연결된다.

HTTP와 달리 웹 소켓은 클라이언트와 서버 간에 지속적인 연결을 유지하므로, 연결 설정 및 해제에 따른 오버헤드가 없다.

 

웹 소켓의 구현

웹 소켓은 JavaScript를 사용하여 클라이언트 측과 서버 측에서 구현할 수 있다. 대표적으로는 클라이언트 측에서는 WebSocket API를 사용하고, 서버 측에서는 웹 소켓을 지원하는 프레임워크 또는 라이브러리를 사용한다. Node.js 환경에서는 ws 라이브러리가 널리 사용되며, 다른 언어 및 프레임워크에서도 웹 소켓을 지원하는 라이브러리가 제공된다.

 

클라이언트 측 (HTML + JavaScript)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Example</title>
</head>
<body>
    <script>
        const socket = new WebSocket('ws://localhost:3000'); // 웹 소켓 서버 주소

        // 서버로부터 메시지를 받았을 때 처리
        socket.onmessage = function(event) {
            console.log('서버로부터 메시지 수신:', event.data);
        };

        // 웹 소켓이 열렸을 때 처리
        socket.onopen = function() {
            console.log('웹 소켓 연결 성공');
            socket.send('안녕하세요, 서버!'); // 서버에 메시지 전송
        };

        // 웹 소켓이 닫혔을 때 처리
        socket.onclose = function() {
            console.log('웹 소켓 연결 닫힘');
        };
    </script>
</body>
</html>

 

서버 측 (Node.js + ws 라이브러리)

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 }); // 웹 소켓 서버 포트

// 클라이언트 연결 이벤트 처리
wss.on('connection', function(ws) {
    console.log('클라이언트 연결');

    // 클라이언트로부터 메시지를 받았을 때 처리
    ws.on('message', function(message) {
        console.log('클라이언트로부터 메시지 수신:', message);
        ws.send('안녕하세요, 클라이언트!'); // 클라이언트에 메시지 전송
    });

    // 클라이언트 연결 종료 처리
    ws.on('close', function() {
        console.log('클라이언트 연결 종료');
    });
});​​

위 코드는 간단한 웹 소켓 클라이언트 및 서버를 구현한 예시이다. 클라이언트와 서버는 각각 WebSocket 객체를 생성하고, 서버 주소를 통해 연결한다. 연결이 성공하면 이벤트 핸들러를 통해 메시지를 주고받고, 연결 상태를 모니터링한다.

웹 소켓은 실시간으로 데이터를 주고받는 데에 유용하며, 채팅 애플리케이션, 실시간 게임, 주식 시장 정보 전송 등 다양한 분야에서 활용된다.

 

2023.12.04 - [Programming/Spring] - [Spring] Socket Communication: 채팅 구현

[Spring] Socket Communication: 채팅 구현