자바스크립트 문법

개발 이론/WEB

자바스크립트 문법

jeonghoe21 2025. 3. 19. 23:47

1. 자바스크립트 문법과 이벤트 처리

1.1. 자바스크립트 문법

자바스크립트에서 변수를 선언하는 방법은 let, const, var입니다. let은 재할당이 가능한 변수이고, const는 재할당이 불가능한 변수입니다. var는 ES6 이전 방식으로 사용되며, 최신 코드에서는 let과 const를 더 많이 사용합니다.

예시:

let x = 10; // 재할당 가능
const y = 20; // 재할당 불가

1.2. 함수 정의

함수는 function 키워드로 정의할 수 있습니다. ES6에서 도입된 화살표 함수는 더 짧고 간결하게 함수를 작성할 수 있게 해줍니다.

함수 선언 예시:

function greet(name) { return 'Hello, ' + name + '!'; }
console.log(greet('John')); // "Hello, John!"

화살표 함수 예시:

const add = (a, b) => a + b;
console.log(add(3, 4)); // 7

1.3. 조건문과 반복문

조건문(if, else if, else)과 반복문(for, while, forEach)을 사용하여 로직을 제어할 수 있습니다.

조건문 예시:

let age = 18;
if (age >= 18) { console.log('성인입니다.'); } else { console.log('미성년자입니다.'); }

반복문 예시:

for (let i = 0; i < 5; i++) { console.log(i); // 0, 1, 2, 3, 4 }

1.4. 배열과 객체

배열과 객체는 자바스크립트에서 자주 사용되는 데이터 구조입니다.

배열 예시:

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // 'apple'

객체 예시:

const person = { name: 'John', age: 30 };
console.log(person.name); // 'John'

2. 자바스크립트 이벤트 처리

2.1. 이벤트 리스너 기본 사용법

이벤트 리스너는 특정 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수를 실행하는 방식입니다.

HTML 예시:

<button id="clickButton">클릭해 주세요</button>

자바스크립트 예시:

const button = document.getElementById('clickButton');
button.addEventListener('click', function() { alert('버튼이 클릭되었습니다!'); });

2.2. 이벤트 객체

이벤트 처리 함수에서는 이벤트 객체를 매개변수로 받아 클릭한 위치나 키보드 입력 등의 상세 정보를 얻을 수 있습니다.

HTML 예시:

<button id="clickButton">클릭해 주세요</button>

자바스크립트 예시:

const button = document.getElementById('clickButton');
button.addEventListener('click', function(event) { console.log('클릭한 위치:', event.clientX, event.clientY); });

2.3. 이벤트 전파 제어

이벤트 버블링과 캡처링은 이벤트가 DOM 트리에서 전파되는 방식입니다. stopPropagation() 메서드를 사용하여 이벤트가 부모 요소로 전파되는 것을 막을 수 있습니다.

HTML 예시:

<div id="parent"><button id="child">클릭해 주세요</button></div>

자바스크립트 예시:

const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function() { alert('부모가 클릭되었습니다.'); });
child.addEventListener('click', function(event) { alert('자식이 클릭되었습니다.'); event.stopPropagation(); });

2.4. 이벤트 델리게이션

이벤트 델리게이션은 부모 요소에 이벤트 리스너를 등록하여 자식 요소에서 발생한 이벤트를 처리하는 기법입니다. 이는 동적으로 추가된 자식 요소에 대해서도 이벤트 처리가 가능합니다.

HTML 예시:

<div id="parent"><button class="child">버튼 1</button><button class="child">버튼 2</button><button class="child">버튼 3</button></div>

자바스크립트 예시:

const parent = document.getElementById('parent');
parent.addEventListener('click', function(event) { if (event.target && event.target.matches('button.child')) { alert('버튼이 클릭되었습니다: ' + event.target.textContent); } });

3. 실무에서 자주 사용되는 자바스크립트 이벤트 처리 예시

3.1. 폼 유효성 검사

사용자가 입력한 데이터가 유효한지 확인하는 폼 유효성 검사는 웹 애플리케이션에서 매우 중요합니다. 자바스크립트를 사용하여 폼 전송 전에 유효성 검사를 할 수 있습니다.

