본 내용은 Javascript를 이용해서 [채팅 자동응답 봇]이라는 어플을 통해

카카오톡 채팅 봇을 구현해내는 과정 중에서 얻은 내용들을 정리한 것이다.

 

카카오톡 봇의 가장 기초적인 내용들은

 

function response(room, msg, sender, isGroupChat, replier, imageDB, packageName) {
    <이 안에 내용을 입력하세요>
    }

여기에서부터 시작하게 된다.

 

여기에서 가장 기초적인 내용은

 

if(msg == "테스트"){
    replier.reply("테스트");
    } //msg 쪽에 입력한 내용을 수신하면 reply에 있는 내용을 대답해줍니다.

와 같이 msg == 와 replier.reply를 활용한 구문이다.

 

이 내용을 위의 response라는 펑션 안에 넣게 된다.

 

이런 식으로 만들게 되면

 

넣은 내용과 일치할 때만 reply에 입력한 내용을 출력하게 된다.

 

이것만으로는 활용도가 떨어진다.

 

그래서 사용되는 것이 startsWith()와 indexOf() 이다.

if (msg.startsWith("안녕")) {
        replier.reply("안녕하세요");
     }

이 구문은 "안녕"으로 시작하는 말을 수신하면 안녕하세요라고 답장을 하게 되는 스크립트이다.

 

잘 작동하는지 체크해보자.

 

startsWith 체크

잘 작동하는 것을 확인할 수 있다. 

 

ㅎㅇㅎㅇ~~에도 동작하는 이유는 위의 구문에 조건문으로  || 를 이용해 "ㅎㅇ"로 시작하는 문자를 수신해도

안녕하세요라고 답장할 수 있도록 추가해두었기 때문이다.

 

if (msg.startsWith("안녕") || msg.startsWith("ㅎㅇ")) {
      replier.reply("안녕하세요");
   }

 

이런 식으로 조건문을 추가해서 자신만의 무언가를 구축해나갈 수 있다.

 

 

그리고 채팅봇을 만드는 입장에서는 가장 유용한 기능인 indexOf() 를 활용해보자.

 

 Javascript에서 indexOf() 는 특정 문자열의 위치를 찾기 위해서 사용되는 함수인데
 
찾는 문자열이 없으면 -1을 리턴하게 된다. 0 이상의 정수 값을 리턴하게 되는 경우는 찾는 문자열이 해당하는 인덱스 번호부터 시작한다는 의미이다.
 
이 내용을 카카오톡 봇에서는
if(msg.indexOf("민재") != -1){
        replier.reply("왜 부르시나요?");
        }

이렇게 활용할 수 있다. " != -1 " 은 찾는 문자열이 없는 상태와 같지 않다는 의미기 때문에

해당하는 문자열이 포함된다면 답장을 하게 된다.

 

그렇다면 이전에 안녕을 입력했던 디버그 룸에서 같이 비교를 해보자.

 

startsWith() 디버그 룸
indexOf() 디버그 룸

 

startsWith() 는 그 문구로 시작하지 않으면 반응하지 않지만
indexOf()는 그 문구가 포함 되기만 한다면, 수재민재난에도 민재라는 구문을 찾았기에 반응하듯이

그 결과값을 리턴해서 답장이 오게 된다.

 

조건문과 함께 잘 이용한다면 재미 있는 카카오톡 봇을 개발해낼 수 있을 것이다.

다음 내용은 이지스 퍼블리싱의 고경희 님이 집필하신

 

HTML과 CSS 자바스크립트 웹 표준의 정석에서 발췌하였다.

 

 

 

폼에서 사용할 수 있는 태그는 다음과 같다

 

<form>  폼의 시작과 끝을 알려준다.

<fieldset>  폼 요소를 그룹으로 묶는다.

<legend>  필드셋에 제목을 붙인다.

<input>  사용자가 내용을 입력할 필드를 삽입한다. (input 태그는 하위 속성을 많이 가지고 있다.)

<select>, <option> 드롭다운 목록을 삽입한다.

<textarea> 텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입한다. 

<datalist> 데이터 목록을 삽입한다.

 

