티스토리 뷰
안녕하세요
이번 포스팅에서는
Node.js로 서버를 생성하고 카카오 플러스친구에서 테스트까지 마치는 작업을 진행하도록 하겠습니다!
[1. 채팅 유형 선택]
생성한 플러스친구의 채팅 유형을 선택하도록 합시다.
저희는 API 서버를 개발할것이기때문에
우측의 API형 을 선택하시면 됩니다!
[2. API 확인]
위와같이 정보를 입력하는 창이 뜹니다.
하지만 지금 핵심적으로 입력해야하는 앱 URL에 작성할 내용이 존재하지않죠
우리가 서버를 구축하여 앱 URL을 제공하면 됩니다!
옆엔 테스트 버튼이 존재하는데 잘 작동하는지 확인하기위한 버튼입니다!
테스트를 거쳐야 등록할 수 있습니다.
우측 상단에 보시면 API Document 버튼이 있습니다.
눌러서 문서를 확인해봅시다.
"이러이러한 형식으로 구현, 제공하라" 를 명시한 문서입니다.
프로그래밍이나 웹 분야에 대해 잘 모르시는분들은 어려우실수도 있습니다.
간단하게 정리하자면
Method(방식) : GET
URL(주소) : http://서버주소/keyboard
데이터타입: JSON
입니다
말 그대로 해석하자면
http://서버주소/keyboard에 GET 방식으로 접속하면
아래 예제와 같은 형식의 JSON 타입으로 데이터를 제공해달라
라는 뜻입니다.
이해가 안가셔도 괜찮습니다!
직접 구현해보면서 이해하면 되니까요
[3. 프로젝트 생성 및 필요한 모듈 설치]
위 링크를 참고하여 프로젝트를 하나 생성합니다.
(정상적으로 완료했다면 package.json 파일이 생성됩니다)
그리고 Brackets 에디터를 실행시킵니다 (Brackets 에티터 설치는 위 링크에 나와있습니다)
Brackets 상단 메뉴 중
파일 > 폴더 열기를 선택하여 방금 생성한 폴더를 열어줍니다.
위와 같은 모습이라면
새 .js 파일을 하나 생성합니다.
저는 app.js 라고 이름을 정하겠습니다
파일을 생성하였으면 위에서 CMD 창을 열었던것과 동일하게 한번 더 열어줍니다.
(package.json 파일이 존재하는 프로젝트 폴더 내에서 명령어를 실행해야합니다!)
npm install express --save
명령어를 입력해줍니다
위 명령어는 express 라는 모듈을 설치하라는 명령입니다!
저희는 express 모듈을 활용하여 Node.js 로 서버를 개발할것입니다
위와같이 설치가 되었다면 CMD창을 닫고 다시 Brackets 에디터로 넘어가셔도 됩니다.
[4. Express 서버 개발 및 플러스친구 테스트]
필요한 모듈을 설치하였으니 본격적으로 개발할 수 있게되었습니다!
저는 위에서 app.js 라는 파일을 생성하였습니다.
여러분들도 본인이 생성한 자바스크립트 파일에 코드를 작성하면서 개발하시면 됩니다!
아래와 같이 코드를 작성해주세요
위와같이 짧은 코드만으로 벌써 서버가 완성되었습니다!
주석으로 코드에 설명이 적혀져있습니다.
2행의 require('express') 는
방금 설치한 express 라는 모듈을 불러오는 코드입니다
그리고 아래에 11~20행은 라우팅 처리하는 부분인데요
라우팅 처리란
https://www.naver.com/login
https://www.naver.com/search
등..
위와같이 접속하였을 때 어떤 응답을 해야할지에 대한 네비게이션이라고 보시면 됩니다.
우리는 플러스친구 API 문서에서 요청한것처럼
https://서버주소/keyboard
로 접속할때의 기능을 구현한것입니다!
13행의 data 변수는 위 주소로 접속했을 때 제공할 데이터입니다!
형식은 아래와 같습니다
플러스친구 API 문서의 예제처럼
같은형식으로만 작성하시면 됩니다!
23행의 listen 함수에 인자로 전달된 9090 은 서버 포트입니다!
여러분들이 원하는 포트로 변경하셔도 됩니다.
저는 9090 포트로 진행하도록 하겠습니다.
이제 서버 접속이 되는지 확인해봅시다!
Brackets에서
Ctrl + Shift + N
단축키를 눌러줍니다
(또는 CMD로 node app.js)
서버가 실행되는 모습을 보실 수 있습니다!
웹 브라우저에
localhost:9090/keyboard
을 입력해보세요!
접속하니 예제와 같은 형식의 데이터를 제공하고있습니다!
이제 플러스친구 관리창에서 실제로 테스트하는일만 남았습니다!
그전에 지금 서버가 돌고있는 컴퓨터의 공인 IP 주소를 알아야합니다.
위 주소에 접속하면 본인 컴퓨터의 공인 IP가 뜹니다.
복사한 후 어디에 잘 메모해두세요!
http://복사한아이피:9090
예) http://352.451.533.111:9090
위와같이 링크를 만들었다면 카카오톡 앱 URL에 붙여넣기해줍니다
URL을 붙여넣고 API 테스트 버튼을 눌러줍니다.
아래에 keyboard OK와 함께
여러분들이 지정했던 JSON 값이 정상적으로 보이면 성공!
앱 설명과 전화번호 인증을 거쳐서 아래의 "API형 저장하기" 버튼을 눌러주면 됩니다!
(공유기 사용자분 참고)
공유기 사용자분들은 공유기설정도 직접 하셔야합니다.
설정을 하지않으면 포트가 막혀있어서 테스트를 실패하게됩니다.
공유기 포트포워딩
에 대해 검색하신 후 서버 포트를 개방해주세요
(저같은경우는 9090 포트를 포트포워딩 하였습니다)
설정을 마쳤으니 시작하기 버튼을 눌러줍니다!
위와같이 중지하기 버튼으로 바뀌었다면 성공!
한번 실제 카카오톡으로 확인해봅시다!
카카오톡에서 플러스친구 ID로 검색하거나 이름으로 검색하신 후 친구추가해봅시다
플러스친구 대화창에 진입하자마자 아래에 우리가 추가한 버튼들이 보입니다.
버튼을 누르면 해당 버튼의 텍스트가 전송되는것을 볼 수 있습니다.
버튼을 눌러도 응답하지 않는다는 메시지만 돌아옵니다.
이부분에 대해서는 다음 포스팅에서 진행하도록 하겠습니다!
감사합니다
'Node.js' 카테고리의 다른 글
| [Node.js] 버스 정보 API 사용하기(2) - API 활용 (19) | 2018.03.28 |
|---|---|
| [Node.js] 버스 정보 API 사용하기(1) - 가입 및 API 키 발급 (2) | 2018.03.28 |
| [Node.js] 카카오톡 플러스친구 챗봇 만들기(3) - 자동응답 API 구현 (43) | 2018.03.11 |
| [Node.js] 카카오톡 플러스친구 챗봇 만들기(2) - API 서버 개발 및 테스트 (53) | 2018.03.11 |
| [Node.js] 카카오톡 플러스친구 챗봇 만들기(1) - 가입 및 플러스친구 생성 (0) | 2018.03.11 |
| [Node.js] Node.js 설치 및 개발환경 준비 (19) | 2017.11.23 |
- 이전 댓글 더보기
-
경현
http://복사한아이피:9090 복사한아이피 부분에 제 IP 적어도 안들어가집니다..ㅠ 카카오톡에 API 테스트해도 실패라고 뜹니다.
어떻게 해야하죠ㅠㅠ 2018.05.11 11:31 -
이근둥
http://복사한아이피:9090/keyboard
해당 경로를 웹 브라우저로 접속하면 잘 나오시나요?
공유기 사용중이시면 포트포워딩 작업도 추가로 하셔야합니다 2018.05.11 15:17 신고 -
혀니
안녕하세요? 지금 몇시간째 헤매고 있는데 해결이 안되서 도움을 요청합니다~
지금 이게 안되서 PC도 바꿔서 해봐도 동일한 증상이 일어나네요...
console.log('Hello');를 실행했는데...
앞에 빨간 엑스자 동그라미가 생기고
에러가 3개가 납니다.
JSLint(1)
'console'was used before it was defined. console.log('hello');
ESLint(2)
ERROR:Unexpected console statement.[no-console] console.log('hello');
ERROR:'console' is not defined. [no-undef] console.log('hello');
라고 뜹니다... 뭐가 잘못 된걸까요?
몇번씩이나 재실행해봐도 동일하네요... ㅜㅜ 2018.05.14 23:23 -
이근둥
Brackets에서 플러그인을 깔고 실행해봐도 빨간 X모양이 안사라지더군요.. 실행하면 잘 되긴하는데 이 부분은 오류인것 같습니다
2018.05.16 17:57 신고
-
혀니
그림에 있는데로 다 입력하고 컨트롤 쉬프트 엔 누르니까 이렇게 나오네... 뭐가 잘못된걸까요?? ㅜ.ㅜ
Command: node "E:/project/NodeJS/Blog/app.js"
E:\project\NodeJS\Blog\app.js:16
http.createSever(app).listen(9090, function() {
^
TypeError: http.createSever is not a function
at Object. (E:\project\NodeJS\Blog\app.js:16:6)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:188:16)
at bootstrap_node.js:609:3
Program exited with code 1
프로그램은
var express = require('express');
var http = require('http');
var app = express();
app.get('/keyboard', function(req, res) {
var data = {
'type': 'buttons',
'buttons': ['과일', '채소', '정보']
};
res.json(data);
});
http.createSever(app).listen(9090, function() {
console.log('서버 실행 중..');
});
만들었습니다... 2018.05.15 21:56 -
이근둥
오류 메시지는 앞쪽 부분을 분석하시면 어떤 문제인지 알 수 있습니다!
TypeError: http.createSever is not a function
http.createSever 는 함수가 아니라서 오류가 났습니다.
createSever가 아닌 createServer로 변경해주세요!
함수이름에서 r 하나가 누락되었습니다. 2018.05.16 17:59 신고 -
준
node.js에 대해 하나도 모르고 블로그만 보고 만들었는데
개인 호스팅 서버에 올려서 사용하려면 어떻게 해야되나요 ㅠㅠ 2018.06.07 16:02 -
이근둥
아마존 AWS같은 경우에는 Node.js를 지원해서 프로젝트 폴더(소스파일)를 옮겨서 실행시키면 됩니다. 다른 호스팅 서버같은 경우에는 한번 Node.js 사용 여부에 대해 알아보셔야 할 듯 합니다.
2018.06.07 17:36 신고
-
준
위에 댓글 달았던 사람인데요 프로젝트 폴더라 함은 app.js파일만 넣으면 카카오에서 자동으로 인식하는건가요??
2018.06.08 10:12
-
이근둥
현재는 소스코드가 app.js 하나뿐이라서 해당 app.js 파일만 존재하면 실행이 가능합니다. (Node.js 설치는 필수)
그리고 설치했던 모듈도 다시 설치하셔야합니다. (package.json 파일도 함께 옮기신 후 npm install 명령어 입력 시 설치했던 모듈이 자동으로 설치됩니다) 2018.06.08 18:08 신고 -
흐엉
파일을 생성하였으면 위에서 CMD 창을 열었던것과 동일하게 한번 더 열어줍니다.
(package.json 파일이 존재하는 프로젝트 폴더 내에서 명령어를 실행해야합니다!)
여기 이게 무슨말씀인지 이해가 안딥니다 ㅠㅠ 윈도우키+r키눌러서 cmd들어가란 말씀이신가요? 2018.06.12 21:43 -
이근둥
만약 C:\\User\\chatbot\\ 경로에 프로젝트를 생성하셨다면 package.json 파일은 chatbot 폴더 안에 존재하겠죠?
CMD를 실행시긴 후 [ cd C:\\User\\chatbot\\ ] 명령어를 입력하여 생성한 디렉토리로 이동하셔야합니다! 2018.06.13 13:46 신고 -
송종원
이전까지 똑같이 했는데 플러스 친구 url 넣는 부분에서 http://ip:포트 로 넣으면 계속해서 예상하지 못한 오류가 발생했다는 팝업창이 뜨네요 ㅠ 어떡해야할까요?
2018.06.20 23:49
-
이근둥
http://ip:포트/keyboards 이 주소를 웹 브라우저로 열면 잘 보이시나요?
2018.06.21 10:24 신고
-
박진호
안녕하세요.
혹시 아마존 aws로 동작하는것도 포스팅 생각 있으신가요??
아무래도 대부분이 학생일텐데 아파트라서 공유기 포트포워딩이 안되네요 ㅠ.ㅠ
aws로 해보면 어떨까 생각합니다. 2018.07.05 18:00 -
이근둥
좋은 의견 감사합니다! AWS에 대해 배워볼 의향이 있긴한데 추후에 배운다면 AWS에서 Node.js 서버를 여는 방법에 대해서도 작성해보도록 하겠습니다!
2018.07.09 22:25 신고
-
lunawalker
안녕하세요 웹에 관심많은 학부생입니다.
Nodejs를 활용한 웹페이지 프로젝트 진행중에 이왕 이쪽 공부 하는 김에
방학중에 추가로 할만한게 없을까 하다가 이 페이지를 우연히 보게되었는데 설명도 자세하구 너무 재밌네요
감사인사라도 남겨야 할 것 같아서 글 남기고 갑니다 좋은 컨텐츠 감사합니다. 2018.07.09 02:34 -
이근둥
좋은 말씀 대단히 감사합니다! 꾸준히 좋은 글로 찾아뵙겠습니다~!! ^^
2018.07.09 22:25 신고
-
락락
안녕하세요 어플리케이션만 접하다가
요즘에 처음 웹을 접하게 되었는데.. 카카오플러스 연동이란걸 알게되어
검색하다가 이글을 보게되었습니다.
깔끔한 정리와 설명 너무 감사합니다.
정말 대단하시네요..!!
죄송하지면
질문 한가지만 해도 될까요??
여기서 웹서버를 가동을 한건가요
(IIS 또는 APACHE) 혹시 가동했다면
그 웹서버에서 포트를 9090으로 설정하는건가요??
초보적인 질문이라 죄송하네요...ㅠ 2018.07.24 19:39 -
이근둥
IIS나 아파치서버를 구축한게 아닙니다. Node.js 환경에서 Express 라는 서버 프레임워크를 사용해서 손쉽게 서버를 구축한것입니다! 서버 포트는 원하는 포트로 서버를 구동할 수 있는데 http.createServer(app).listen(포트번호..)
부분에서 저는 9090으로 서버를 시작한것입니다. 80으로 하셔도 되고 원하시는 포트로 시작하시면 됩니다! (단, 이미 사용중인 포트일 경우 오류 발생) 2018.07.29 00:54 신고 -
오류투성이~
카카오 관리자에서는 api test가 ok 됐는데, 카톡이나 pc에서 들어가면 wrong keyboard initialization이라고 오류가 뜨네요 ㅠㅠ왜이럴까요?
2018.09.04 04:42
-
이근둥
관리자페이지에서는 정상적으로 테스트가 되었는데 실제 카카오톡으로 들어가서 대화를 해보면 오류가 발생한다는 말씀이시죠..?
관리자페이지에서 다시 한번 테스트를 진행하고 저장해보시거나, http://서버주소:포트/keyboards 주소로 접속해보시고 확인해보세요! 2018.09.06 20:49 신고 -
ㅠㅠ
서버 실행중 까지는 떴는데 Cannot GET /keyboard라고 뜹니다 ㅠㅠ
2018.10.24 22:15
-
이근둥
app.get('/keyboard', ...) 코드가 정확하게 있나요?
2018.10.25 13:09 신고
-
이수민
안녕하세요!
포트포워딩까지는 어떻게 했는데
앱 url연결 할 때 http://포트포워딩 아이디 주소:서비스 포트
이렇게 넣고 추가해야 하나요?
이렇게 하면
Required*
keyboard Fail 415
wrong keyboard initialization
이렇게 뜨는데ㅠㅠㅠ 뒤에 포트를9090으로 해도 오류는 똑같이 나네요ㅠㅠ
서버 아이피와 포트번호는 어떻게 알아내야 하나용ㅠㅠ
2018.12.02 01:23 -
이근둥
포트는 서버 코드에 작성한 포트구요, 포트포워딩도 서버포트와 동일한 포트를 열어주셔야해요. 내 IP는 구글이나 네이버에 내 IP 검색하시면 알 수 있어요!
2018.12.20 13:11 신고
-
이수민
노트북을 껐다가 다시켜니까 아예 로컬호스트 연결이 안되는데 왜그런 걸까요...ㅠㅠㅠㅠ
2018.12.02 14:49
-
이근둥
껐다가 킨 후 서버를 다시 실행하셨나요?
2018.12.20 13:10 신고
-
너무 어려워
잘보고 공부하다가 모르는 부분이 있어서 질문 해봅니다ㅠㅠ
buttons에 오탈자를 수정하고 다시 실행시키면 Error: listen EADDRINUSE: address already in use :::9090
이라는 에러문구가 나옵니다.
이럴 때는 어떻게 해결해야 하나요? 계속 포트번호를 변경해가면서 해야하는 건가요? 2018.12.31 13:49 -
이근둥
이미 사용중인 포트일 경우 발생하는 에러입니다. "사용중인 포트 죽이기" 키워드로 검색하셔서 해당 포트를 사용중인 프로세스를 종료하시면 됩니다.
주로 서버를 켜둔 상태로 코드 수정을 하고 다시 실행하셨을 수 있습니다. 기존에 실행한 코드는 Ctrl + C를 눌러서 종료시켜주세요 2019.01.02 02:00 신고 -
카카오미워
안녕하세요 ㅠㅠ포스팅보고 따라하려고 했는데
API형 스마트채팅 신규 등록이 18년 12월 3일 부터 중단된거같은데 ㅠㅠ api url 추가하는거부터 어떻게 해야하나요 ㅠㅠㅠ? 2019.03.11 13:33 -
이근둥
API 방식은 중단되어서 오픈빌더를 통해 개발하셔야합니다.. ㅜㅜ
조만간 오픈빌더 챗봇에 대해 포스팅 할 계획입니다! 2019.03.11 20:55 신고 -
ㅜㅜ
안녕하세요!!포스팅 보고 따라하고있었는데
저는 오픈빌더에서 하다보니 url추가가 안되는것같아요 ㅜㅜ
혹시 이방법으로는 오픈빌더에서 등록이 안되는건가요..? 2019.04.19 15:36 -
이근둥
오픈빌더에서는 "스킬"에 서버 URL을 작성해야하는데 방식이 달라졌습니다.. 따로 글 작성해보도록 하겠습니다 ㅜㅜ
2019.04.19 15:41 신고
-
ㅠㅠ
잘 따라했는데
오픈빌더의 "스킬"에 서버 URL을 작성해야하는 달라진 방식 때문에 All Stop이 되었습니다.
급하게 만들어 보고 싶은데 어떻게 빨리 포스팅이 안될까요? 도와주세요. 2019.08.19 20:35 -
이근둥
요즘 바쁜일이 있어서 조금 늦을 것 같습니다..ㅜㅜ 최대한 빨리 준비해보도록 하겠습니다!
2019.08.19 22:40 신고
-
초보
{ intent:
{ id: '5d79a8acb617ea0001c1bdc5',
name: '일정',
extra: { reason: [Object] } },
userRequest:
{ timezone: 'Asia/Seoul',
params: { surface: 'Mini', ignoreMe: 'true' },
block: { id: '5d79a8acb617ea0001c1bdc5', name: '행사' },
utterance: '내일 행사일정\n',
lang: 'kr',
user:
{ id:
'75ea6fa7fb9be49871d44f1c94da22a2170b44807c525a29905f25ac9cfbece0b2',
type: 'botUserKey',
properties: [Object] } },
contexts: [],
bot: { id: '5d79a77c92690d0001815dd0!', name: '일정로봇' },
action:
{ name: '일정봇',
clientExtra: null,
params:
{ sys_date:
'{"dateTag": "tomorrow", "dateHeadword": null, "month": null, "year": null, "date": "2019-09-13", "day": null}' },
id: '5d79ab7cb617ea0001c1bdcf',
detailParams: { sys_date: [Object] } } }
서버에서 json형태로 넘어오는데 날짜를 추출하려고 console.log(req.body.action.params.sys_date.date) 하면 undefined 가 나옵니다.
json 데이터 추출 어떻게 하는건지 알려주시면 안될까요?
utterance는 console.log(req.body.userRequest.utterance)하니까 잘 나오던데요... 2019.09.12 16:45 -
이근둥
params.sys_date는 객체 형식이 아닙니다. 값을 다시 확인해보시면 JSON 형식의 문자열 타입인것을 확인하실 수 있어요
JSON.parse(sys_date).date와 같이 문자열 값을 객체로 변환하여 접근하시면 될 것 같습니다 2019.09.12 18:32 신고 -
wjdals
안녕하세요. 블로그 잘 보고 있습니다. 감사합니다. :-)
다름이 아니라 진행도중에 오류가 발생하는데 도저히 모르겠어서요...
혹시나 원인을 아신다면 답변해주시면 정말 감사드리겠습니다.
위에 해당 app.js 파일을 저장하고 실행시키면 다음과 같은 에러가 발생합니다.
원인이 뭔지 찾기가 힘든데 혹시 알고계실까요?
Command: node "D:/chat/app.js"
D:\chat\app.js:23
http.createServer(app).listen(9090, function){
^
SyntaxError: Unexpected token ')'
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47
Program exited with code 1 2020.11.19 18:13 -
이근둥
... function){ 부분을 ...function () {로 수정하셔야합니다
2020.11.19 22:23 신고
- Total
- 509,458
- Today
- 153
- Yesterday
- 562
- java
- Vue 3
- 파티클
- vue3
- 프로그레시브 웹 앱
- 자바 프로젝트
- WWDC
- pwa
- Hello World!
- vue-next
- 이펙트
- Java FX
- 자바
- vue
- spread syntax
- Scanner
- ES6
- composition-api
- Deemo
- 전개 구문
- WWDC20
- 웹 확장
- vue.js
- AstroWar
- javascript
- 이클립스
- 출간
- vuex
- self
- Composition API