HTML 예시:

<form id="loginForm"><input type="text" id="username" placeholder="사용자 이름" required><input type="password" id="password" placeholder="비밀번호" required><button type="submit">로그인</button></form>

자바스크립트 예시:

const form = document.getElementById('loginForm');
form.addEventListener('submit', function(event) { const username = document.getElementById('username').value; const password = document.getElementById('password').value; if (username === '' || password === '') { alert('모든 필드를 채워주세요.'); event.preventDefault(); } });

3.2. 동적인 콘텐츠 로딩 (AJAX 사용)

웹 페이지에서 동적으로 데이터를 로드하는 예시로, AJAX를 사용하여 서버에서 데이터를 받아오고 페이지를 업데이트할 수 있습니다.

HTML 예시:

<button id="loadDataBtn">데이터 로드</button><div id="dataContainer"></div>

자바스크립트 예시:

const loadDataBtn = document.getElementById('loadDataBtn');
const dataContainer = document.getElementById('dataContainer');
loadDataBtn.addEventListener('click', function() { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { dataContainer.innerHTML = JSON.stringify(data); }) .catch(error => console.error('데이터 로딩 오류:', error)); });

4. AJAX로 데이터를 가져오는 백엔드 구현 예시

4.1. Controller (Spring Boot 예시)

@RestController

@RequestMapping("/api")
@GetMapping("/data"): 이 메서드는 /api/data 경로로 GET 요청을 처리하고, 데이터베이스에서 데이터를 조회하여 JSON 형식으로 응답합니다.

@RestController @RequestMapping("/api")

public class DataController { @GetMapping("/data")

public ResponseEntity<List<Data>> getData() {

List<Data> dataList = dataService.getAllData();

return ResponseEntity.ok(dataList); } }

4.2. Service (Spring Boot 예시)

@Service

DataService: 이 클래스는 데이터를 가져오는 비즈니스 로직을 처리합니다.

@Service public class DataService {

@Autowired private DataRepository dataRepository;

public List<Data> getAllData() {

return dataRepository.findAll();

} }

4.3. Repository (Spring Boot 예시)

@Repository

DataRepository: 이 인터페이스는 JPA Repository를 사용하여 데이터베이스에서 데이터를 조회합니다.

@Repository public interface DataRepository extends JpaRepository<Data, Long> { }

AJAX (Asynchronous JavaScript and XML)란?

AJAX는 비동기식으로 데이터를 서버와 주고받을 수 있는 기술입니다. 웹 페이지를 새로 고침하지 않고도 서버로부터 데이터를 요청하고, 받은 데이터를 동적으로 웹 페이지에 업데이트할 수 있게 해줍니다.

AJAX는 JavaScript, XMLHttpRequest 객체 또는 Fetch API를 사용하여 클라이언트(브라우저)와 서버 간의 비동기적인 데이터 교환을 가능하게 만듭니다. 오늘날 JSON 형식의 데이터가 많이 사용되며, XML 대신 JSON을 사용하는 경우가 많습니다.

AJAX의 동작 방식

**클라이언트(브라우저)**에서 데이터를 요청.
서버가 요청을 처리하고 데이터를 응답.
클라이언트는 응답 데이터를 받아 웹 페이지를 새로 고침하지 않고 업데이트.

AJAX를 사용하여 데이터 가져오기

AJAX에서 데이터를 가져오는 가장 기본적인 방법은 XMLHttpRequest 객체 또는 fetch API를 사용하는 것입니다. fetch API는 최신 자바스크립트에서 주로 사용되며, Promise를 지원합니다. 아래에서는 fetch API를 사용한 예시를 통해 AJAX 동작을 설명하겠습니다.

fetch API 사용법

**fetch**는 기본적으로 **Promise**를 반환합니다. Promise는 비동기 작업의 결과를 나타내는 객체로, 작업이 완료되면 처리 결과를 얻을 수 있도록 합니다. fetch는 GET과 POST와 같은 HTTP 요청을 보낼 수 있으며, 데이터 요청을 비동기적으로 처리합니다.

1. fetch로 데이터 요청하기

