안녕하세요! RyuWoong입니다. 자, 이번에는 Custom Hook에 대해 이야기 해보려고 합니다. 많이 쓰이는 방식이니 잘 보시고 부족한 부분이 있으면 말씀해주세요! Custom Hook? Custom Hook이 뭘까요? 자신이 만든 자신만의 Hook을 의미합니다. 무슨 소린가 싶죠? Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 사용할 수 있습니다! 예제와 함께 보는 것이 이해가 좋을 것 같네요! 예제. import React, { useState, useEffect } from 'react'; function FriendStatus(props) { // 이 부분을 기억하세요. const [isOnline, setIsOnline] = useState(null); useEffect(() => {..

안녕하세요! RyuWoong 입니다. 이번에는 간단한 명령어를 생성하고 실행하도록 해보겠습니다. Discord.js Tutorial의 내용입니다. 그럼 시작해볼까요? Quick Start. 앞서 disocrdBot 폴더 내에 프로젝트를 생성하셨다면, discordBot 폴더 내에 index.js라는 파일을 생성하고 아래와 같이 입력합니다. //index.js const { Client, Events, GatewayIntentBits } = require('discord.js'); const client = new Client({ intents: [GatewayIntentBits.Guilds] }); client.once(Events.ClientReady, (c) => { console.log(`Ready..

안녕하세요. RyuWoong입니다. 계속해서 Next.js 와 알고리즘, 자료구조를 공부하면서 머리도 식힐겸 오랜만에 Discord Bot을 만져봤습니다. 이전에 discord.py (파이썬으로 디스코드 봇 만들기)는 더 이상 진행하지 않을 예정입니다. discord.py는 오래 전에 작성한 내용이며, 틀린 내용도 꽤 있습니다. 기록을 위해 남겨 두었습니다. 따라서 discord.js로 새롭게 Bot 만들기를 포스팅합니다. 먼저 discord.js를 선택한 것은 크게 두 가지 이유가 있습니다. 첫번째 이유는 저는 최근 JS와 TS만 다루고 있기 때문입니다. 두번째 이유는 discord.py보다 discord.js의 튜토리얼이나 가이드가 더 잘 되어있다고 생각했습니다. 그래서 제 포스팅을 안보시더라도 Di..

안녕하세요! RyuWoong입니다. 이번에 이야기의 주제는 Context API 입니다. Context? 우선 Context에 대해 먼저 알아봅시다. Context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. React를 공부하다보면 전역상태관리라는 말을 한번쯤은 들어보신적이 있을 겁니다. 짧게 말하면 전역상태관리를 위해 고안된 방법이라고 말씀드릴수 있겠네요. 전역으로 관리하는 데이터로는 로그인 정보나 테마, 언어 설정 등을 예로 들수 있을 것 같습니다. 어떤 때에 사용하면 좋을까요? 일반적으로 React는 데이터 구조가 하향식(단방향)입니다. 따라서 하위 컴포넌트에 데이터를 전달하기 위해선 Props Drilling이 발생하게 ..

안녕하세요. RyuWoong입니다. 이번에 이야기의 주제는 useReducer입니다. 상태관리 라이브러리인 Redux를 사용해 보셨으면 꽤 친숙한 Hook 이실텐데요. 한 번 알아보러 가봅시다. useReducer useReducer는 상태 관리 Hook 입니다. useState를 대체할 수 있는 Hook인 것이죠! 🤔 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 선호합니다. useReducer는 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화할 수 있게 합니다. 공식 문서에서는 useReducer를 어떤 때에 사용하는 것이 좋은지 위와 같이 말하고 있습니다. 어떤 의미인지 코드와 함께..