프론트엔드

콘텐츠 보안 정책(Content Security Policy)신뢰할 수 있는 웹 페이지 컨텍스트에서 악의적인 콘텐츠 실행으로 크로스 사이트 스크립팅(XSS), 클릭 재킹 및 기타 코드 삽입 공격을 방지하기 위해 도입된 컴퓨터 보안 계층이다.웹에서 사용하는 컨텐츠(이미지, 스크립트 등)에 대한 규칙으로 생각하면 될 것 같다.CSP의 경우 웹 사이트가 직접 룰을 적용해서 사용하게 된다. CSP 대표 헤더Content-Security-Policy : W3C에서 지정한 표준 헤더(주로 사용함)X-Content-Security-Policy : Firefox/IE 구형 브라우저에서 사용되는 헤더X-WebKit-CSP : Chrome 기반의 구형 브라우저에서 사용되는 헤더  설정 방법1. 태그를 이용한 방법페이지별..

정리 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..

웹페이지의 레이아웃을 쉽고 간단하게 사용할 수 있도록 구현된 와  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 () => ..