현박이 개발블로그

https://hsp97.github.io/deeplink/ Live Editor - HTML/CSS/JS 실시간 에디터브라우저에서 바로 코드를 작성하고 실시간으로 결과를 확인hsp97.github.io 인라인 코드 에디터 개발기 (AI가 잘 써주네요)최근 웹 기술 학습과 프로토타이핑을 위해 HTML/CSS/JS 코드를 실시간으로 작성하고 즉시 렌더링 결과를 확인할 수 있는 웹 기반 에디터를 직접 개발했습니다. 이 프로젝트는 단순한 코드 연습을 넘어, 복잡한 프론트엔드 환경에서 발생할 수 있는 여러 문제들을 해결하는 과정이었습니다.프로젝트 주요 목표 및 핵심 기능다중 섹터 관리: 여러 프로젝트(섹터)를 탭 형태로 생성하고 전환할 수 있습니다.실시간 렌더링: 코드(HTML/CSS/JS)를 입력하면 즉시 하..

기본적으로 html에서 title을 제공해준다.근데 사용자에게서 요구사항이 있었다.글씨크기가 너무 작다. 키워달라...처음엔 그냥 css로 수정했다.ㅇㅇgpt가 참 편하다. 그런데 저렇게 하니 툴팁을 띄우면 기존 데이터를 가려버린다는 이슈가 또 있었다.조절을 해봤는데 title 이 나오는 위치는 참 변경이 힘들었다.(결국안됨) 그래서 그냥 너무 귀찮았지만 javascript로 넣기로 했다.조건은 2가지다.1. 글씨 크기를 크게키울것2. 본문을 가리지않게 타이틀 위치를 마우스 아래로 나오게할것 테스트입니다 $('body').append('');let tip;$('.title_tooltip[title]').mouseover(function(e..

최근 유튜브 노래를 가져오는 부분에서 문제가 있었다.노래를 가져오려고하면 403 에러가 나기 시작했는데 아마 유튜브 쪽에서 막은것 같다. 한동안 방치해뒀다가 다시 실행해보니 정상적으로 실행이 되었는데 확인해보니distubejs/ytdl-core 쪽에서 최근에 업데이트를 했다고 나와있었다. 어떤게 업데이트 되었나 변경된 코드를 확인해봤는데WEB_CREATOR 라는것을 사용하던 것을WEB_EMBEDDED 으로 바꿨다고 나와있었다.어저 두개의 차이점을 검색해봤는데 WEB_CREATOR 는 크리에이터 전용 API,WEB_EMBEDDED 는 YouTube API를 직접 호출하지 않고, iframe을 통해 YouTube 서버에서 자동으로 데이터를 가져옴라고 되어있었다.크리에이터 전용 api 라고 되어있지만 기본적으..

예전에 만들어놓고 한동안 방치해놨지만 늦게나마 기록을 위해 코드도 정리할겸 전체 코드를 올리기로 했다.const { Client, GatewayIntentBits, ActionRowBuilder, ButtonBuilder, ButtonStyle, EmbedBuilder } = require('discord.js');const { joinVoiceChannel, createAudioPlayer, createAudioResource, AudioPlayerStatus, getVoiceConnection } = require('@discordjs/voice');//const ytdl = require('ytdl-core'); //수정예정const ytdl = require("@distube/ytdl-core..

간만에 디스코드 봇을 건드려보는데 ytdl-core 라이브러리 대체 할 수 있도록 누군가 추가해놨다고 하니 사용해봤다.  require('ytdl-core') -> require('@distube/ytdl-core') 로 변경하면 된다.사용법도 동일하니 그냥 변경만 하면 잘 되니 그냥 사용하면 된다. 이제 여기에 embed 와 버튼을 추가해서 디스코드에서 gui 로 명령을 내릴수 있도록 만들 예정이다

노래봇에 재생목록, 삭제, 넘기기, 반복재생 등등 기능을 만들었는데 중요한 문제가 생겼다.유튜브 정책 변경으로 기존에 사용중이던 ytdl-core 라이브러리가 사용이 불가능해졌다.다른 방법을 찾아야하는 상황이다.일단 아래는 지금까지 작업했었던 코드다.const { Client, GatewayIntentBits } = require('discord.js');const { joinVoiceChannel, createAudioPlayer, createAudioResource, AudioPlayerStatus } = require('@discordjs/voice');const ytdl = require('ytdl-core'); //수정예정const { token, youtubeApiKey } = require..

이제 얼추 정리는 끝났다.유튜브search api도 가져왔고, 그걸 이용하여 노래 재생까지 완료된 상태다.여기에 명령어를 정리하여 코드를 정리해보자 현재까지 작성했던 내용을 바탕으로 조금 정리해본 코드이다.const { Client, GatewayIntentBits } = require('discord.js');const { joinVoiceChannel, createAudioPlayer, createAudioResource, AudioPlayerStatus } = require('@discordjs/voice');const ytdl = require('ytdl-core');const { token, youtubeApiKey } = require('./discordConfig.js');const sodi..

이런저런 일이 많아 잠시 내려놓았다가 시간이 생겨 또 추가해보았다.이번엔 직접 유튜브 링크를 작성하여 재생시키는게 아닌 특정단어로 해당 유튜브를 재생시키는 방법을 추가했다.고맙게도 node js 에 youtube-search 모듈이 있다.npm install youtube-search이후 https://console.developers.google.com Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com에 접속하여 프로젝트를 만들고 key를 발급받자자세한건 아래 블로그 참고https://bonniness.tistory.com/entry/%EA%B5%AC%EA%B8%80-Youtube-API-%EC%82%AC%EC%9A%A9-%EC%82%AC%EC%9..

저번에 특정 노래만을 재생하도록 만들어놨으니 이번엔 URL을 받으면 그 노래를 반복재생하도록 추가해보았다.else if (command.indexOf('https://www.youtube.com') != -1) { const playUrl = command; voiceChannel = message.member.voice.channel; if (!voiceChannel) { return message.reply('채널에 먼저 들가라'); } const permissions = voiceChannel.permissionsFor(message.client.user); if (!permissions.has('CONNECT') || !perm..

디스코드에서 쓸만한 노래봇을 쓰려고 하는데 특정 기능을 사용하려 하니 유료결제가 필요하다길래 직접 만들어본다.일단 node js 사용하였다. npm init 로 세팅하며 시작 필요한 모듈은 아래와 같다npm install discord.js @discordjs/voice ytdl-core libsodium-wrappers discord.js 는 discord에서 제공하는 기능을 사용하기위해ytdl-core 는 youtube에서 url로 영상을 가져와 처리하기위해 사용한다 https://discord.com/developers/applications Discord Developer Portal — API Docs for Bots and DevelopersIntegrate your service with D..