> For the complete documentation index, see [llms.txt](https://docs.apidrag.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apidrag.com/quick-start/concepts/coding.md).

# Coding 기초

API Drag는 초보자도 쉽게 Macro 서비스를 개발할 수 있도록 하는 것을 목표로 합니다. 하지만 보다 풍부한 기능을 구현하기 위해서는 아래 초보적인 수준의 코딩 개념을 익히는 것을 추천드립니다. 

저희 튜토리얼에서 제공하는 기초 개념만 알고 있으면 저희 API Drag 서비스를 이용하여 다양한 Macro 서비스를 개발할 수 있습니다.

## 데이터 타입

API Drag 서비스는 JavaScript 언어를 인식하고 사용할 수 있습니다. 또한 Project 편집기 내 아이템 블럭에서 사용할 수 있는 모든 데이터의 타입을 JavaScript 기준에 맞추었습니다. 

JavaScript 가 아닌 다른 언어에서는 다양한 데이터 타입이 사용되지만, JavaScript에서 변수는 데이터 타입을 구분하지 않습니다. 다만, 데이터를 변수에 담을 때의 형태에 따라 자동으로 데이터 타입을 구분합니다. 따라서 아래 제공하는 세 종류의 데이터 타입의 구분만 이해하시면 API Drag를 이용하시는데 문제가 없습니다.

#### string

문자열 데이터입니다. 보통 <mark style="color:red;">**"**</mark> 와 <mark style="color:red;">**"**</mark> , 또는 <mark style="color:red;">**'**</mark> 와 <mark style="color:red;">**'**</mark> 사이에 존제하는 문자 전체를 문자열이라고 합니다.

예를 들면 **"동해물과 백두산이"** 와 **"1234"** 모두 문자열입니다.

#### number

숫자형 데이터에는 Short, Integer, Long, Float, Double 등 데이터의 크기에 따라 다양하게 존재합니다. 그러나 JavaScript에서는 이러한 데이터타입을 구분하지 않고 number 타입 하나로 취급합니다.

코딩시에 변수에 숫자형 데이터를 답고 싶다면 키보드 자판위에 숫자와 소숫점을 위한 <mark style="color:red;">.</mark> 기호로 구성된 데이터면 충분합니다. 여기에 양수와 음수를 구분하기 위해 (-) 를 앞에 붙여주면 음수 데이터가 됩니다.

예를 들면 **1234**, **123.4**, **-3456** 등이 number 데이터입니다.

#### boolean

boolean 은 참/거짓 데이터를 담을 수 있는 데이터형입니다.&#x20;

변수에 값을 담을 때에는 따옴표문없이자 **true** 혹은 **false** 를 지정하면 되지만, 문자열처럼 보인다고 "true" 나 "false" 로 하게되면 boolean 데이터형이 아니라 문자형으로 인식하게 되기 때문에 주의 하셔야 합니다.

boolean 형 데이터는 주로 판단 용도로 사용 됩니다. 아래 설명하게 될 조건문에서는 필수이므로 간단하지만 잘 기억해두세요.

## 변수와 상수

{% hint style="info" %}
**블록:** 코딩은 블록과 블록으로 영역을 구분하여 작업을 수행합니다. 하나의 블록은 "<mark style="color:red;">{</mark>" 와 "<mark style="color:red;">}</mark>" 로 감싸인 내부 영역을 하나의 블록으로 취급합니다.
{% endhint %}

위에서 데이터타입에 대하여 설명을 드렸습니다. 데이터타입은 메모리에 존재하는 실질적인 값입니다. 그러나 우리는 코딩에서 그 값을 바로 사용할 수 없습니다. 그래서 그 값을 대표하는 변수를 선언하여 대신 활용하게 됩니다.

변수라는 뜻은 그 한자 의미에서도 알 수 있듯 변한다는 의미입니다. 코딩에서 변수를 선언하면, 그 변수 안에 들어있는 값은 변할 수 있다는 뜻 입니다.&#x20;

변수의 반대 키워드로는 상수가 있습니다. 상수는 한번 선언이 되면 값을 바꿀 수 없다는 의미입니다.

JavaScript 에서 변수를 선언하는 방법 2가지와 상수 선언 1가지에 대하여 알아보겠습니다.

1. **const** : 상수 선언을 위한 키워드 입니다. 최초에 상수를 선언하면 그 값을 바꿀 수 없습니다.
2. **let** : 변수를 선언하는 방법 중 1가지 입니다. let로 선언한 변수는 그 값은 변경될 수 있지만 동일 블록 내에서는 재선언 할 수 없습니다.
3. **var** : 변수를 선언하는 방법 중  마지막 입니다. 이 방법은 언제든 값을 바꿀 수 있고 재선언도 가능한 방법입니다.

이제 변수와 상수를 선언하는 예제를 보겠습니다.

```javascript
const COUNTRY_CODE = 82;

var company = "Apple";
let memberName = "홍길동";
let age = 33;
let weight = 78.3;
let isKind = true;

var company = "Samsung"; //company 변수 재선언
memberName = "전우치";
age = 32;
weight = 77.6;
isKind = false;
```

위 예제를 보시면 다양한 데이터 타입과, 변수 및 상수 선언 방법에 대하여 제시를 하였습니다. 앞서 설명드린 내용을 잘 읽어보시면서 예제의 패턴들을 비교해 보세요.

## 조건문

조건문은 코딩의 흐름을 제어하는 기능으로, 조건의 맞고 틀림을 이용하여 개발자가 미리 준비해 놓은 흐름으로 유도할 수 있도록 합니다.

조건문은 모두 if, else if, else 키워드로 표현이 됩니다.&#x20;

**if** 문장에서 조건을 제시하여 맞는다면 그 내부의 코딩 영역(블록)을 수행할 것이고, 맞지 않는다면 내부의 코딩 영역(블록)을 Skip 하고 지나갈 것입니다.

**else if** 키워드는 if 키워드 다음에 올 수 있습니다. 만약 if 키워드에 의해 검증한 조건이 맞지 않는다면 다음 블록으로 지정된 else if 블록 조건을 검증하게 됩니다. if 키워드는 조건문에 한번 사용되지만 else if 키워드는 원하는 만큼 여러번 사용이 가능합니다.

**else** 키워드는 조건문에 필수는 아니지만, 항상 조건문의 마지막에 단 한번 사용할 수 있습니다. 조건문의 흐름에서 if와 else if 의 조건에 맞지 않았다면 마지막에 만나는 else 를 수행하게 될 것입니다.

아래 몇가지 패턴의 조건문 예제를 보겠습니다.

```javascript
const hwangab = 60;
let age = 51;
let decision = "";

if(age < hwangab){
    decision = "Still baby.";
}else if(age == hwangab){
    decision = "Hmm, boy!";
}else{
    decision = "Finally, man.";
}
```

```javascript
let nationality = "Korean";
if(nationality != null){
    console.log(nationality);
}

if(nationality == "American"){
    console.log("Speak English.");
}else{
    console.log("Do you speak Korean?");
}
```

{% hint style="info" %}
**null :** 변수에 어떠한 값도 할당되지 않았다는 의미입니다. 가끔 공백문자와 혼동하는 경우가 있는데, 공백문자 선언을 보면 **let empty = "";** 와 같이 선언되는데, 이는 공백인 문자가 변수에 할당 된 것이지 null과는 구분이 되어야 합니다.
{% endhint %}

## 반복문

코딩을 단순하게 정의를 하자면, '**조건문을 통해 흐름을 제어하고 반복문을 통해 자동화를 하는 것이다**.' 라고 말할 수 있습니다. 앞에서 조건문을 알아봤으니 이제 반복문을 알면 코딩의 기초는 모두 끝납니다.

반복문의 키워드는 for 와 while 두 종류가 있습니다. for 키워드의 경우 반복의 횟수를 중심으로 순환하는 방식이라면 while 은 조건이 만족하거나 만족하지 않는 기준을 중심으로 순환하는 방식입니다.

#### for문 예제

```javascript
for(let i=0; i<10; i++){
    console.log(i);
}
```

#### 실행결과

```
0
1
2
3
4
5
6
7
8
9
```

위 for 문장을 해설하자면, 우선 **i** 라는 변수에 **0**을 할당합니다. 그리고 그 값이 10보다 작은지 조건을 확인하고, 조건을 만족한다면 블록 안으로 진입해서 변수 i 에 할당되어 있는 0을 프린트 합니다. 그리고 블록의 마지막을 만나기 때문에 다시 for 문장으로 돌아갑니다.

이 때에는 **i++** 을 먼저 수행합니다. i++ 을 풀어서 설명하자면 i = i + 1; 과 같은 의미입니다. 이렇게 1이 증가한 i 의 값은 1이 되며, 다시 10보다 작은 조건에 만족하는지 다시 점검합니다. 그리고 조건을 만족한다면 다시 블록으로 진입하여 다시 i 값인 1 을 프린트 합니다.

이 과정을 10보다 작은 경우 반복하기 때문에, 프린트 되는 i 의 값은 0 \~ 9 까지 입니다.

#### while문 예제

```javascript
let i = 0;

while(i<10){
    console.log(i);
    i++;
}
```

#### 실행결과

```
0
1
2
3
4
5
6
7
8
9
```

위 while문 역시 실행 결과는 for문 코드와 동일합니다. 하지만 변수의 선언과 변수의 변화가 일어나는 위치가 다릅니다.

실행 절차를 설명드리면, 우선 **i** 라는 변수에 **0**을 할당하였습니다. 그리고 while 문 조건 비교에서 i의 값이 10보다 작은지 검증합니다. 조건이 만족하면 블록 내부를 수행합니다. 블록 내부에는 i 의 값을 프린트하는 코드와 i 의 값을 증가시키는 코드가 존재합니다.

이렇게 반복되는 수행을 통해 i 의 값은 계속 증가하여 10이 되었을 때, while 의 조건에 만족하지 않기 때문에 반복수행이 끝나게 됩니다.

while 키워드의 동작방식과 for 키워드의 동작방식을 비교하기 위하여 위 예제를 제시했지만 while의 경우 보다 다양한 조건 검증을 통한 반복작업 수행이 가능합니다.

아래 또 다른 예제를 보겠습니다.

```javascript
let isHappy = true;
let anger = 0;

while(isHappy){
    console.log("Live together.");
    if(anger == 5){
        isHappy = false;
    }
    anger++;
}

console.log("Moved home.");
```

이번 두번째 예제는 첫 예제보다는 조금 복잡하게 구성을 해 봤습니다. 제가 제시한 예제 외에도 더 많은 케이스가 존재하지만 기초에서는 이 정도만 이해하셔도 완벽합니다.