전체 글

정리 React-Doc-Study/1주차 at main · tjddnr9553/React-Doc-StudyContribute to tjddnr9553/React-Doc-Study development by creating an account on GitHub.github.com컴포넌트 생성 및 중첩하기컴포넌트(Component)란?고유한 로직과 모양을 가진 UI(사용자 인터페이스)의 일부입니다. 마크업을 반환하는 자바스크립트 함수로, 마크업이란 태그로 둘러싸인 코드를 의미합니다. 컴포넌트의 이름은 항상 대문자로 시작하고, HTML 태그는 소문자로 시작합니다. export default 키워드는 파일의 기본 컴포넌트를 지정합니다.function MyButton() { return ( I'm a bu..

AWS CloudFront란?AWS CloudFront는 AWS의 CDN(Content Delivery Network) 서비스다.CDN(Content Delivery Network) 이란?클라이언트의 콘텐츠 요청으로 서버에서 받아온 콘텐츠를 캐싱하고 이후 같은 요청이 왔을 때, 캐싱해뒀던 데이터를 제공하는 서비스이다.물리적으로 거리가 먼 곳에도 빠르게 요청을 처리할 수 있고 결과적으로 서버의 부하를 낮출 수 있다. Edge Location(Pop) / Regional Edge Cache(REC)Edge Location은 CloudFront 서비스가 콘텐츠를 캐싱하고 클라이언트에게 제공하는 지점 혹은 캐시 서버를 의미한다.만약, 사용자가 요청한 콘텐츠의 캐시가 Edge Location에 있다면 멀리 있는 ..

웹페이지의 레이아웃을 쉽고 간단하게 사용할 수 있도록 구현된 와  Container 컴포넌트 컴포넌트는 컨텐츠(내용)을 좌우에 적당한 간격을 두고 화면 중앙에 위치시킬때 사용한다.1. 최대 너비만을 제한하는 fluid 모드2. 항상 동일한 너비를 강제하는 fixed 모드import { Container, Typography } from "@material-ui/core";import { makeStyles } from "@material-ui/core/styles";const useStyles = makeStyles((theme) => ({ container: { background: theme.palette.success.main, },}));export default () => { cons..

Paper 컴포넌트 컴포넌트는 포스트잇처럼 화면에서 도드라져 보이는 효과를 제공한다.elevation, outlined 2가지 형태를 사용할 수 있다.elevation : 영역이 약간 튀어나와 보이게 한다.outlined : 테두리(윤곽선)이 보이게 한다.import { Paper, Typography } from "@material-ui/core";import { makeStyles } from "@material-ui/core/styles";const useStyles = makeStyles((theme) => ({ paper: { padding: theme.spacing(2), },}));export default () => { const classes = useStyles(); ret..

TextField 컴포넌트는 Material UI의 다른 컴포넌트인 , , 등으로 구성되어 있는 고수준 컴포넌트이다.를 사용하면, 여러 개의 하위 컴포넌트를 사용하는 효과를 얻을 수 있다. 형태는 standard, filled, outlined 총 3가지의 형태로 제공된다.standard : 배경색 X, 테두리 X, 밑줄만 표시filled : 배경색 O, 테두리 Xoutlined : 배경색 X, 테두리 Oimport { TextField } from "@material-ui/core";export default () => ( ); 상태는 required나 disabled와 같은 엘리먼트 기본 속성뿐만 아니라, error와 같은 추가적인 상태도 지원한다.'error' prop..

버튼 형태Material UI에는 text, contained, outlined 총 3가지 형태의 버튼을 제공한다.text : 배경색 X, 테두리 X (텍스트에만 스타일 적용)contained : 배경색 O, 테두리 Xoutlined : 배경색 X, 테두리 Oimport { Button } from "@material-ui/core";export default () => ( Text Contained Outlined );색상은 'color' prop을 이용해서 조절할 수 있다.import { Button } from "@material-ui/core";export default () => ( Default Primary Secondar..

패키지 설치1,000 여종의 SVG 아이콘을 제공하는 @material-ui/icons$ npm i @material-ui/icons 사용 방법Material Icons 페이지에서 원하는 아이콘을 검색한다.해당 아이콘 컴포넌트를 불러와서, React 컴포넌트 안에서 바로 사용한다.import EcoIcon from "@material-ui/icons/Eco";export default () => ;아이콘의 색상은 'color' prop으로 바꿀 수 있다.아이콘의 크기는 fontSize prop으로 바꿀 수 있습니다. 커스텀 아이콘 사용하기 컴포넌트를 사용해 커스텀 아이콘을 사용할 수 있다.import { SvgIcon } from "@material-ui/core";export default () => ..