혼자 개발해서 길드 디스코드 서버에서만 사용하던 튜너봇을 다른 서버에서도 사용할 수 있도록 명령어를 일부 수정한 후 공개봇으로 전환했다. 간단하게 공식 페이지도 제작해봤는데, 아래에 페이지 정보와 봇 사용법을 적어보고, 초대 링크도 첨부하도록 하겠다. 튜너봇 사용법 먼저 서버에 초대한 후 /튜너봇설명서 명령어로 명령어 목록을 띄울 수 있다. 설명서 embed는 개인 메시지로 출력된다(다른 사람들에게 보이지 않고, 명령어를 입력한 사용자에게만 보인다) 현재 구현된 명령어는 위 설명서 사진에 적힌 명령어가 전부이며, 추가적인 기능은 계속해서 추가할 예정이다. 길드컨텐츠 참여내역 관리 및 길드 직위 관리, 길드원 관리 명령어는 DB 무료버전 용량 이슈로 제거했다(ㅠㅠ) 필자가 리부트 월드에서 메이플스토리를 플..

지난 시간에 React 프로젝트 초기 설정법을 알아봤다. React로 디스코드 봇 전용 웹페이지 만들기 (0) Discord.js를 이용해 디스코드 봇을 만들고 난 후, 뭘 만들면 좋을지 고민하던 중 웹 페이지에서 초대링크와 사용법 정도를 볼 수 있으면 좋겠다는 생각이 들어 react를 이용한 페이지를 만들어보기 huzan2.tistory.com 이번에는 tailwind를 이용한 편리한 css작성법을 알아보도록 하자. Tailwind CSS tailwind css는 class 이름 설정만으로 css를 자동적용해주는 편리한 라이브러리이다. 여러 개의 스타일을 적용할 수도 있고, js 코드에서 바로 적용이 가능하기 때문에 css파일과 js 파일을 왔다갔다 할 필요 없이 한 파일에서 코드를 작성할 수 있다는 ..

Discord.js를 이용해 디스코드 봇을 만들고 난 후, 뭘 만들면 좋을지 고민하던 중 웹 페이지에서 초대링크와 사용법 정도를 볼 수 있으면 좋겠다는 생각이 들어 react를 이용한 페이지를 만들어보기로 했다. 그 개발과정을 함께 알아보도록 하자. 처음부터 끝까지 모든 과정을 다 적어서 올리진 않고, 리액트 초심자로서 개발하면서 막혔던 부분 위주로 적어볼 예정이다. 초기 세팅react를 이용하기로 마음먹었으니 가장 먼저 리액트 프로젝트를 만들어 줘야 할 것이다.npx create-react-app PROJECT_NAME PROJECT_NAME으로 적은 곳에는 원하는 프로젝트 이름(폴더 이름)을 적으면 된다. VSC에서 프로젝트 폴더를 열어준 후 터미널을 열고 npm run start를 입력하면... R..

봇 개발이 모두 끝났다면 이제 봇을 돌려놓고 이용하면 된다. 하지만 개발자의 로컬 환경에서 봇을 계속 돌리려면 컴퓨터가 365일 내내 켜져있어야 한다. 이러한 불편함을 극복하기 위해 사람들은 "호스팅"이라 불리는 서비스를 이용하곤 한다. 필자도 봇 개발을 어느정도 마치고 호스팅을 위해 Heroku라는 사이트를 이용하려 했으나, 무료 호스팅 지원이 이미 종료되어 반드시 과금을 할 수밖에 없는 구조로 변해있었다. 때문에 다른 플랫폼을 찾아보았고, Google Cloud에서 무료로 서버를 돌려준다는 것을 알게 되어 공유차 추가로 글을 작성해보기로 했다. https://cloud.google.com/ cloud.google.com 최초 가입시 $300의 무료 크레딧도 받을 수 있으니 일단 받아주면 혹시 모를 기..

지난 시간에 자동 직위조정 명령어를 만들어봤다. Discord.js로 메이플스토리 디스코드 봇 만들기 (6) 지난 시간에는 길드컨텐츠 참여 내역 정보를 생성하고 수정하는 명령어를 만들어봤다. Discord.js로 메이플스토리 디스코드 봇 만들기 (5) 지난 시간에 길드원 정보를 mongoDB 데이터베이스에 생성하 huzan2.tistory.com 이번 시간에는 부캐 정보 입력과 길드원 정보 출력 명령어를 만들어보고 이제 메이플봇 만들기를 마무리해보려고 한다. 부캐 정보 입력 부캐 정보를 생성할 때, 기존 길드원 관리 명령어에 subcommand를 더할까 생각해봤지만, 본캐 정보를 추가로 입력해야 하기에 새로 명령어를 만드는 것이 낫겠다는 생각이 들어 명령어를 하나 더 만들어주기로 했다. commands ..

지난 시간에는 길드컨텐츠 참여 내역 정보를 생성하고 수정하는 명령어를 만들어봤다. Discord.js로 메이플스토리 디스코드 봇 만들기 (5) 지난 시간에 길드원 정보를 mongoDB 데이터베이스에 생성하고 삭제하는 명령어를 만들어봤다. Discord.js로 메이플스토리 디스코드 봇 만들기 (4) 저번 시간에 캐릭터 정보를 불러오는 명령어를 구현 huzan2.tistory.com 이번에는 입력한 정보를 이용해서 직위조정을 편하게 해보자. 먼저 길드에 가입된 캐릭터들은 본캐와 부캐로 나뉜다. 노블스킬 사용 권한이 없는 직위 또한 보기 편하도록 본캐와 부캐 각각 하나씩 만들어 두었다. (메이플스토리 리부트 서버 길드는 역시?! "햇봄" 화이팅~!~!) 편의상 본캐의 직위 이름은 "본캐", 부캐는 "부캐", ..

지난 시간에 길드원 정보를 mongoDB 데이터베이스에 생성하고 삭제하는 명령어를 만들어봤다. Discord.js로 메이플스토리 디스코드 봇 만들기 (4) 저번 시간에 캐릭터 정보를 불러오는 명령어를 구현해 봤다. Discord.js로 메이플스토리 디스코드 봇 만들기 (3) 지난 시간에 캐릭터 명령어를 구현하다가 말았는데, 이번 시간에는 나머지 부분을 huzan2.tistory.com 이번 시간에는 길드원 정보를 수정하는 명령어와 길드컨텐츠 참여내역 관리 명령어를 만들 것인데, 그 전에 명령어의 사용권한을 설정하는 법을 알아보도록 하자. Validation djs-commander 공식 문서에서 validations 부분을 참고해서 만들어볼 것이다. Creating Validations - DJS-Com..

저번 시간에 캐릭터 정보를 불러오는 명령어를 구현해 봤다. Discord.js로 메이플스토리 디스코드 봇 만들기 (3) 지난 시간에 캐릭터 명령어를 구현하다가 말았는데, 이번 시간에는 나머지 부분을 마무리해 볼 것이다. Discord.js로 메이플스토리 디스코드 봇 만들기 (2) 지난 시간까지는 discord.js와 djs-commander를 huzan2.tistory.com 이번에는 디스코드 봇을 만들게 된 진짜 동기인 "길드원 및 길드컨텐츠 관리" 기능을 만들어 볼 것이다. 어쩌다 보니 부길드마스터를 맡게 되어 매주 길드원들의 길드컨텐츠 참여 여부를 확인하고, 일일히 직위를 조정하는 것이 번거로웠는데, 데이터베이스 연동을 통해 이를 좀 더 편하게 할 수 있겠다는 생각이 들어 봇 개발을 시작하게 되었다..