등이 있다.

 

input 태그는 여러 유형과 속성이 있는데 유형을 먼저 보자면

 

text  한 줄 짜리 텍스트 상자를 생성

password  비밀번호를 입력할 수 있는 필드 생성(비밀번호는 ****와 같이 표시)

search  검색이 가능한 입력 필드를 생성

url  URL주소를 입력할 수 있는 필드 생성

email  이메일주소를 입력할 수 있는 필드 생성

tel  전화번호

checkbox  여러 항목에서 복수 선택이 가능한 체크박스

radio  주어진 여러 항목에서 1개만 선택 가능한 라디오 버튼(원형 버튼을 말한다.)

number  숫자를 조절할 수 있는 스핀 박스

range  숫자를 조절할 수 있는 슬라이드 막대

date  사용자 지역을 기준으로 날짜(연, 월, 일)

month  사용자 지역을 기준으로 날짜(연, 월)

week  사용자 지역을 기준으로 날짜(연, 주)

time  사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)

datetime  국제 표준시로 설정된 날짜와 시간 (연, 월, 일, 시, 분, 초, 분할 초)

datetime-local  사용자가 있는 지역을 기준으로 날짜와 시간 (연, 월, 일, 시, 분, 초, 분할 초)

submit  전송 버튼

reset  리셋 버튼

image  submit 버튼 대신 사용할 이미지

button  일반 버튼 생성

file  파일을 첨부할 수 있는 버튼

hidden  사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드

 

정도가 있다.

<input> 태그의 유형(type)들은 대부분 그 이름을 보면 그 내용이 유추가 가능하다.

그래서 크게 어렵지는 않고 이 정도가 있다고 보고 넘어가도 좋다

 

여기에서 유형(type)와 아이디(id)는 다르게 입력해야한다.

id는 사용자가 정의한 값으로 할 수 있지만, 어떤 목적으로 만들었는지 알기 쉽게 만들면 좋다.

 

 

 

-

 

<input> 태그는 여러 속성을 가지고 있다.

그 내용들은 다음과 같다

 

autofocus  웹 문서가 열리면 해당 입력 필드 안에 마우스 포인터를 표시(보통 맨 위의 필드에 사용, 예를 들자면 로그인 필드라던지)

placeholder  텍스트 필드에 힌트를 표시 (로그인, 비밀번호 등을 입력하기 전에 회색 글씨로 표시되어 있는게 힌트다.)

readonly  입력 필드를 읽기 전용으로 지정한다. (random이 아니라 read에서 파생된 말이다.)

required  필수 입력 필드를 지정

max  숫자 입력 필드에서 최댓값을 지정

min  숫자 입력 필드에서 최솟값을 지정

step  숫자 입력 필드에서 증감할 간격을 지정

maxlength  텍스트 관련 필드에서 입력할 수 있는 최대 길이

minlength  텍스트 관련 필드에서 입력할 수 있는 최소 길이

size  텍스트 관련 필드에서 화면에 표시할 크기를 지정

list  연결할 데이터 목록을 지정

 

 

그리고 대부분의 label과 input 태그는
<form> 혹은 <fieldset> 안에서 쓰이게 된다

 

예를 들자면

 

<form>

<ul>

    <li>

        <label for "your-tel"> 연락처 </label>

        <input type="tel" id="your-tel">

    </li>

</ul>

</form

 

이런 식이 될 것이다

클래스는 개발자가 만들 수 있는 큰 틀이라고 볼 수 있고,

인스턴스는 그때그때 값을 바꿀 수 있는 것이라고 이해했다.

 

클래스를 선언해야지만 인스턴스를 선언할 수 있다.

 

큰 틀을 먼저 만들어야지만 그 내용물을 만들 수 있다는 뜻이다.

 

 

 

class 참치선물세트: #이것은 클래스를 선언한 것입니다.
    일반 = 0
    야채 = 0
    고추 = 0
    
    
참03호 = 참치선물세트() #이것은 인스턴스입니다.
# 위에서 선언한 참치선물세트가 클래스입니다.

