dev.bro dev.bro

Interactive Components 설정하기 4편에 이어,버튼을 눌렀을 때 응답을 설정해보겠습니다.Request URL을 설정하라고 나오는데요,링크를 눌러서 설정해봅시다. 3편에서처럼, Reuqest URL에는 람다함수에 연결되어 있는 API Gateway의 URL을 적어주시면 됩니다. 다만, 지난 번 요청과 중복되지 않게 뒤에 /interactive를 붙여줍시다. 다시 버튼을 눌러보면,이번에는 또 다른 에러가 납니다. =_= API Gateway에 Proxy 설정을 해주지 않았기 떄문입니다. API Gateway Proxy로 Lambda와 연결하기 API Gateway를 선택하고, API Gateway의 이름을 눌러서 API Gateway콘솔로 이동합니다./gag-slack-bot/interact..

Slash Command 응답 테스트 먼저 간단하게 람다 함수 코드를 수정하고 테스트 해보겠습니다. // index.js exports.handler = async (event) => { const buildResponse = (res) => ({ statusCode: 200, body: JSON.stringify(res), }); switch (event.httpMethod) { case 'GET': return buildResponse('Success GET'); case 'POST': return buildResponse('없어'); } return { statusCode: 400, body: 'unknown httpMethod', }; }; return 중에서 body가 슬랙에 표시되는 걸 확인하..

Slash Command 설정 https://api.slack.com/apps위 링크로 들어가신 후에 -> 생성한 앱 선택 -> Slash command -> Create New Command를 선택하면 다음 같은 화면을 보실 수 있습니다.필요한 내용을 입력합니다. Request URL은 2편에서 설정한 API Gateway URL을 적으면 됩니다. Workspace에 앱 설치 이제 슬랙봇을 설치해봅시다. (아직 만들지도 않았지만 일단 깔아봅시다..) Install App 탭에 들어가서 설치 버튼을 클릭한 후 진행하시면 됩니다. 슬랙봇 사용하기 이제 슬랙봇을 사용해봅시다! (아직 만들진 않았지만) /를 입력하고 명령어를 입력하면 매칭되는 커멘드가 뜨는 걸 확인하실 수 있습니다. 한 번 실행해볼까요? 에러..

AWS Lambda 함수 생성 람다 함수를 생성합시다 Author from scratch를 선택하여 처음부터 코드를 작성할 수도 있지만 Blueprints에서 도움을 받을 수도 있습니다. 이번에는 Author from scratch를 사용해보겠습니다. 기본적인 정보들을 채워 넣습니다. Role은 템플릿으로부터 새로운 롤 생성을 선택하고 Simple microservice permissions를 선택해주세요 Api gateway와 연결 람다 함수가 생성되었습니다! 근데 아직 trigger없는 상태입니다. 람다 함수를 호출할 방법이 없다는 뜻입니다. Api Gateway를 연결해보겠습니다. 왼쪽 Add triggers에서 API Gateway를 선택해주세요 선택하신 후 하단에 몇 가지 설정을 해야하는데요, ..