fetch('https://api.example.com/data') // 서버에 데이터를 요청
    .then(response => response.json()) // 응답을 JSON 형태로 변환
    .then(data => {                    // 변환된 데이터를 처리
        console.log(data);              // 데이터를 콘솔에 출력
    })
    .catch(error => console.error('Error:', error)); // 오류 처리

코드 설명

fetch('https://api.example.com/data'):
- fetch() 함수는 URL을 인자로 받습니다. 여기서는 'https://api.example.com/data'라는 URL로 GET 요청을 보냅니다.
- 이 호출은 비동기적으로 동작하므로, 서버로부터 응답이 오면 그때 결과를 처리합니다.
.then(response => response.json()):
- fetch()는 Promise 객체를 반환합니다. 서버로부터 응답이 오면 then() 메서드가 호출됩니다.
- 응답은 일반적으로 Response 객체로 전달됩니다. 이를 JSON 형식으로 변환하려면 .json() 메서드를 사용합니다.
- .json()은 비동기 작업이므로 또 다른 Promise를 반환하고, 이를 .then()으로 처리합니다.
.then(data => {...}):
- 두 번째 then()은 .json()으로 변환된 데이터를 처리하는 함수입니다. 여기서 data는 서버로부터 받은 JSON 데이터입니다.
- data를 사용하여 필요한 동작을 할 수 있습니다. 예를 들어, 데이터를 HTML에 표시하는 등의 작업이 가능합니다.
.catch(error => console.error('Error:', error)):
- catch()는 오류 처리를 담당합니다. 만약 요청 중에 오류가 발생하거나, fetch() 호출에서 문제가 생기면 이 구문이 실행됩니다.
- 오류는 콘솔에 출력되며, 개발자는 이를 통해 문제를 해결할 수 있습니다.

기본 사용법:

fetch(url, options)
    .then(response => response.json())  // 응답을 JSON 형식으로 변환
    .then(data => {
        console.log(data);  // 데이터를 처리
    })
    .catch(error => {
        console.error('Error:', error);  // 오류 처리
    });

url: 요청할 URL을 지정합니다.
options: 요청에 대한 선택적인 설정을 지정할 수 있습니다. (예: method, headers, body 등)

fetch 예시들

1. 기본 GET 요청

가장 간단한 GET 요청은 URL만 지정해주면 됩니다. 예를 들어, API 서버에서 데이터를 받아오는 코드입니다.

fetch('https://api.example.com/data')
    .then(response => response.json())  // 응답을 JSON으로 변환
    .then(data => {
        console.log(data);  // 데이터를 출력하거나 처리
    })
    .catch(error => console.error('Error:', error));

이 코드는 https://api.example.com/data URL에 GET 요청을 보내고, JSON 데이터를 받아와서 처리합니다.

실제 데이터가 어떻게 넘어오는지?

예를 들어, https://api.example.com/data에서 데이터를 GET으로 요청할 때 서버가 응답하는 JSON 형식의 데이터는 다음과 같을 수 있습니다:

서버 응답 데이터 예시 (JSON):

{
  "status": "success",
  "data": {
    "id": 1,
    "username": "exampleUser",
    "email": "user@example.com"
  }
}

2. POST 요청 (서버로 데이터 전송)

서버로 데이터를 전송하려면, POST 메서드를 사용합니다. 데이터는 **body**로 전송됩니다.

fetch('https://api.example.com/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        username: 'exampleUser',
        password: 'examplePass'
    })
})
    .then(response => response.json())  // 응답을 JSON으로 변환
    .then(data => {
        console.log(data);  // 서버에서 받은 데이터 처리
    })
    .catch(error => console.error('Error:', error));

method: 'POST': HTTP 메서드를 POST로 설정.
headers: 요청의 헤더를 설정. 여기서 Content-Type: application/json은 요청 본문이 JSON 형식임을 나타냅니다.
body: 서버로 보내는 데이터. JSON.stringify()로 객체를 문자열로 변환하여 전송합니다.

실제 데이터가 POST로 넘어가는 방식 (HTML 폼과 데이터)

HTML 폼 예시 (POST 요청으로 데이터 전송)

자바스크립트로 POST 요청을 보내는 예시 (폼 제출 시)

