안녕하세요. 엔지엠소프트웨어입니다. 업무 자동화 RPA 매크로에서 웹 API를 사용하는 분들이 늘어남에 따라 자바스크립트에 대한 질문이나 문의가 많아지고 있네요. 엔지엠소프트웨어에서 다루고 있는 언어들이 대부분 컴파일 언어다보니 인터프리터 언어인 자바스크립트에 대한 설명이 다소 부족한것은 사실입니다. 그래서, 웹업무를 자동화하기 위해서 어느정도 알고 있으면 좋을만한 자바스크립트 내용을 몇회에 걸쳐서 작성하려고 합니다. 매크로에서 쓸만한 자바스크립트들은 이미 작성되어 있는것들이 있는데요. 이 글들은 기본적으로 자바스크립트를 다룰줄 안다는 가정하에 함수만을 정리한 글들입니다. 그래서 응용이 잘 안되는 분들이 많은거 같아요. 기초 학습이 이루어지면 초보자분들도 직접 응용해서 원하는 기능을 구현할 수 있을겁니다^^

 

변수

이미 엔지엠 매크로를 이용해서 업무 자동화를 하고 계신분들은 변수가 어떤 용도로 사용되는지 알고 계실겁니다. 이미 잘 사용하고 있을테니까요. 변수란 값을 담는 그릇을 의미합니다. 자바스크립트에서 변수를 선언할 때는 let 키워드를 사용합니다. 엔지엠 매크로에서는 [ 변수 추가 ] 액션을 사용합니다.

let x = 5;
let y = "NGMsoftware";

 

조건문

조건문은 특정 조건에 따라 코드를 실행하거나 건너뛰는 제어문입니다. 자바스크립트에서는 if-else 문을 사용합니다. 엔지엠 매크로에서는 아래 그림과 같이 조건 액션들을 사용합니다.

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

 

반복문

반복문은 특정 코드를 반복적으로 실행하는 제어문입니다. 자바스크립트에서는 for 문을 사용합니다. 엔지엠 매크로에서는 [ For 반복 ] 또는 [ Foreach 반복 ]을 사용합니다. 이외에도 [ 액션 이동 ]을 사용하여 무한 반복하거나 옵션의 반복 횟수를 사용하여 매크로를 반복해서 수행할 수 있습니다.

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

 

함수

함수는 특정 기능을 수행하는 코드 블록입니다. 자바스크립트에서 함수를 선언할 때는 function 키워드를 사용합니다.

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

greet("John");

 

배열

배열은 여러 개의 값을 하나의 변수에 저장할 수 있는 자료형입니다. 자바스크립트에서 배열을 선언할 때는 대괄호([])를 사용합니다.

let numbers = [1, 2, 3, 4, 5];
let fruits = ["apple", "banana", "orange"];

 

객체

객체는 여러 개의 속성을 가지는 자료형입니다. 자바스크립트에서 객체를 선언할 때는 중괄호({})를 사용합니다.

let person = {
  name: "John",
  age: 30,
  city: "New York"
};

 

클래스

클래스는 객체를 생성하기 위한 템플릿입니다. 자바스크립트에서 클래스를 선언할 때는 class 키워드를 사용합니다.

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  speak() {
    console.log(`${this.name} is speaking.`);
  }
}

let cat = new Animal("Kitty", 2);
cat.speak();

 

모듈

모듈은 코드를 여러 개의 파일로 분리하여 관리하는 기능입니다. 자바스크립트에서 모듈을 사용하기 위해서는 import와 export 구문을 사용합니다.

// math.js
export function add(x, y) {
  return x + y;
}

// main.js
import { add } from "./math.js";

console.log(add(1, 2)); // 3

 

비동기 처리

비동기 처리란 코드의 실행 순서와 관계없이 특정 코드를 실행하는 방식을 의미합니다. 자바스크립트에서는 Promise와 async/await 구문을 사용하여 비동기 처리를 구현할 수 있습니다. 엔지엠 매크로에서 비동기 처리는 다양한 액션에서 사용할 수 있습니다. 자바스크립트의 함수와 비슷하게 사용되는 [ 서브스크립트 ]가 대표적입니다. 이외에도 이벤트나 시간 관련된 액션들이 비동기로 처리할 수 있습니다.

