Moong

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

화면 너비에 따라 요소들이 완벽하게 똑같은 비율로 늘고, 줄도록 만들고 싶을 때가 있죠! 그럴 때를 위해 제가 만든 유용한 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..