[멋쟁이사자처럼 부트캠프 TIL 회고] 백엔드 부트캠프 13기: Java 24일차 JavaScript, AJAX

JavaScript

웹 개발을 위한 프로그래밍 언어로, 웹 페이지에 동적 기능을 추가하고 사용자와 상호작용할 수 있도록 해줌.

브라우저에서 실행되는 클라이언트 측 스크립트 언어.

크롬의 자바스크립트기능을 이용하여 메뉴이름을 변경하는 예시.

JavaScript의 주요 특징

동적이고 유연한 언어:
- 데이터 타입을 자동으로 변환하고, 변수에 다양한 타입의 데이터를 할당할 수 있습니다.
- 런타임 중에 객체를 수정하거나 새로운 속성을 추가할 수 있습니다.
객체 기반:
- 모든 것이 객체처럼 동작하며, 프로토타입 상속을 통해 객체를 확장할 수 있습니다.
웹 브라우저에서 실행:
- 웹 페이지에서 동적인 콘텐츠를 구현할 수 있습니다(예: 버튼 클릭 이벤트, 폼 검증, 애니메이션 등).
비동기 처리:
- 콜백, 프로미스(Promise), async/await을 통해 네트워크 요청 등 시간 지연 작업을 처리할 수 있습니다.
크로스 플랫폼:
- 브라우저뿐만 아니라 Node.js 환경에서 서버 측 스크립트를 작성할 수도 있습니다.

JavaScript의 주요 용도

클라이언트 측 웹 개발:
- 웹 페이지에서 동적 콘텐츠를 추가.
- 예: 슬라이더, 모달 창, 드롭다운 메뉴.
서버 측 개발 (Node.js):
- 백엔드 애플리케이션 개발.
- RESTful API 서버 구축, 실시간 채팅 애플리케이션.
프론트엔드 프레임워크 및 라이브러리:
- React, Angular, Vue.js와 같은 프레임워크를 사용한 SPA(Single Page Application) 개발.
모바일 앱 개발:
- React Native, Ionic 등을 활용하여 모바일 앱 개발.
게임 개발:
- WebGL, Three.js 등을 사용한 브라우저 기반 2D/3D 게임 개발.
데스크톱 애플리케이션 개발:
- Electron.js를 사용하여 크로스 플랫폼 데스크톱 애플리케이션 제작.

JavaScript의 장점

가볍고 빠름: 브라우저에서 바로 실행되어 추가 설치 없이 동작.
풍부한 생태계: 수많은 라이브러리와 프레임워크를 통해 개발 속도 향상.
상호작용: 이벤트 처리로 사용자의 입력에 실시간 반응 가능.
크로스 플랫폼: 브라우저, 서버, 데스크톱, 모바일 등 다양한 환경에서 사용 가능.

JavaScript의 단점

브라우저 의존성: 일부 기능이 브라우저마다 다르게 동작할 수 있음.
동기적 코드의 복잡성: 비동기 작업의 체계적인 처리가 필요.
런타임 에러: 정적 타입 언어가 아니므로 실행 중에 에러를 발견할 가능성이 높음.

JavaScript 기본 코드 예제

1. 버튼 클릭 이벤트 처리

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    <button id="myButton">Click Me!</button>
    <p id="message"></p>

    <script>
        const button = document.getElementById('myButton');
        const message = document.getElementById('message');

        button.addEventListener('click', () => {
            message.textContent = 'Button Clicked!';
        });
    </script>
</body>
</html>

script태그 부분.

스크립트태그 : 보통은 바디태그 끝나기전에 삽입.

만약 <script> 태그가 <head>나 HTML의 상단부에 위치하면, 스크립트를 다운로드하고 실행하는 동안 HTML 로딩이 차단됨. 이로 인해 페이지 콘텐츠 로딩 지연 문제가 발생할 수 있음.

페이지 콘텐츠를 먼저 표시해야하므로 <script> 태그를 <body> 태그 끝에 배치하면, 브라우저는 HTML 콘텐츠를 먼저 렌더링하고, 마지막에 스크립트를 로드함. 이렇게 하면 사용자는 빠르게 페이지 내용을 볼 수 있어 UX가 향상됨.