참03호.일반 = 12
참03호.야채 = 3
참03호.고추 = 3

#인스턴스를 선언하기 전에는 반드시 클래스를 선언해야 합니다.
#그렇긴 하지만 반드시 첫번째 줄에서 클래스를 선언할 필요는 없습니다.


예시를 들면 이렇게 나올 수 있겠다.

 

클래스 선언과 인스턴스 선언에 대해서 그 순서를 잘 숙지하고 넘어가자.

# 파이썬 문법 / 주석
# - 주석에는 한줄 주석과 여러줄 주석이 있습니다
# 한줄 주석은 기호를
# #으로 씁니다
#
# 여러줄 주석은
'''
여러줄 주석입니다
여러줄 주석입니다
'''

'''
파이썬 변수 : 변수는 데이터 값을 저장하기 위한 컨테이너
- 많은 수여서 변수라고 얘기함
- 변수 선언에 대한 명령어는 없습니다
- 값을 할당하는 순간에 생성됩니다
- 알파벳에서 어떤걸 표기해도 상관없다
- 정의했던 변수값을 출력시키려하면 그 변수값을 써야 됩니다
- 문자열 변수에는 큰따옴표나 작은따옴표를 쓸 수 있다
- 변수에 대소문자를 구분한다
'''

a = 5
b = "geonha"
print(a)
print(b)

a = 4
A = 'Salley'
print(a)
print(A)
# 대소문자를 구분할때는 변수가 2개가 된다(대문자와 소문자는 다르다)

a = 10
a = "숫자10"
print(a)

# 2) 변수 - 여러 값 할당, 변수의 수가 값의 수와 일치하는지 확인
c, x, y, z = "Commit", "Orange", "Banana", "Cherry"
print(c)
print(x)
print(y)
print(z)

# 3) 여러 변수에 대한 하나의 값
# - 여러 변수에 동일한 값을 할당할 수 있습니다
x = y = z = "Orange"
print(x)
print(y)
print(z)

# 4) 변수로 추출
# - 목록, 튜폴등에 값모음이 있는 경우 값을 변수로 추출할 수 있다

fruits = ["사과", "바나나", "체리"] # 후르츠가 3가지 있음
x, y, z = fruits
print(x)
print(y)
print(z)

'''
print() 함수 = 변수를 출력하는데 사용해서 출력변수라 얘기합니다
쉼표로 구분된 여러 변수를 출력합니다
'''

x = '파이썬'
y = '리액트js'
z = 'vue js'
print(x, y, z)

# 연산자를 사용해서 여러 변수를 출력할 수 있습니다
x = '마이네임은 '
y = '이민재 '
z = '입니다!'
print(x + y + z)

# 숫자에 연산자를 쓰시면 그 결과 값이 출력됩니다
x = 5
y = 10
print(x + y)
print(x * y)
print(x - y)

# 스타일이 다른 변수에 대해서 쉼표로 구분
x = 5
y = 'hwang'
print(x, y)

# 4) 전역변수
# - 함수 외부에서 생성된 변수를 전역변수라 합니다
# - 함수 내부와 외부 모두에서 모든 사람이 사용할 수 있습니다
# 함수 = x와 y사이에서 x의 값이 정해지면 거기에 따라 y 값이 정해지는 관계


x = '스타벅스' # 전역 변수의 역할

def myStar():
    print("아메리카노가 제일 에스프레소와 가까운 곳은 " + x)

myStar()

# 전역변수와 지역변수를 같이 쓸 경우
x = '어썸'

def myfunc():
    global x
    x = '판타스틱'

myfunc()

print("파이썬은 " + x + "싱글페이지 입니다")


x = '이디야' # 전역 변수의 역할

def myStar():
    x = '스타벅스'
    print("아메리카노가 제일 에스프레소와 가까운 곳은 " + x)
myStar()

print('그 다음은 ' + x)

