Set과 Map
2021. 5. 11. 03:57
dev-log/JS
Set과 Map Set Set 객체는 서로 중복되지 않는 값(value)들의 집합(set)으로, 배열과 유사하게 생긴 객체지만 배열과 달리 ①동일한 값을 중복하여 포함할 수 없으며 ②요소 순서에 의미가 없고, ③index가 존재하지 않기 때문에 index로 요소에 접근할 수 없음. 대괄호가 아닌 중괄호로 감싼 배열처럼 생겼음! Set은 수학적 집합을 구현하기 위한 자료구조임. => 교집합, 합집합, 차집합, 여집합 등 구현 가능 집합은 가장 근간이 되는 자료구조 중 하나로, 프로그래밍에서 집합은 ①중복되지 않고 ②정렬되지 않은 항목들의 그룹을 의미함. 집합은 O(1) 상수 시간 연산이 가능한데, 이는 집합의 구현이 해시 테이블의 구현을 기초로 하기 때문임. 집합은 어떤 항목이 유일한지 확인할 때 강력한 ..
페이지 상단 이동 버튼(scroll to top button) 만들기
2021. 5. 8. 21:37
dev-log/Project
이번 프론트엔드 스쿨 파이널 프로젝트 때 만들었던 웹 애플리케이션인 Suits에 페이지 상단 이동 버튼을 추가할 필요성을 느껴 스크롤 버튼 컴포넌트 및 그에 대한 로직을 추가하게 되었습니다. (사용 기술: JavaScript, React, Styled-Components) 보통은 이렇게 네이버처럼 우측 하단에 scroll to top 버튼을 두는 게 일반적인 것 같은데요, 저희는 하단이 아닌 페이지 상단에 이 버튼을 위치시키고 싶었습니다. 만약에 우측 하단에 스크롤 버튼을 위치시키려면 우측 하단에 이미 존재하는 다크모드 전환 버튼과 나란히 위치시켜야 했는데요(위 사진의 네이버 메인페이지처럼 말이죠~), 그렇게 할 경우 (특히 모바일의 경우) 사용자가 다크모드 버튼을 누르려다가 실수로 스크롤 버튼을 누르는..
[Discord.js로 디스코드 봇 만들기] 03. 도움말 명령어 작성하기
2021. 5. 5. 19:00
dev-log/Project
오늘은 튜토리얼을 참고하여 명령어에 대한 사용 방법 등을 조회할 수 있는 도움말 명령어를 작성해보도록 하겠습니다. 준비 전날 작성했던 새로운 bot.js 파일에서 아래 코드의 마지막 줄과 같이, client에 category라는 프로퍼티를 새롭게 추가해주세요! 곧 작성할 도움말 명령어에서 카테고리들을 쉽게 불러올 수 있도록 하기 위함이라고 하네요. // bot.js client.commands = new Discord.Collection(); client.aliases = new Discord.Collection(); client.category = ['bot', 'moderator']; 셋째 날 이번 시간에는 !도움말 + 명령어(예를 들어 '!도움말 청소')를 입력하면 해당 명령어에 대한 사용 방법과 ..
[Discord.js로 디스코드 봇 만들기] 02. 커맨드 핸들러 만들기
2021. 5. 4. 05:51
dev-log/Project
티미를 만들고 작동을 시켜보니 정상적으로 돌아가기는 합니다. 다만, 티미가 돌아가도록 코드를 실행시키지 않은 상태에서 티미는 계속 오프라인이고 명령어를 실행하지도 않는다는 문제점이 있습니다. 그렇다면 티미가 저 없이도 24시간 살아숨쉬게 하려면 어떻게 해야 할까요? 바로 AWS나 Heroku 등의 서비스를 통해서 호스팅을 하면 된다고 합니다. ㅎㅎ 호스팅을 하기 전에 코드를 먼저 완성해 놓아야 하겠죠!? 오늘은 저번 시간에 이어 Ukong0324님의 튜토리얼을 따라 차근차근 실습을 해보도록 하겠습니다. 이번 편은 커맨드 핸들링에 관한 내용이라고 하네요. 준비 코드에서 사용될 fs 모듈이란? fs 모듈이란 File System의 약자로, Node.js의 여러 내장 모듈 중 하나라고 합니다. 파일을 읽거나 ..
[Discord.js로 디스코드 봇 만들기] 01. 시작하기
2021. 5. 3. 02:14
dev-log/Project
디스코드 라이브러리인 Discord.js를 이용하여 디스코드 봇을 만들어보기로 했습니다. 게임동호회에서 직접 사용할 랜덤 팀짜기 봇을 만들 예정입니다. ㅎㅎ 22.07.09 추가 - 이하에서 웹훅(webhook) 관련해서 나오는 내용들은, 만약 웹훅 기능을 사용하실 것이 아니면 스킵하셔도 무방합니다! 준비 - Discord.js 설치하기 npm i discord.js --save - 팀짜기 로직 - 게임에 참가하는 멤버들의 명단을 배열로 받은 뒤, 각 멤버들에게 임의의 key 값(Math.random 사용)을 부여합니다. - key 값의 크기에 따라 오름차순으로 요소를 정렬한 뒤 팀원 수에 맞게 배열을 나눕니다. - 튜토리얼 참고하기 - 제스퍼(Ukong0324)님의 Discord-JS-Tutorial을..