개요 AWS 람다를 활용하여 간단한 슬랫봇를 만들어 보겠습니다.버튼을 누르면 랜덤하게 아재개그를 뱉어내는 이상한 재밌는 친구입니다. 카카오 플러스친구 버전에 이어 슬랙봇도 만들어보겠습니다. 슬랫앱 생성슬랙 앱 사이트 (https://api.slack.com/apps)에 접속하여 상단 Create New App 버튼을 눌러 새로운 앱을 만들어봅시다. 앱을 만들고 나면 6개의 기능이 보이는데요,저희는 Slash Commands와 Interactive Components를 이용할 것입니다. Slash Commands슬래시 커멘드는 사용자가 명령을 입력할 수 있게 해줍니다.말보다 스크린 샷을 보시는 게 이해가 빠르실 것 같습니다.더 자세히 알고 싶으신 분은 슬랙 공식 문서를 참고하세요 Interactive Co..

AWS Lambda를 좋아합니다. 서버 없이 코드를 실행할 수 있다는 점이 매력적입니다. 실제로 Lambda로 웹 어플리케이션을 만들었고 서비스를 운영하고 있습니다. 다만 가끔 이건 당연히 되야될 것 같은데 안되는 경우가 종종 있습니다. 로그 조회라던지, 언어마다 자주 사용하는 라이브러리가 기본 제공이 안 된다던지, ttfb개선이 안 된다던지... 근데 이제 로그 조회는 훨씬 편해졌습니다. 기존 Lambda Log 문제 Lambda의 로그는 CloudWatch에 쌓입니다. 써보신 분들은 알겠지만 람다 로그 조회에는 큰 문제가 있습니다. 로그를 통합으로 조회하기가 어렵다는 점입니다. 대략 5분 안쪽 간격으로 로그스트림 쌓이고 로그 스트림에 들어가야지만 검색이 가능합니다. 로그 그룹이 계속해서 만들어지는데 ..

X-API-Key 인증 AWS API Gateway는 기본적으로 X-API-Key 헤더를 활용한 인증을 제공합니다.하지만, 단순 Key 방식이기 때문에 OAuth 등 최근 많이 사용하는 인증을 구현하기 어렵습니다.이 방식을 사용하길 원하시면, 위와 같이 API Key Required를 true로 변경하시고, 몇 가지 설정을 더 하면 됩니다. 이 방식에 대해서는 아래 링크를 참고해주시기 바랍니다.https://blog.outsider.ne.kr/1206https://docs.aws.amazon.com/ko_kr/apigateway/latest/developerguide/api-gateway-setup-api-key-with-console.html 이 글에서는 API Key 방식 대신,좀 더 유연하게 활용할..

CloudWatch Event 클라우드 워치를 통해서 20분마다 특정 데이터를 DynamoDB에 집어넣는 배치프로그램을 만들어보겠습니다. 대충 위와 같은 구조입니다. 클라우드워치 이벤트를 만들어봅시다 클라우드워치 > Events > Rules로 들어가서 룰을 생성합니다 Target 추가를 선택하면 람다함수 이름을 넣으라고 합니다. 그럼 먼저 람다 함수를 작성해봅시다! Lambda 함수 작성 const AWS = require('aws-sdk'); AWS.config.region = 'ap-northeast-2'; const docClient = new AWS.DynamoDB.DocumentClient(); const BATCH_TABLE_NAME = 'batch-processing'; exports.ha..

CloudWatch AWS페이지에서는 클라우드워치를 이렇게 소개합니다. Amazon CloudWatch는 개발자, 시스템 운영자, 사이트 안정성 엔지니어(SRE) 및 IT 관리자를 위해 구축된 모니터링 및 관리 서비스입니다. CloudWatch는 애플리케이션을 모니터링하고 시스템 전반의 성능 변경 사항을 이해하고 이에 대응하며, 리소스 사용률을 최적화하고, 운영 상태에 대한 통합된 뷰를 확보하는 데 필요한 데이터와 실행 가능한 통찰력을 제공합니다. AWS 리소스들을 모니터링 할 수 있게 해주는 도구입니다.여러 가지 기능이 있는데 AWS Lambda와 함께 활용할 수 있는 몇 가지 기능을 간략하게 소개해드리려고 합니다. 이 중 제가 소개해드릴 기능은 1. 람다 함수 로그 확인(Logs)2. 람다 함수 주기..

랜덤 아재 개그 동작 제가 만들려는 봇은 이런 형태입니다. 재밌는 거 없냐고 물어보면, 아재개그 시동을 거는 질문을 합니다.뭐냐고 물어보면,아재개그를 칩니다...! 기본 키보드 변경 먼저 기본 키보드를 재밌는 거 없냐로 변경하겠습니다. // router/get.js const {DEFAULT_KEYBOARD} = require('../const'); exports.getHandler = ({path}) => { if (path === '/keyboard') { return DEFAULT_KEYBOARD; } return `success get ${path}`; }; // const.js exports.DEFAULT_KEYBOARD = { type: 'buttons', buttons: ['재밌는 거 없냐'..

자동 응답 API 스펙 이번에는 사용자가 버튼을 눌렀을 때 적절히 반응하도록 해봅시다! 사용자가 선택한 명령어를 파트너사 서버로 전달하는 API입니다. 자동응답 명령어에 대한 답변은 응답 메시지(Message)와 응답 메시지에 따른 키보드 영역의 답변 방식(Keyboard)의 조합으로 이루어집니다. 답변 방식은 주관식(text)과 객관식(buttons) 중 선택할 수 있습니다. 이번에는 GET방식이 아니라 POST 방식이 요청이 들어오고 body는 json 형태입니다. 응답은 message와 keyboard 2가지 컬럼이 있네요. 테스트이벤트 구성 이번에도 테스트 이벤트를 구성해봅시다. 저번과 비슷한데요이번에는 POST 방식으로 하고,/message 라는 path로 구성하면 됩니다. body도 카카오 플..

플러스친구 Keyboard API 스펙 플러스친구 스펙에 맞게 Home Keyboard API를 작성해봅시다. 이용자가 최초로 채팅방에 들어올 때 기본으로 키보드 영역에 표시될 자동응답 명령어의 목록을 호출하는 API입니다. 스펙을 확인해보면,/keyboard 로 GET 요청이 들어오면, type과 button으로 구성된 json을 반환 하면 됩니다. 테스트 이벤트 구성 그럼 일단 가상의 테스트환경을 구성해보겠습니다오른쪽 위에 있는 Configure test events를 선택합니다. Create new test event를 선택하고이벤트 이름을 입력한 후에path를 /keyboard로 설정해줍니다.httpMethod도 GET으로 설정합시다! 저장을 합니다. GET /keyboard 이제 코드를 작성해봅..

Refactoring 파일이 커지기 전에 파일을 분리해봅시다.오른쪽 버튼을 눌러서 파일을 만들어봅시다. 지금은 get과 post를 모두 index.js에서 처리하는 데요, 이를 파일별로 분리해봅시다 우선 router 폴더에 http method 별로 처리하는 파일을 각각 만들어줍니다. // router/index.js const {getHandler} = require('./get'); const {postHandler} = require('./post'); exports.getHandler = getHandler; exports.postHandler = postHandler; // router/get.js exports.getHandler = (path) => { return `success get $..

AWS Lambda & Node.js 8.10 안녕하세요 람다에서 노드8을 적극 활용하는 법에 대해서 포스팅 하겠습니다. 람다는 서버없이 코드를 실행할 수 있는AWS의 FaaS입니다. Node, 자바, Go, Python, C# 등 다양한 언어를 지원하고 있습니다. 올해부터는 Node 8 버전도 지원하고 있습니다. (서버리스 블로그의 글 Common Node8 mistakes in Lambda를 참고하여 작성했습니다.) Callback 없애기 람다에서 Nodejs 함수의 기본적인 구조는 다음과 같습니다. exports.handler = (event, context, callback) => { const response = { statusCode: 200, body: JSON.stringify('Hello..

API Test API를 만들었으면 테스트를 해야겠죠?GET 방식은 그냥 브라우저에 url 치면 그만입니다.하지만 POST나 DELETE 등의 방식은 그럴 수가 없죠. 리눅스나 맥의 경우 curl을 사용하거나 툴을 사용해야 합니다. API Test tool API를 테스트하기 위해서는 보통 Postman이나 Fiddler 등이 많이 활용되는데요.저는 주로 Advanced REST client를 활용합니다. Postman이나 Fiddler보다는 조금 가벼운 툴입니다. Advanced REST client 설치https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo위 링크 들어가서 확장프로그램 ..

AWS Lambda 함수 생성 람다 함수를 생성합시다 Author from scratch를 선택하여 처음부터 코드를 작성할 수도 있지만Blueprints에서 도움을 받을 수도 있습니다.HTTP API를 만들어야 하니까 nodejs, api-gateway라고 검색해서 나오는 microservice-http-endpoint를 선택합니다 기본적인 정보들을 채워넣고API gateway 항목도 채워 넣습니다.우리 API는 카카오에서 사용할 것이기 때문에 Security를 일단, Open으로 선택합니다. 기본적인 코드 템플릿이 있는데, 나중에 얼마든지 수정할 수 있으니 일단은 넘어갑시다Create function을 누릅니다! 그러면 random-dad-joke라는 람다 함수가 가운데 있고왼쪽에는 API Gatewa..

개요 AWS 람다를 활용하여 간단한 카카오 플러스친구를 만들어 보겠습니다.이름은 랜덤아재개그!버튼을 누르면 랜덤하게 아재개그를 뱉어내는 이상한 재밌는 친구입니다. 구조는 아래와 같이 API Gateway와 Lambda를 활용하여 심플하게 구성해볼 예정입니다. 플러스친구 관리자 만들기 우선은 카카오 플러스친구 관리자 페이지에 접속해봅시다.https://center-pf.kakao.com 회원 가입을 한 후, 새 플러스 친구 만들기 버튼을 선택합니다. 내용을 채워 넣으시고 확인 버튼을 누르시면 플러스친구가 만들어집니다! 스마트 채팅 API 설정하기 다음으로 스마트 채팅 > API형 설정하기를 선택합시다. 앱 URL에서 막히실 텐데요.아직 API를 만들지 않았기 때문입니다.먼저 API를 만들고, 그 API의 ..

TL; DR 구버전 자바스크립트에는 class가 없습니다. class와 유사한 용도로 사용할 수 있는 패턴이 있습니다. 바로, closure입니다. Sum 숫자를 누적시켜서 더하는 코드를 작성해봅시다. 여기까지는 그다지 어렵지 않습니다. var sum = 0; function add(num) { sum += num; } console.log(add(1)); console.log(add(1)); console.log(add(2)); console.log(add(2)); 하지만 위와 같은 함수들이 많아지게 된다면? 전역변수가 많아지고, 좋지 않은 코드가 될 것입니다.예기치 못한 호이스팅이 일어날 수 있죠. Closure 클로저를 이용하면 전역변수를 사용하지 않고 문제를 해결할 수 있습니다! function ..

equal v.s. strict equal 자바스크립트에서 좌측 값과 우측 값이 같은지 비교하는 2가지 연산자가 있습니다. equal과 strict equal입니다. equal은 =가 2개고 strict equal은 =가 3개입니다. equal == (equal)과 === (strict equal)입니다. == 비교 연산자는 느슨한 같음 연산자입니다. var numberSix = 6; var objectSix = new Number(6); console.log(numberSix == objectSix); 위 코드의 결과는 true입니다. 다른 언어에서는 == 연산이 아예 안 먹히면서 컴파일이 되지 않거나, false를 출력하는 경우가 많습니다. 하지만! 자바스크립트는 느슨한 비교를 합니다. 여기서 느슨한..

Hoisting 호이스팅hoisting 현상은 개발자들을 어리둥절하게 하는, 자바스크립트 특유의 현상입니다. 개발자들은 자바스크립트에서 변수의 적용 범위가 다른 언어들과 다르기 때문에 헷갈리는 경우가 많습니다. 예상치 못한 에러가 발생하지 않게 하기 위해서는, Hosting을 이해하고, 사전에 방지할 수 있는 코드를 작성해야 합니다. var exceptOne = 1; function doA() { console.log(exceptOne); var exceptOne = 2; } doA(); 위 코드를 보면, 3번째 라인에서 1을 출력할 것 같지만 결과는 undefined입니다. 호이스팅 현상 때문입니다. 자바스크립트는 함수 단위로 안에 있는 변수를 우선으로 여깁니다. 바깥 범위에 선언된 걸 쓰는 게 아니고..