쭈링이.log 쭈링이.log

Selectselect 란 여러 MenuItem 컴포넌트를 사용하여 옵션들 중 선택하여 제공하는 컴포넌트이다.Material UI의 select 컴포넌트는 다양한 설정과 스타일링 옵션을 제공하여 옵션을 선택 할 수 있다. import { Box, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from "@mui/material";import { useState } from "react";function Mui() { const [age, setAge] = useState(''); const handleChange = (event: SelectChangeEvent) => { setAge(event.target.valu..

RatingRating 이란 material UI 에서 아이콘으로 평점을 나타내주거나 기능을 구현한 컴포넌트이다.Material UI의 Rating컴포넌트는 다양한 설정과 스타일링 옵션을사용하여 평점 설정 해주는 컴포넌트이다. import { Box, Rating, Typography } from "@mui/material";import { useState } from "react";function Mui() { const [value, setValue] = useState(2); // 기본 값으 2로 설정 return ( legend': { mt: 2 }, }} > Controlled { ..

Radio GroupRadio Group 이란 라디오 버튼들을 그룹화 시켜 라디오 버튼 기능을 제공하는 Materal UI 의 컴포넌트이다.RadioGroup 컴포넌트와 FormControlLabel, Radio 컴포넌트속 속성을 추가하여 기능 및 디자인을 설정한다. import { Checkbox, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from "@mui/material";function Mui() { const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; return ( // form 을 제어하는 컴포넌트 Gender // ..

Checkboxcheckbox란 사용자가 선택할 수 있는 체크박스를 생성하는 데 사용된다.Material UI의 Checkbox 컴포넌트는 다양한 설정과 스타일링 옵션을 제공하여 하나 이상의 옵션을 선택 할 수 있다. import { Checkbox } from "@mui/material";function Mui() { const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; // label속성을 선언한다 return ( // defaultChecked 기본으로 체크표시 설정 // 클릭 불가능 설정 // 체크표시 및 클릭 불가능 설정 ..

ButtonButton이란 버튼 태그에 다양한 스타일과 기능을 추가해서 클릭 가능한 액션을 표현해준다.버튼의 모양, 동작 및 스타일을 속성을 통해 제어할 수 있다.기본적으로 버튼 클릭할 때 ripple(물방울 퍼지듯이)스타일이 들어가있다. import { Button, Stack } from "@mui/material";function Mui() { return ( // mui 의 Stack 태그 Text // mui 의 Button 태그 Contained // variant값에 따라 배경색을 추가 Outlined // variant값에 따라 테두리를 추가 ..

Autocomplete Autocomplete란 사용자가 입력할 때마다 옵션을 제안해주는 기능이다.자동으로 입력값이 포함된 옵션을 보여주면서 선택할 수 있게 해준다. import { Autocomplete, TextField } from "@mui/material";function Mui() { const top100Films = [ // 단어검색시 보여줄 옵션들을 나열한다. { label: 'The Shawshank Redemption', year: 1994 }, { label: 'The Godfather', year: 1972 }, { label: 'The Godfather: Part II', year: 1974 }, { label: 'The D..

Material UIMaterial UI 란 React 기반의 UI 컴포넌트 라이브러리로, MUI라고 불리기도 한다.Google의 Material Design 원칙에 기반을 둔 스타일링된 컴포넌트로써 주로 웹 애플리케이션 개발에서 UI를 구성할 때 사용되고 다양한 기능과 디자인 옵션을 제공합니다.    Material UI 설치Material UI를 설치 하기위해서 Visual Studio Code에서 터미널을 열어준다.프로젝트 폴더의 터미널을 열어서 명령어를 입력해준다. npm install @mui/material @emotion/react @emotion/styled 명령어를 입력하면 아래 성공로그가 나타난다. 설치가 성공되면 package.json 에서 확인할 수 있다.

OpenZeppelinOpenZeppelin이란 솔리디티 기반의 스마트 컨트랙트를 개발할 수 있는 표준 프레임워크이다. OpenZeppelin 설치VSCode를 설치하고 폴더(폴더명: contracts)를 하나 생성 한 후 터미널을 열어서 npm으로 OpenZeppelin 을 설치한다. npm i @openzeppelin/contracts 명령어를 입력해서 설치한다. 설치가 완료되면 VSCode에서 스마트 컨트랙트를 생성하기위해 솔리디티 기반 MintAnimalToken.sol 파일을 생성하고 스마트 컨트랙트를 작성한다.  Solidity 작성법solidity 코드를 작성할때 주석으로 SPDX (Software Package Data Exchange) 라이선스 식별자를 작성한다.SPDX는 소프트웨어 패키..