'''
파이썬의 데이터 유형
1) 내장 데이터의 유형
변수는 다른 유형의 데이터를 저장할 수 있으며
다른 유형은 다른 작업을 수행할 수 있습니다\
1-1) 텍스트 유형 : str
1-2) 숫자 유형 : int, float, complex
1-3) 시퀀스 유형 : list, tuple, range
1-4) 매핑 유형 : dict
1-5) 세트 유형 : set,frozenset
1-6) 부울 유형 : bool
1-7) 바이너리 유형 : bytes, bytearray, memoryview
1-8) 없음 유형 : NoneType
'''
# 데이터 유형 가져오기
# type() 함수를 사용하여 모든 객체의 데이터 유형을 가져올 수 있다...
'''
자바스크립트는 객체지향 언어이다
- 기본타입(원시데이터)과 참조타입(객체)으로 나눌 수 있음
- 원시값을 제외한 모든걸 객체라고 합니다
(원시값 : 숫자, 문자열, null, undefined, 불리언)
'''

q = 5
print(type(q))

#문자열
x = "문자열"
print(type(x))

y = 20.5
z = 1j
v = ["사과", "체리"]
w = ("사과", "체리")

print(type(y), type(z), type(v), type(w))

'''
2) 특정 데이터 유형 설정 : 데이터 유형을 지정하려면 다음 생성자 함수를 사용할 수 있습니다.

'''
x = str("hello world")
print(x)
print(type(x))

# 3) 파이썬 숫자 : int, float, complex
x = 1
y = 2.8
z = 1j
v = 123456778900
b = -3255522
# int 또는 정수는 길이가 무제한인 양수 또는 음수 정수

# float : 부동소수점 숫자를 의미(양수, 음수, 거듭제곱도)
# ex)
x = 1.10
y = 1.0
z = -35.59
q = 35e3
w = 12E4
r = -87.7e100

print(type(x), type(y), type(z), type(q), type(w), type(r))

# 난수 : 파이썬에서는 난수를 만들어내는 함수가 따로 존재하지 않지만
# 난수를 만드는데 사용할 수 있는 random() 모듈이 있습니다

import random #import 선언되는 순간 모듈을 불러옴
# 1~9까지의 난수를 표시합니다
print(random.randrange(1,10))

'''
파이썬의 문자열
1) 문자열은 작은 따옴표나 큰 따옴표로 둘러쌓여 있어야 합니다
2) 변수에 문자열을 할당 a = '문자열'
3) 파이썬 장점 html의 pre 태그처럼 쓴대로 나옵니다
4) 문자열을 배열로 표시할 수 있다
5) 자바스크립트는 1부터 10을 갯수로 표현할 때
6) 문자열은 배열이기 때문에 루프를 사용하여 문자열의 문자를 반복할 수 있다
for 라고 되어 있는 반복문을 사용함
Hello, World!
01234567891011
7) len() 함수를 사용하여 문자열의 길이는 확인할 수 있다 문자열의 길이는 = 갯수
8) 문자열을 확인 (in)
9) if 구문을 활용해서 다음 구문을 출력할 수 있다
10) 슬라이싱 구문을 사용하여 문자 범위를 리턴할 수 있다
11) 네거티브 인덱싱 (음수 인덱스를 사용하여 문자열 끝에서 슬라이스를 시작)
"Hello, world!"
(b[:5])
(b[5:])
12) 문자열 수정
upper() : 대문자로 문자열 리턴
lower() : 소문자로 문자열 리턴
strip() : 시작 또는 끝에서의 공백을 제거
replace() : 이미 써져 있는 문자열을 다른 문자열로 치환해주는
split() : 구분 기호(,)를 찾으면 문자열을 하위 문자열로 분할합니다
13) 문자열 연결 : + 연산자를 사용해서 연결
14) 문자열과 숫자를 결합
'''
q = """lorem
    1
    1
    1"""
print(q)

w = "안녕하세요"#[0][1][2][3][4]
print(w[0])

# 반복문
for t in "반복문 반복문":
    print(t)

# 문자열의 길이
y = "문자열의 길이"
print(len(y))

# 문자열 확인
confirm = "the best things in life are free!"
print("free" in confirm)

# if 구문 활용(가정법)
txt = "이 문장에 원하는 이라는 단어가 있나요?"
if "원하는는" in txt:
    print("맞아요 그런 단어가 있네요")