예외: <head>에 스크립트를 삽입하는 경우

일부 상황에서는 스크립트를 <head>에 배치할 수 있습니다.
그러나 성능 저하를 방지하기 위해 다음 속성을 사용합니다:

defer: HTML을 모두 파싱한 뒤 스크립트를 실행.
async: 스크립트를 비동기적으로 로드하며, HTML 파싱과 병렬로 진행.

<head>
  <script src="script.js" defer></script>
</head>

2. 비동기 데이터 요청 (Fetch API)

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

자바스크립트는 함수를 일급 객체(first-class object)로 취급한다

일급 객체란?

일급 객체는 다음 조건을 만족하는 객체를 말합니다:

변수에 함수를 할당할 수 있다.
함수를 다른 함수의 인수로 전달할 수 있다.
함수를 다른 함수의 결과값으로 반환할 수 있다.
데이터 구조(객체, 배열)에 저장할 수 있다.
동적으로 생성하거나 삭제할 수 있다.

자바스크립트에서의 함수 활용

자바스크립트에서 함수는 일급 객체로 취급되므로, 다음과 같은 작업이 가능합니다.

1. 함수를 변수에 할당

함수 자체를 값처럼 변수에 할당할 수 있습니다.

const sayHello = function() {
    console.log("Hello!");
};
sayHello(); // "Hello!"

2. 함수를 다른 함수의 인수로 전달

함수를 다른 함수의 매개변수로 전달하여 호출할 수 있습니다.

function greet(callback) {
    callback();
}

function sayHello() {
    console.log("Hello!");
}

greet(sayHello); // "Hello!"

3. 함수를 다른 함수의 반환값으로 사용

함수를 생성하여 반환할 수 있습니다.

