Moong

스택(Stack) 👉 Stack이란? LIFO(Last In First Out) 구조로 저장하는 형식 📒 [C++] STL Stack 🔴 선언 stack 변수명; #include stack q; 🔴 기본 함수 🔹 데이터 추가 stack.push(elem); 🔹 데이터 삭제 stack.pop(); 🔹 첫 번째 데이터 반환 stack.top(); 🔹 길이 반환 stack.size(); 🔹 비어 있는지 반환 stack.empty(); 🔹 두 스택의 값을 서로 바꾸기 swap(stack1, stack2);

오늘은 아이콘과 알림음을 포함한 알림을 보내줄 수 있는 React custom hook을 만드는 법에 대해 알려드리겠습니다! 🔔 Notification API Notification API를 사용하면 웹에서도 사용자들에게 알림을 보내줄 수 있습니다. 📎 Notification 관련 링크 Notification 객체를 사용하면 쉽게 구현이 가능합니다! const notification = new Notification("Hi there!"); Notification 허용 상태 아래 화면을 다른 사이트들에서 많이 보셨죠! 유저가 해당 웹 사이트의 알림 권한을 허용했는 지에 따라 notification permission의 상태가 달라지게 됩니다. 1️⃣ default : 유저가 허용하지도, 차단하지도 않은 ..

이번엔 React 와 Sass를 이용하여 다크모드 / 라이트 모드 테마를 적용하는 법에 대해 이야기 해보겠습니다 🌕 테마를 설정하는 데는 크게 1. theme object 사용하기 / 2. 함수 사용하기 두 가지 방법이 있습니다. 우선 두 가지 방법을 설명하는 데에 앞서, 테마를 적용하는 원리에 대해 알아보겠습니다! Scss에 테마 정보 알리기 - body 태그에 class를 넣었다 뺐다 하기 scss 파일에서 현재 테마가 어떤 것인지 알기 위해서는 class로 그 정보를 알려주어야 합니다. 따라서 상단에 존재하는 body 태그의 class에 테마 정보를 넣는 것이죠! 지금 현재 어떤 LIGHT 또는 DARK 테마인지에 대한 정보는 저는 기본 테마를 dark 모드로 할 예정이라 body 태그에 LIGHT..