# 2에서 5까지의 문자 가져오기
u = '안녕하세요!'
print(u[2:5])

u = '안녕하세요!'
print(u[2:])

h = "Hello, world!"
print(h[-5:-2])

# 대문자로
i = "hello, world!"
print(i.upper())

# 소뮨자로
o = "HELLO, WORLD!"
print(o.lower())

# 공백제거 : 앞뒤에 있는 공백을 제거
p = "   공백 입니다   "
print(p.strip())

# 문자열 바꾸기 replace()
s = '트리플에이치 HHH'
print(s.replace('H','A'))
print(s.replace('에이치','코이츠'))
print(s.replace('트리플에이치', '빈스맥마흔'))

# 분할 문자열
d = "분할, 결합, 해체"
print(d.split("/"))

# 문자열 연결
f = '벌써'
g = '마지막'
h = '시간 입니다'
j = f + " " + g + " " + h
print(j)

# # 문자열과 숫자를 결합
# age = "31"
# txt = "저는 본명 이민재 입니다, 제 나이는 " + age
# print(txt)

age = 31
txt = "저는 가명 이건하 입니다, 제 나이는 {} 입니다"
print(txt.format(age))

# 문자열 메서드
# capitalize():첫번째 문자를 대문자로
txt = "abcdefg hyjklmnop qrstuv wxyz"
z = txt.capitalize()
print(z)

# casefold() : 문자열을 소문자로 만들어준다
txt = "Abcdefg Hyjklmnop Grstuv Wxyz"
z = txt.casefold()
print(z)

txt = "KATTO BING DA YUMA"
YM = txt.casefold()
print(YM)

#center() : 괄호에 숫자를 적은 만큼 공백이 생긴다
txt = "공백"
x = txt.center(30)
print(x)

mozzirong = "모찌롱"
X_KIRA = mozzirong.center(10)
print(X_KIRA)

2달 전만 해도 나는 개발자의 꿈을 가지고만 있던

평범한 직장인이었다.

 

모종의 이유로 퇴사하게 되었고, 예전에 하지 못했던 일들을 하나씩 해보려고 하는데

국비 지원으로 공부할 수 있는 곳을 찾아보다가

스파르타 코딩 클럽을 알게 되었고 덕분에 지금 코딩에 입문해서 하나하나씩 배워나가는 중이다 ....

실은 첫주차인데도 생각보다 어려워서 이해가 쉽지 않았다.

 

데이터 분석을 위해 파이썬을 배우고 있고

앱 개발을 위해 자바스크립트를 배우고 있다.

 

이번주에 가장 크게 느낀 점은,

 

자발, 자율적인 학습이 정말 중요하다는 점이다.

 

코딩의 시작은 문제의 인식이고 그 문제를 해결하기 위해서 어떻게 해야할지 생각하면서

해야한다고 생각한다.

그러기 위해서는 내 생각을 구체화해서 구글 유튜브 등의 검색 엔진을 통해 검색할 수 있도록

빠르게 준비를 해야한다고 생각한다.

 

무튼 잡설이 길었고...

 

데이터 분석에서는

변수와 요소들의 상관관계라는 기초 중의 기초부터 

기본적인 데이터 가공 방법,

상관관계 분석,

엑셀의 한계와 파이썬을 배워야하는 이유 등을 배웠고

 

데이터 분석에서는 구글 Colab을 주로 이용하여 수업을 진행하였다.

 

그리고 

 

# 두 개의 변수를 선언 후 곱하기(*) 연산 수행

a = 5

b = 7

a * b

 

이런 식으로 아주 기초적인 변수부터 시작해서

자료에는 정수형/실수형/문자형/리스트 등이 있다고 배웠다.

 

그리고 조건문과 반복문에 대해서 깊게 공부하였다.

 

for i in range(0, 5): # 맨 끝에 :(콜론)을 사용하였다.

     print(i,'번 반복할게요~') # print 앞에 들여쓰기를 해주었다.

 

list1 = [1, 2, 3, 4, 5]

