npm
-
MUI - Radio GroupFront-end/Material UI 2024. 7. 11. 10:38
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 // ..
-
MUI - AutocompleteFront-end/Material UI 2024. 7. 10. 15:12
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 UI 설치Front-end/Material UI 2024. 7. 10. 14:38
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 에서 확인할 수 있다.
-
Typescript - 설치 및 셋팅Front-end/Typesrcipt 2023. 4. 11. 10:46
Typescript 란 Javascript를 기반으로 타입을 추가하여 더 나은 도구를 제공하는 강력한 유형의 프로그래밍 언어이다. Typescript를 쓰는 이유 Javascript 는 Dynamic Typing(동적 타입 / week Type) 을 제공한다. Dynamic Typing 이란 변수의 타입 지정(Type annotation)없이 값이 할당되는 과정에서 자동으로 변수의 타입을 지정(타입추론 / Type Inference)해준다. 또한 같은 변수에 여러 타입의 값을 할당 할 수 있다. var str = 'Hello'; var num = 31; var strArr = ['Js', 'HTML', 'CSS']; var dynamicVariable = 'String'; console.log(dynam..