function createMultiplier(multiplier) {
    return function (number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
console.log(double(5)); // 10

4. 함수를 데이터 구조에 저장

함수를 배열이나 객체 안에 저장하고 사용할 수 있습니다.

const functions = [
    function () { return "A"; },
    function () { return "B"; },
    function () { return "C"; }
];

console.log(functions[1]()); // "B"

const obj = {
    greet: function () { return "Hello!"; }
};
console.log(obj.greet()); // "Hello!"

왜 일급 객체가 중요한가?

유연성:
- 함수를 값처럼 다룰 수 있기 때문에 프로그램의 구조를 더 유연하게 설계할 수 있습니다.
콜백 함수:
- 비동기 프로그래밍(AJAX, 이벤트 처리 등)에서 함수가 인수로 전달되어 호출되는 패턴을 쉽게 구현.
고차 함수:
- 함수를 반환하거나 인수로 받는 **고차 함수(higher-order function)**를 구현할 수 있어 함수형 프로그래밍이 가능.
클로저 활용:
- 함수를 반환할 때 클로저를 만들어 데이터 캡슐화와 같은 패턴을 구현.

일급 객체 예시와 설명

고차 함수 예시

고차 함수는 다른 함수를 인수로 받거나, 함수를 반환하는 함수입니다.

// 고차 함수: 함수를 인수로 받음
function repeat(n, action) {
    for (let i = 0; i < n; i++) {
        action(i);
    }
}

repeat(3, console.log); // 0, 1, 2

클로저 예시

클로저는 반환된 함수가 외부 함수의 변수에 접근할 수 있는 패턴입니다.

function makeCounter() {
    let count = 0;
    return function () {
        count++;
        return count;
    };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

요약

"자바스크립트는 함수를 일급 객체로 취급한다"는 말은 함수를 값처럼 다룰 수 있다는 의미입니다.
함수는 변수에 할당하거나, 다른 함수의 인수로 전달하거나, 반환값으로 사용할 수 있습니다.
이러한 특성은 고차 함수, 콜백, 클로저 등의 강력한 기능을 가능하게 합니다.

웹 애플리케이션이나 서비스에서 사용자와의 상호작용할때
- 요청: 회원가입폼 보여줘요, 회원가입 시켜줘요 -> 요청이 2번 이루어짐.
- 자바스트립트로 처리하면 데이터가 서버로 왔다간게 아니기때문에 데이터가 사용자에 남아있게된다

TypeScript : JavaScript에 정적 타입 지정(Static Typing)과 객체 지향 프로그래밍 기능을 추가한 언어. JavaScript의 모든 기능을 포함하면서도 대규모 애플리케이션 개발에 적합한 기능을 제공한다.

간단한 TypeScript 코드 예제

// 변수에 타입 지정
let userName: string = "Alice";
let userAge: number = 30;

// 함수에 타입 지정
function greet(name: string): string {
    return `Hello, ${name}`;
}

console.log(greet(userName)); // 출력: Hello, Alice

// 클래스 정의
class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    speak(): string {
        return `${this.name} makes a sound.`;
    }
}

const dog = new Animal("Dog");
console.log(dog.speak()); // 출력: Dog makes a sound.

AJAX (Asynchronous JavaScript and XML)

비동기적 웹 애플리케이션 개발 기법으로, 웹페이지를 새로 고치지 않고 서버와 데이터를 주고받을 수 있도록 해줍니다.

AJAX는 특정 기술이나 프로토콜이 아니라 여러 웹 기술의 조합을 통해 사용자 경험(UX)을 개선하는 방법입니다.

AJAX의 주요 특징

비동기적 데이터 처리:
- 전체 페이지를 새로고침하지 않고 서버와 데이터를 주고받을 수 있습니다.
- 사용자 작업 흐름이 방해받지 않음.
빠른 응답성:
- 필요한 데이터만 갱신하므로 속도가 향상되고 대역폭이 절약됩니다.
데이터 포맷:
- XML뿐 아니라 JSON, HTML, 텍스트 등 다양한 데이터 포맷을 지원.

AJAX의 구성 요소

AJAX는 다음 기술의 조합으로 동작합니다:

HTML & CSS:
- 웹페이지의 구조와 디자인을 정의.
JavaScript:
- AJAX 요청을 생성하고, 서버로부터 받은 데이터를 처리.
XMLHttpRequest 객체:
- 브라우저에서 서버와 비동기적으로 데이터를 주고받는 데 사용되는 핵심 도구.
데이터 포맷:
- 데이터를 교환하기 위해 XML, JSON, HTML, 텍스트 등이 사용됩니다.
서버측 스크립트:
- PHP, Node.js, Python 등의 서버 언어를 사용하여 클라이언트 요청을 처리하고 데이터를 반환.

AJAX의 동작 원리

사용자 작업:
- 사용자가 버튼 클릭, 스크롤 등 이벤트를 발생시킴.
AJAX 요청 생성:
- JavaScript의 XMLHttpRequest 객체를 통해 서버에 요청 전송.
서버 처리:
- 서버는 요청을 처리하고 필요한 데이터를 준비.
AJAX 응답:
- 서버가 데이터를 클라이언트로 전송.
페이지 갱신:
- JavaScript가 서버 응답 데이터를 받아 필요한 부분만 DOM에 업데이트.

AJAX의 장점

빠른 사용자 경험:
- 페이지 전체를 리로드하지 않으므로 로딩 속도가 빨라집니다.
대역폭 절약:
- 필요한 데이터만 전송하여 네트워크 사용량이 줄어듭니다.
유연한 데이터 처리:
- 다양한 포맷(XML, JSON 등)의 데이터를 처리할 수 있음.

AJAX의 단점

SEO 문제:
- 비동기로 로드된 데이터는 검색 엔진이 인덱싱하지 못할 수 있음.
브라우저 호환성:
- 일부 오래된 브라우저에서 동작하지 않을 수 있음.
보안 문제:
- 클라이언트-서버 간 데이터 전송 중 보안 취약점이 생길 수 있음.

AJAX의 코드 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example</title>
    <script>
        function loadData() {
            // 1. XMLHttpRequest 객체 생성
            const xhr = new XMLHttpRequest();

            // 2. 요청 초기화
            xhr.open('GET', 'data.txt', true);

            // 3. 서버 응답 처리
            xhr.onload = function () {
                if (xhr.status === 200) {
                    document.getElementById('content').innerText = xhr.responseText;
                }
            };

            // 4. 요청 전송
            xhr.send();
        }
    </script>
</head>
<body>
    <h1>AJAX Example</h1>
    <button onclick="loadData()">Load Data</button>
    <div id="content">Here will be the server data.</div>
</body>
</html>

AJAX와 Fetch API

Fetch API는 최신 브라우저에서 AJAX를 대체하는 기능으로, AJAX보다 사용이 간단하며 Promise 기반으로 작성됩니다.

function fetchData() {
    fetch('data.txt')
        .then(response => response.text())
        .then(data => {
            document.getElementById('content').innerText = data;
        })
        .catch(error => console.error('Error:', error));
}

AJAX가 사용되는 사례

회원가입, 로그인 폼:
- 입력한 데이터를 서버에 전송하고 결과를 즉시 표시.
검색 자동완성:
- 사용자가 입력할 때마다 관련 데이터를 서버에서 받아와 화면에 표시.
채팅 애플리케이션:
- 새 메시지를 실시간으로 받아와 표시.
무한 스크롤:
- 사용자가 스크롤할 때 추가 데이터를 서버에서 받아와 표시.
대시보드 업데이트:
- 실시간 데이터를 주기적으로 받아와 업데이트.

결론

AJAX는 현대적인 웹 애플리케이션의 핵심 기술로, 비동기적 데이터 처리를 통해 사용자 경험을 크게 향상시킵니다. 최신 기술로는 Fetch API와 Axios 라이브러리가 AJAX의 대안으로 널리 사용됩니다.

'멋쟁이사자처럼_부트캠프 > JavaScript' 카테고리의 다른 글

[멋쟁이사자처럼 부트캠프 TIL 회고] 백엔드 부트캠프 13기: Java 27일차 JavaScript 연동, 이벤트 핸들러 (0)	2025.01.09
[멋쟁이사자처럼 부트캠프 TIL 회고] 백엔드 부트캠프 13기: Java 25일차 JavaScript 함수 (0)	2025.01.07

Morgan's Matrix

[멋쟁이사자처럼 부트캠프 TIL 회고] 백엔드 부트캠프 13기: Java 24일차 JavaScript, AJAX

JavaScript

JavaScript의 주요 특징

JavaScript의 주요 용도

JavaScript의 장점

JavaScript의 단점

JavaScript 기본 코드 예제

일급 객체란?

자바스크립트에서의 함수 활용

왜 일급 객체가 중요한가?

AJAX (Asynchronous JavaScript and XML)

AJAX의 주요 특징

AJAX의 구성 요소

AJAX의 동작 원리

AJAX의 장점

AJAX의 단점

AJAX와 Fetch API

AJAX가 사용되는 사례

결론

'멋쟁이사자처럼_부트캠프 > JavaScript' 카테고리의 다른 글

티스토리툴바

[멋쟁이사자처럼 부트캠프 TIL 회고] 백엔드 부트캠프 13기: Java 24일차 JavaScript, AJAX

JavaScript

JavaScript의 주요 특징

JavaScript의 주요 용도

JavaScript의 장점

JavaScript의 단점

JavaScript 기본 코드 예제

일급 객체란?

자바스크립트에서의 함수 활용

왜 일급 객체가 중요한가?

AJAX (Asynchronous JavaScript and XML)

AJAX의 주요 특징

AJAX의 구성 요소

AJAX의 동작 원리

AJAX의 장점

AJAX의 단점

AJAX와 Fetch API

AJAX가 사용되는 사례

결론

'멋쟁이사자처럼_부트캠프 > JavaScript' 카테고리의 다른 글

'멋쟁이사자처럼_부트캠프/JavaScript' Related Articles

티스토리툴바