![]()
참고자료 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번 중 골라 사용하면 된다. 만약 문자열 + 태그 + 문자열 과 같은 방식이라면 배열로 감싸 전달을 해야한다 결과 잘 전달됨
![]()
문제발생 리액트에서는 페이지 이동을 원할 때 a태그를 사용을 권장하지 않는다. 이유 - 1. 페이지 새로고침 방지, 2. 내부라우팅, 3. 브라우저 히스토리 관리 위와 같은 이유로 리액트에서는 라우터(Router)라는 라이브러리를 사용하여 페이지 이동을 권장한다. 그렇다면 라우터는 어떻게 사용할까? 문제해결 1. 라우터 다운로드 npm install react-router-dom 2. index.js 수정 (라우터 적용) import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; // 라우터 라이브러리 임포트 import "./index.css"; imp..
![]()
위와 같은 CSS 파일이 있다고 가정하자. 파일 관리의 필요성과 컴포넌트 재사용성을 높이기 위해 styled-components 를 도입하기로 하였다. 기존 CSS 파일을 어떻게 styled-components로 변환해야 할까? 방법은 간단하다. CSS 선택자인 클래스 이름으로 styled-componet를 생성하면 된다. 이후 각 선택자들의 CSS스타일을 각 styled-component에 붙여넣어주면 된다.
