전체 글 (50) 썸네일형 리스트형 [NodeJS] Discord Embed 꾸미기 2026.02.24 - [JavaScript/NodeJS] - [NodeJS] Discord Bot 연동하기 [NodeJS] Discord Bot 연동하기2026.01.25 - [JavaScript/NodeJS] - [NodeJS] Discord Webhook 연동하기 [NodeJS] Discord Webhook 연동하기친구들과 디스코드를 하면서 게임을 함께 끝내고 끝낸 해당 게임에 대한 결과 정보를 디스코드 채팅창에서 이rlawo32.tistory.com Discord Webhook, Discord Bot 등을 통해 Discord로 메시지를 보낼 때 Embed를 사용하면 기존 텍스트 메시지보다 더 풍부하고 구조화된 정보를 전달할 수 있다. 이번엔 이 Embed를 응용해서 텍스트에 효과를 주어 메시지를 .. [NodeJS] Discord Bot 연동하기 2026.01.25 - [JavaScript/NodeJS] - [NodeJS] Discord Webhook 연동하기 [NodeJS] Discord Webhook 연동하기친구들과 디스코드를 하면서 게임을 함께 끝내고 끝낸 해당 게임에 대한 결과 정보를 디스코드 채팅창에서 이미지로 바로 확인할 수 있다면 편리할 것 같다고 생각이 들어 NodeJS 서버에 Discord Webrlawo32.tistory.com Discord Webhook에 이어 Discord Bot을 추가로 연동해 보도록 하겠다.Webhook과 Bot의 차이점은 간단하게 Webhook은 내 서버에서 Discord로 데이터 전달만 가능했다면 Bot은 Discord 채널에 상주하면서 내 서버로 데이터 전달하고 그에 따른 응답을 할 수 있다는 점으.. [NodeJS] Discord Webhook 연동하기 친구들과 디스코드를 하면서 게임을 함께 끝내고 끝낸 해당 게임에 대한 결과 정보를 디스코드 채팅창에서 이미지로 바로 확인할 수 있다면 편리할 것 같다고 생각이 들어 NodeJS 서버에 Discord Webhook을 찾아 연동하게 되었다. 1. Discord Webhook 이란?Discord Webhook은 별도의 복잡한 설정 없이 이벤트가 발생했을 때 특정 채널에 실시간으로 메시지나 데이터를 보낼 수 있는 가장 빠르고 가벼운 기능이다. 단순한 HTTP POST 요청으로 이루어지기에 가볍게 응용해서 사용하면 좋다. Discord마다 서버가 있고 서버마다 채팅 채널, 음성 채널 이런 식으로 나뉘어 있다. 여기서 채팅 채널의 Webhook URL을 설정하고 해당 URL에 데이터를 전송하면 Discord가 .. [NodeJS] Render 사용하기 관련 포스팅2026.01.14 - [JavaScript/NodeJS] - [NodeJS] Express 서버 만들기 [NodeJS] Express 서버 만들기사이드 프로젝트 진행 중 간단한 백엔드 서버가 있어야 할 것 같아서 NodeJS를 선택하여 진행하였다.NodeJS + Express를 통해 서버를 구축해보자1. Node.js 설치우선 NodeJS 공식 사이트로 가서 NodeJS를 설rlawo32.tistory.com NodeJS + Express 서버를 로컬에서 직접 구동해본 뒤 직접 서버에 배포해서 24시간 하기위해 "Render" 라는 클라우드 서비스 플랫폼을 찾아 사용하게 되었다. 1. Render란? Render란 개발자 서비스를 서버에 쉽게 배포할 수 있게 해주는 클라우드 서비스형 플랫.. [NodeJS] Express 서버 만들기 사이드 프로젝트 진행 중 간단한 백엔드 서버가 있어야 할 것 같아서 NodeJS를 선택하여 진행하였다.NodeJS + Express를 통해 서버를 구축해보자1. Node.js 설치우선 NodeJS 공식 사이트로 가서 NodeJS를 설치해 주자 간단한 설치프로그램으로 설치가 진행되니 간편하다.https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org 설치 후 cmd 창을 열.. [Supabase] Realtime 사용하기 관련 포스팅2025.04.12 - [Server/Supabase] - [Supabase] Supabase 사용하기 [Supabase] Supabase 사용하기1. Supabase란?Supabase는 BaaS(Backend as a Service)로 서비스형 백엔드이다.프론트엔드단에서 백엔드 서비스를 제공해 주는 서비스 모델이다. 즉, 데이터베이스와 API를 구축하는 데 필요한 복잡한 설정과rlawo32.tistory.com2025.04.15 - [Server/Supabase] - [Supabase] NextJS + Typescript에 Supabase 연동하기 [Supabase] NextJS + Typescript에 Supabase 연동하기관련 포스팅2025.04.12 - [Server/Supabase].. [Supabase] PostgreSQL 함수, RPC 사용하기 관련 포스팅2025.04.12 - [Server/Supabase] - [Supabase] Supabase 사용하기 [Supabase] Supabase 사용하기1. Supabase란?Supabase는 BaaS(Backend as a Service)로 서비스형 백엔드이다.프론트엔드단에서 백엔드 서비스를 제공해 주는 서비스 모델이다. 즉, 데이터베이스와 API를 구축하는 데 필요한 복잡한 설정과rlawo32.tistory.com2025.04.15 - [Server/Supabase] - [Supabase] NextJS + Typescript에 Supabase 연동하기 [Supabase] NextJS + Typescript에 Supabase 연동하기관련 포스팅2025.04.12 - [Server/Supabase].. [React] 이미지 슬라이드 구현하기 한 화면에 여러 정보를 보여주고 동적이고 질 좋은 페이지를 만들고자 할 때 이미지 슬라이드 즉, 캐러셀은 개인적인 생각으로 빠질 수가 없다 생각한다. 한 화면에서 많은 정보를 보여주고 다양한 컨텐츠를 담아내기에 프로젝트를 만들 때 사용하면 정말 좋은 요소이다. CSS와 JS를 응용해서 만들어 낼 수도 있지만 난이도가 꽤 높고 번거롭다. 쉽고 간단하게 캐러셀을 만들어내기 위해 Swiper라는 라이브러리를 사용하여 원하는 대로 캐러셀을 Custom 하여 사용해 보자 1. Swiper 란?모바일 및 PC에서 구현하기 쉽고 사용하기 적합한 캐러셀 라이브러리이다.간단한 HTML, CSS, JS 코드를 통해 반응형 캐러셀 등을 만들어낼 수 있으며, 기본 디자인에서 사용자가 원하는 대로 커스텀 또한 가능하고 다양.. 이전 1 2 3 4 ··· 7 다음