보통 콘솔 창은 개발을 할 땐 유용하게 쓰이지만, 실제 배포할 때엔 민감한 정보가 포함되어있을 수 있으므로 보안을 위해서 콘솔창을 비워두는 것이 좋습니다. 하지만 일일이 지우기엔 매우 귀찮고, 에러 메시지의 경우 지우기 힘든 경우도 있습니다. 콘솔창을 한꺼번에 지우거나 비우는 여러 방법이 존재하지만 아주 간편한 기능을 소개해드리겠습니다 JS 기능 이용 javascript 파일의 최상단에서 해당 코드를 추가해주시면 됩니다. console이라는 객체를 초기화 해주는 코드입니다. console.warn과 console.error 도 초기화 해줌으로써 지우기 힘든 메시지들도 보이지 않게 할 수 있습니다. if (process.env.NODE_ENV === "production") { // production에서..

종종 웹사이트를 보다가 콘솔창을 켜보면 알록달록하고 예쁜 글자들이 보일 때가 있습니다 보통 개발자들밖에 콘솔창을 확인하지 않기는 하지만, 저는 제 서비스에 관심을 가져주는 개발자 분들에게 잘 보이기 위해 콘솔창을 꾸미는 편입니다! 하하 😺 오늘은 콘솔창을 어떻게 꾸미는지 한번 알아볼게요! 글자를 ASCII로 변환하기 일반 텍스트로 꾸밀 수도 있겠지만, 더욱 돋보이는 글자를 만들기 위해 ascii로 변환해보겠습니다. 📎 Text to ASCII 위 웹사이트에서 손쉽게 아스키 코드로 변환할 수 있습니다. 글자를 입력하고 Test All 버튼을 누르면 모든 폰트 스타일 예시들을 한번에 볼 수 있습니다 저는 ANSI Shadow 폰트를 선택했어요! Select & Copy 버튼을 눌러 복사해줍니다. 스타일 설정..

화면 너비에 따라 요소들이 완벽하게 똑같은 비율로 늘고, 줄도록 만들고 싶을 때가 있죠! 그럴 때를 위해 제가 만든 유용한 sass 함수들을 소개시켜드리도록 하겠습니다 길이 단위 종류 우선 웹에서 사용하는 길이 단위의 종류에는 무엇이 있는지 살펴보겠습니다. 단위 종류 설명 절대적 / 상대적 길이 단위 px 픽셀 (1px = 1/96th of inch) 절대 em 글꼴 크기 / 부모의 x배를 나타냄 상대 rem 글꼴 크기 / html 크기의 x배를 나타냄 상대 vw 화면 너비의 x%만큼의 크기를 나타냄 상대 vh 화면 높이의 x%만큼의 크기를 나타냄 상대 % 부모의 x%만큼의 크기를 나타냄 상대 여기에서 우리는 화면 너비에 따라 크기가 변하도록 만들어야 하므로, 화면 너비와 관련이 있는 단위인 vw 를 사..

Aptos 지갑을 만드는 가장 쉬운 방법은 Martian 지갑을 이용하는 것일텐데요, Martian을 이용하지 않고 React 코드로 프론트엔드에서 Aptos 지갑을 만드는 법에 대해 이야기 해보겠습니다. 랜덤 지갑 생성과, 니모닉 코드를 기반으로 지갑을 생성하는 부분을 다뤄볼게요! aptos ⚠️ npm 을 이용하여 해당 라이브러리를 다운 받으면 에러가 나더라고요! 꼭! ⭐️ index.html에 script 파일을 직접 불러오는 방식⭐️ 으로 라이브러리를 사용하세요! 지갑 생성 코드 script 형태로 불러온 라이브러리 모듈은 window.aptosSDK 로 가져올 수 있습니다. 랜덤 지갑은 AptosAccount class의 생성자를 이용하여 생성할 수 있습니다! const generateAptos..

Solana 지갑을 만드는 가장 쉬운 방법은 Phantom 지갑을 이용하는 것일텐데요, Phantom을 이용하지 않고 React 코드로 Solana 지갑을 만드는 법에 대해 이야기 해보겠습니다. 랜덤 지갑 생성과, 니모닉 코드를 기반으로 지갑을 생성하는 부분을 다뤄볼게요! @solana/web3.js ⚠️ npm 을 이용하여 해당 라이브러리를 다운 받으면 에러가 나더라고요! 꼭! ⭐️ index.html에 script 파일을 직접 불러오는 방식⭐️ 으로 라이브러리를 사용하세요! bs58 solana에서 생성된 지갑의 private key를 bs58 형태로 인코딩하기 위해서는 bs58 라이브러리가 추가로 필요합니다 npm i bs58 지갑 생성 코드 script 형태로 불러온 라이브러리 모듈은 window..

EVM은 이더리움 가상 머신(Ethereum Virtual Machine)의 줄임말로, 이더리움 계열의 메인넷은 지갑 주소 체계가 동일해서 메인넷마다 지갑을 별도로 생성할 필요가 없이 하나의 지갑 주소를 사용할 수 있습니다. EVM 체인으로 유명한 예로는 Ethereum, Polygon, Klaytn 등이 있습니다! 블록체인에서 가장 유명한 지갑인 Metamask도 EVM 기반 체인들을 지원하는데요, 사실 라이브러리를 사용하면 EVM 기반의 지갑을 아주 쉽게 생성할 수 있습니다. 저는 React와 ethers 라는 라이브러리를 사용해서 한번 만들어볼게요! 📎 evm 체인 리스트 더보기 ethers npm i ethers 지갑 생성 코드 다음은 createRandom 함수를 통해 지갑을 생성하는 코드입니다..

니모닉 코드 니모닉이란, 지갑을 복구할 수 있는 12개의 단어입니다. 아마 메타마스크같은 블록체인 지갑 서비스를 사용해보신 분들은 이미 익숙하실텐데요! 니모닉 코드 단어는 아무 단어로나 이루어진 건 아닙니다! BIP-39(Bitcoin Improvement Proposal 39)라는 일반적인 산업표준에서 표준화되었습니다. 아무튼, 니모닉 코드를 기반으로 지갑을 생성할 수 있습니다. bip39 아까 니모닉 코드는 BIP-39라는 산업 표준을 따른다고 말씀드렸는데요, bip39 라이브러리를 통해 랜덤 니모닉 코드를 아주 쉽게 생성할 수 있습니다! npm i bip39 랜덤 니모닉 코드 생성 코드 bip39 라이브러리의 generateMnemonic 함수를 이용하면 됩니다. import * as bip39 "..