const form = document.getElementById('loginForm');
form.addEventListener('submit', function(event) {
    event.preventDefault();  // 폼 제출을 막고, 자바스크립트로 데이터를 전송

    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    fetch('https://api.example.com/submit', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            username: username,
            password: password
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);  // 서버에서 받은 응답 처리
    })
    .catch(error => console.error('Error:', error));
});

실제 데이터가 POST로 넘어가는 방식

HTML에서 전송된 데이터 예시:

사용자가 username에 exampleUser, password에 examplePass를 입력합니다.
**fetch()**로 서버로 요청을 보낼 때 **JSON.stringify()**를 사용하여 데이터는 다음과 같은 형태로 서버로 전송됩니다:

{
"username": "exampleUser",
"password": "examplePass"
}

서버에서는 이 데이터를 받아 로그인 절차를 처리하고, 응답을 반환합니다.

서버 응답 데이터 예시 (POST 요청에 대한 응답):

{
    "status": "success",
    "message": "로그인 성공!",
    "userData": {
        "id": 1,
        "username": "exampleUser",
        "email": "user@example.com"
    }
}

3. GET 요청에 쿼리 매개변수 추가

GET 요청에 URL 뒤에 쿼리 문자열을 추가하여 특정 데이터를 요청할 수 있습니다.

fetch('https://api.example.com/data?search=apple&limit=10')
    .then(response => response.json())
    .then(data => {
        console.log(data);  // 검색 결과 데이터 처리
    })
    .catch(error => console.error('Error:', error));

?search=apple&limit=10: 쿼리 문자열을 URL에 추가하여 서버에 특정 조건으로 요청합니다.

4. POST 요청에서 FormData 사용 (파일 업로드 포함)

파일 업로드와 같은 데이터를 POST 요청으로 전송할 때, FormData 객체를 사용합니다. 이를 통해 파일을 포함한 데이터를 서버에 보낼 수 있습니다.

const formData = new FormData();
formData.append('file', document.getElementById('fileInput').files[0]);

fetch('https://api.example.com/upload', {
    method: 'POST',
    body: formData  // FormData를 body로 전송
})
    .then(response => response.json())
    .then(data => {
        console.log(data);  // 업로드 결과 처리
    })
    .catch(error => console.error('Error:', error));
FormData.append('file', file)은 파일을 FormData 객체에 추가합니다.
body: formData: fetch에 FormData 객체를 전송하여 파일 업로드를 처리합니다.

5. PUT 요청 (리소스 업데이트)

서버에서 기존 데이터를 업데이트할 때는 PUT 메서드를 사용합니다.

fetch('https://api.example.com/updateData', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        id: 1,
        name: 'Updated Name'
    })
})
    .then(response => response.json())
    .then(data => {
        console.log(data);  // 업데이트된 데이터 처리
    })
    .catch(error => console.error('Error:', error));

method: 'PUT': HTTP 메서드를 PUT으로 설정.
body: 수정할 데이터를 JSON.stringify()로 변환하여 전송합니다.

6. DELETE 요청 (리소스 삭제)

서버에서 데이터를 삭제할 때는 DELETE 메서드를 사용합니다.

method: 'DELETE': HTTP 메서드를 DELETE로 설정.
URL에 삭제할 리소스를 지정하여 요청합니다.

7. fetch와 async/await 사용하기

async/await 문법을 사용하면 비동기 코드를 더 깔끔하고 읽기 쉽게 작성할 수 있습니다. fetch를 await와 함께 사용하면, then()을 체이닝하지 않고도 결과를 쉽게 처리할 수 있습니다.

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchData();
await는 fetch가 반환하는 Promise가 해결될 때까지 기다리고, response.json()도 비동기적으로 처리됩니다.
try/catch 블록을 사용하여 오류를 처리할 수 있습니다.

'개발 이론 > WEB' 카테고리의 다른 글

HTML/CSS/JS (0)	2025.03.13
API (0)	2025.03.01
웹(Web)이란? (0)	2025.02.20

현재글자바스크립트 문법

jeonghoe21 님의 블로그

jeonghoe21 님의 블로그 입니다.

wms, spring security, java, Web, html, jsp, Spring, SQL, Solid, SSR, CSS, js, JWT, 객체지향, Spring MVC, API, Spring Boot,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31