list2 = ['a', 'b', 'c', 'd', 'e']

 

for element in list1: print(element)

 

1

2

3

4

5

 

이런 식으로 배워나갔다.

 

그리고 비교 연산자에 대해서도 공부하였다.

 

 

이 부분은 크게 어렵지는 않았다.

 

조건문에 대해서도 공부해보았는데, 조건문이 생각보다 어려웠지만 재미 있었다.

 

If, elif, else 등으로 조건을 설정하고 출력해보는 연습은 상당히 재미 있었다.

 

그리고 본격적으로 함수에 대해서 공부하기 시작했다.

 

함수의 기본 구조는 반복하면서 숙달해야할 것 같다는 생각이 많이 들었다.

 

이 외에도 예외처리라던지 판다스와 데이터프레임에 대해서 공부했다.

 

 

웹과 웹스크래핑 패키지부터는 좀 어려운 이야기로 다가왔다.

 

이 부분도 반복 숙달이 필요하다.

 

크롤링에 대해서 공부하고 실제로 사이트에서 자료를 스크래핑 해보는 실습을 했다.

 

 

그리고 앱개발을 위해서 배운 자바스크립트에 대해서도 언급해보자면

 

자바스크립트에 대한 기초와 공부하기 위한 준비들을 같이 진행하였고,

 

예전에 독학할 때 어려움을 느꼈던 플랫폼이나 방향성에 대해서 확실히 짚고 넘어갈 수 있어서 좋았다.

 

파이썬과 자바스크립트를 같이 공부하면서 느꼈던건 둘이 비슷하면서도 많이 달라서

 

생각보다 연습하면서 손이 꼬이기도 하였다.

 

예를 들자면 크롬 콘솔 창의 엔터키와 구글 Colab의 엔터키가 달라서 줄을 띄어야할 때나 실행해야할 때 상당히 버벅거리게 되었다

 

let으로 변수를 선언하는 것과 const로 변수를 선언할 때 차이부터 시작해서

 

리스트(배열) & 딕셔너리(객체)의 차이에 대해서도 공부했고 개인적으로 이 부분이 상당히 흥미로웠다.

 

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

 

// names[0]['name']의 값은? 'bob'

// names[1]['name']의 값은? 'carry'

 

new_name = {'name':'john','age':7}

names.push(new_name)

 

이런 식으로 리스트와 딕셔너리를 합치는 응용과 딕셔너리의 자주 쓰는 두가지 표현 방법을 배웠다.

 

그리고 자바스크립트 기본 제공함수에 대해서도 배웠고

 

기본적인 형태에 대해서는 많이 익숙해졌다. 처음에는 영타에 익숙하지 않아서 시간이 많이 걸렸지만

 

지금은 그래도 일주일 만에 나름(?) 빨라져서 좋다

 

그리고 배열에서 숫자들을 더한다던지 특정 원소 갯수를 구한다던지 

 

지정한 값 사이에 있는 요소들의 이름만 출력한다던지 등등을 배웠다.

 

 

그리고 기본적인 틀을 다 배우고 난 후에

 

최신 방식으로 fuction() 이 부분을 생략하고 arrow를 이용하는 방식까지 배우게 되었다.

 

그 와중에서 어려웠던 부분은 비구조 할당에 대한 것과 map 함수에 대한 내용이다.

 

그 내용을 가져와보자면

 

리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.

이를 위해 리스트의 길이 값을 알아야 했습니다. map은 리스트의 길이값을 몰라도 되며, for와는 반대로 리스트안에서 몇 번째에 있는 값인지 순서를 알려줍니다.

 

라는 말이 잘 이해가 안되었다.

 

let numbers = [1,2,3,4,5,6,7];

 

numbers.map((value,i) => {

  console.log(value,i)

})

 

이 부분이

 

numbers.map(function(value,i) {

  console.log(value,i)

})

 

와 같다는 점이랑 i가 순서를 의미한다는 것을 배우고 넘어갔다.

 

실은 아직도 정확하게 작동하는 원리는 잘 모르겠지만 더 익숙해지려고 노력해야겠다.

+ Recent posts