학습 내용/Project12 해커톤 프로젝트를 수정하며... 반년 전, 해커톤 프로젝트에서 CRA로 만들고 firebase로 배포한 UNINSTAGRAM이라는 작은 익명 게시판 애플리케이션을 만들게 되었다. 그 당시에도 이미지 관련 CORS 이슈가 있어 크롬에서는 이미지가 제대로 나오지 않고 콘솔창이 더러워지는(...) 문제가 있었지만, 일단 다른 브라우저에서는 해당 이슈가 발생하지 않아 그냥 냅두고 있었던 문제인데... 계속 마음의 짐으로 남아있었다. 😓 그렇게 반년이 흘러 오늘이 되었고... 오늘 마침 딱히 할 일이 없어서... 수정하게 되었다. 이렇게 오늘 UNINSTAGRAM을 수정하는 과정에서 발생한 문제점과 그 해결 과정에 대해 기록해보려고 한다... ERR_SSL_PROTOCOL_ERROR 발생 증상 타 사이트로부터 가져오는 아바타 이미지가 나타나지 .. 2021. 10. 2. [Discord.js로 디스코드 봇 만들기] 04. 팀짜기 명령어 작성하기 오늘은 랜덤 팀짜기 명령어를 작성해보도록 하겠습니다! 사실 매화봇이라는 유명하고 아주 유용한 봇도 이러한 팀짜기 기능을 제공하고 있으며 저도 매화봇을 사용해왔지만, 팀짜기 기능은 한번 직접 구현해보고 싶어서 봇을 만들게 되었습니다. ㅎㅎ 준비 bot.js와 명령어 코드들을 작성하기 전 랜덤 팀짜기 로직을 먼저 구현해놨었는데요, 팀짜기 명령어에 이 로직을 적용하는 것이 오늘의 목표입니다! 자바스크립트로 작성한 랜덤 팀짜기 로직은 아래와 같습니다. // utils/teamMaker.js /** * @param {array} members 전체 명단을 배열로 전달 * @param {number} number 한 팀당 팀원 수를 숫자(정수)로 전달 * @returns 팀 구성 결과를 배열로 반환 */ modul.. 2021. 5. 21. 페이지 상단 이동 버튼(scroll to top button) 만들기 이번 프론트엔드 스쿨 파이널 프로젝트 때 만들었던 웹 애플리케이션인 Suits에 페이지 상단 이동 버튼을 추가할 필요성을 느껴 스크롤 버튼 컴포넌트 및 그에 대한 로직을 추가하게 되었습니다. (사용 기술: JavaScript, React, Styled-Components) 보통은 이렇게 네이버처럼 우측 하단에 scroll to top 버튼을 두는 게 일반적인 것 같은데요, 저희는 하단이 아닌 페이지 상단에 이 버튼을 위치시키고 싶었습니다. 만약에 우측 하단에 스크롤 버튼을 위치시키려면 우측 하단에 이미 존재하는 다크모드 전환 버튼과 나란히 위치시켜야 했는데요(위 사진의 네이버 메인페이지처럼 말이죠~), 그렇게 할 경우 (특히 모바일의 경우) 사용자가 다크모드 버튼을 누르려다가 실수로 스크롤 버튼을 누르는.. 2021. 5. 8. [Discord.js로 디스코드 봇 만들기] 03. 도움말 명령어 작성하기 오늘은 튜토리얼을 참고하여 명령어에 대한 사용 방법 등을 조회할 수 있는 도움말 명령어를 작성해보도록 하겠습니다. 준비 전날 작성했던 새로운 bot.js 파일에서 아래 코드의 마지막 줄과 같이, client에 category라는 프로퍼티를 새롭게 추가해주세요! 곧 작성할 도움말 명령어에서 카테고리들을 쉽게 불러올 수 있도록 하기 위함이라고 하네요. // bot.js client.commands = new Discord.Collection(); client.aliases = new Discord.Collection(); client.category = ['bot', 'moderator']; 셋째 날 이번 시간에는 !도움말 + 명령어(예를 들어 '!도움말 청소')를 입력하면 해당 명령어에 대한 사용 방법과 .. 2021. 5. 5. [Discord.js로 디스코드 봇 만들기] 02. 커맨드 핸들러 만들기 티미를 만들고 작동을 시켜보니 정상적으로 돌아가기는 합니다. 다만, 티미가 돌아가도록 코드를 실행시키지 않은 상태에서 티미는 계속 오프라인이고 명령어를 실행하지도 않는다는 문제점이 있습니다. 그렇다면 티미가 저 없이도 24시간 살아숨쉬게 하려면 어떻게 해야 할까요? 바로 AWS나 Heroku 등의 서비스를 통해서 호스팅을 하면 된다고 합니다. ㅎㅎ 호스팅을 하기 전에 코드를 먼저 완성해 놓아야 하겠죠!? 오늘은 저번 시간에 이어 Ukong0324님의 튜토리얼을 따라 차근차근 실습을 해보도록 하겠습니다. 이번 편은 커맨드 핸들링에 관한 내용이라고 하네요. 준비 코드에서 사용될 fs 모듈이란? fs 모듈이란 File System의 약자로, Node.js의 여러 내장 모듈 중 하나라고 합니다. 파일을 읽거나 .. 2021. 5. 4. [Discord.js로 디스코드 봇 만들기] 01. 시작하기 디스코드 라이브러리인 Discord.js를 이용하여 디스코드 봇을 만들어보기로 했습니다. 게임동호회에서 직접 사용할 랜덤 팀짜기 봇을 만들 예정입니다. ㅎㅎ 22.07.09 추가 - 이하에서 웹훅(webhook) 관련해서 나오는 내용들은, 만약 웹훅 기능을 사용하실 것이 아니면 스킵하셔도 무방합니다! 준비 - Discord.js 설치하기 npm i discord.js --save - 팀짜기 로직 - 게임에 참가하는 멤버들의 명단을 배열로 받은 뒤, 각 멤버들에게 임의의 key 값(Math.random 사용)을 부여합니다. - key 값의 크기에 따라 오름차순으로 요소를 정렬한 뒤 팀원 수에 맞게 배열을 나눕니다. - 튜토리얼 참고하기 - 제스퍼(Ukong0324)님의 Discord-JS-Tutorial을.. 2021. 5. 3. 이전 1 2 다음
