분류 전체보기

참고 자료 https://mui.com/material-ui/customization/how-to-customize/ How to customize - Material UI Learn how to customize Material UI components by taking advantage of different strategies for specific use cases. mui.com 참고 코드 import * as React from 'react'; import Slider from '@mui/material/Slider'; import { alpha, styled } from '@mui/material/styles'; const SuccessSlider = styled(Slider)(({ them..

참고자료 https://velog.io/@dev_cecy/npm-install-%EC%98%A4%EB%A5%98-code-ERESOLVE npm install 오류 (code ERESOLVE) 예전에 작성했던 코드를 로컬로 다시 클론받아 코드를 수정하려고했다. 화면을 보기위해npm start를 해주었더니, script 오류가 났고🤦🏻‍♀️ 당황하지 않고 npm install을 해주었다. 그랬더니 이 velog.io 참고 코드 npm install `패키지명' --save --legacy-peer-deps 코드 해석 from GPT3.5 npm install --save --legacy-peer-deps는 npm 패키지 관리자를 사용하여 프로젝트에 새로운 패키지를 설치하는 명령어입니다. 각 옵션의 의미는 ..

참고 자료 https://inpa.tistory.com/entry/CSS-%F0%9F%95%B9%EF%B8%8F-%EC%88%98%ED%8F%89-%EC%88%98%EC%A7%81-%EA%B0%80%EB%A1%9C-%EC%84%B8%EB%A1%9C-%EC%A0%95%EB%A0%AC-%EA%B8%B0%EB%B2%95-%F0%9F%92%AF-%EB%AA%A8%EC%9D%8C-%EC%A0%95%EB%A6%AC 🕹️ CSS 요소 수평/수직 정렬 기법 모음 수평 중앙 정렬 📢 inline / inline-block 요소 정렬 대상 요소(inline)의 부모 요소(block)에 text-align: center;를 지정한다. inline, inline-block, inline-table, inline-flex, 기..

참고자료 https://www.daleseo.com/react-radio-buttons/#google_vignette React에서 라디오 버튼 사용하기 Engineering Blog by Dale Seo www.daleseo.com 예시코드 function Radio({ children, value, name, defaultChecked, disabled }) { return ( {children} ); }; const GenderSubmitButton = styled.input` `; function Gender() { const [selection, setSelection] = useState(); return ( {selection} { e.preventDefault(); setSelection(..

사용방법 사용 할 때에는 만들 모달 컴포넌트를 원하는 위치에 붙이면 됨 ex) npm install styled-components 주석 버전 // import import Box from '@mui/material/Box'; import Modal from '@mui/material/Modal'; // 모달 박스 스타일 객체 const style = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 400, bgcolor: 'background.paper', border: '2px solid #000', boxShadow: 24, p: 4, }; // 모달 컴포넌트 function Moda..

React에서 props를 함수의 인수로 전달할 때 중괄호({})를 붙이지 않는 이유는 JavaScript의 구문 규칙에 기인합니다. React에서 props는 JavaScript 객체로 전달됩니다. 일반적으로 객체를 함수에 전달할 때는 중괄호({})를 사용하여 객체를 감싸주는 것이 올바른 구문입니다. 그러나 React에서는 중괄호({})를 사용하지 않는 이유는 JSX 문법과 관련이 있습니다. JSX는 JavaScript를 확장한 문법으로, React 컴포넌트에서 UI를 작성하기 위해 사용됩니다. JSX에서 중괄호({})는 JavaScript 표현식을 나타내는 데 사용됩니다. 중괄호({}) 안에는 JavaScript 표현식을 넣을 수 있고, 그 값은 JSX에서 평가되어 출력됩니다. React에서 컴포넌트..

참고자료 https://stackoverflow.com/questions/33381029/how-to-pass-html-tags-in-props 문제 발생 props로 html 태그를 전송하고 싶었지만 실패하였다 문제 해결 1. html 태그를 배열로 감싸 전달한다 2. html 태그 양 끝에 따옴표를 제거하고 태그만 남긴다. 해결 방법 1번 2번 중 골라 사용하면 된다. 만약 문자열 + 태그 + 문자열 과 같은 방식이라면 배열로 감싸 전달을 해야한다 결과 잘 전달됨