안녕하세요
이번 포스팅에서는
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 문서에서 요청한것처럼
http://서버주소/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로 검색하거나 이름으로 검색하신 후 친구추가해봅시다
플러스친구 대화창에 진입하자마자 아래에 우리가 추가한 버튼들이 보입니다.
버튼을 누르면 해당 버튼의 텍스트가 전송되는것을 볼 수 있습니다.
버튼을 눌러도 응답하지 않는다는 메시지만 돌아옵니다.
이부분에 대해서는 다음 포스팅에서 진행하도록 하겠습니다!
감사합니다