// Promise
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched.");
    }, 1000);
  });
}

fetchData().then(data => console.log(data));

// async/await
async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched.");
    }, 1000);
  });
}

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

 

자바스크립트의 DOM (Document Object Model)

자바스크립트에서 DOM(Document Object Model)은 HTML, XML 또는 XHTML 문서의 프로그래밍 인터페이스입니다. DOM은 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공합니다. DOM은 트리 구조로 이루어져 있으며, 각 요소는 노드(node)로 표현됩니다. 노드는 요소(element), 속성(attribute), 텍스트(text), 주석(comment) 등의 유형이 있습니다. 자바스크립트를 사용하여 DOM에 접근하고 조작할 수 있습니다. 예를 들어, document 객체는 현재 문서를 나타내며, getElementById() 메서드를 사용하여 문서 내의 요소에 접근할 수 있습니다. DOM을 사용하면 동적으로 문서를 변경하고, 이벤트 처리 및 애니메이션과 같은 상호작용적인 웹 페이지를 만들 수 있습니다.

// HTML 요소 가져오기
const myElement = document.getElementById('myElement');

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

// 새로운 요소 추가
const newElement = document.createElement('div');
newElement.innerHTML = '새로운 요소';
document.body.appendChild(newElement);

// 이벤트 리스너 추가
myElement.addEventListener('click', () => {
  alert('요소가 클릭되었습니다!');
});

 

DOM을 사용한 예제 코드입니다. getElementById() 메서드를 사용하여 HTML 요소를 가져오고, innerHTML 속성을 사용하여 요소 내용을 변경하고, createElement() 메서드와 appendChild() 메서드를 사용하여 새로운 요소를 추가합니다. 또한, addEventListener() 메서드를 사용하여 클릭 이벤트 리스너를 추가합니다. DOM은 웹 개발에서 매우 중요한 개념이며, 자바스크립트와 함께 사용하여 동적인 웹 페이지를 만들 수 있습니다. 하지만, DOM 조작이 많아질수록 성능이 저하될 수 있으므로, 가능한 적은 DOM 조작을 하는 것이 좋습니다.

 

Ajax (Asynchronous JavaScript and XML, 아작스)

자바스크립트에서 DOM을 사용하는 일반적인 예로는 AJAX 요청을 만드는 것이 있습니다. AJAX란 Asynchronous JavaScript and XML의 약자로, 웹 페이지를 새로 고치지 않고 동적으로 콘텐츠를 업데이트할 수 있게 해줍니다.

AJAX 요청을 만들기 위해서는 대부분의 최신 웹 브라우저에 내장된 XMLHttpRequest 객체를 사용할 수 있습니다. 다음은 예시 코드입니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', '<https://example.com/data>');
xhr.onload = () => {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.error('Request failed!');
  }
};
xhr.send();

 

이 코드는 새로운 XMLHttpRequest 객체를 생성하고, HTTP 메서드와 URL을 설정하며, 요청이 완료되었을 때 실행할 콜백 함수를 지정합니다. 콜백 함수는 응답의 상태 코드를 확인하여 요청이 성공했는지 여부를 결정하고, 성공했다면 응답을 콘솔에 로그합니다. 아작스(Ajax) 사용방법까지 자바스크립트의 기본적인 문법과 기술에 대해 알아봤습니다. 실제로 프로젝트에서 자바스크립트를 사용할일은 없을겁니다. 프로젝트는 React, Vue, Anglure를 사용하니까요. 그리고, 타입스크립트(TypeScript)를 이용해서 렌더링시에 자바스크립트로 변환된 코드를 클라이언트로 내려줍니다. 다음에는 몇가지 예제를 통해 학습해보기로 하고요. 오늘 배운 내용을 토대로 이것 저것 테스트 해보시기 바랍니다. 직접 코딩하면서 결과를 눈으로 확인하는건 매우 중요한 일입니다. 그래야 기억에 오래 남기 때문입니다^^

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0