프론트엔드/React

참고자료(배포 방법) https://codingapple.com/unit/react-build-deploy-github-pages/ 만든 리액트 사이트 build & Github Pages로 배포해보기 - 코딩애플 온라인 강좌 (리액트 강좌 전체 목록) 이번시간은 간단한 내용이기 때문에 글로 빠르게 진행합니다. 여러분이 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리는게 아니라 build용 파일을 codingapple.com https://velog.io/@byjihye/react-github-pageshttps://codingapple.com/unit/react-build-deploy-github-pages/ [React] 프로젝트 GitHub Pages 배포하기 React 프로젝..

import React from 'react'; import styled, { css } from 'styled-components'; const sizes = { desktop: 1024, tablet: 768 }; // 위에있는 size 객체에 따라 자동으로 media 쿼리 함수를 만들어줍니다. // 참고: https://www.styled-components.com/docs/advanced#media-templates const media = Object.keys(sizes).reduce((acc, label) => { acc[label] = (...args) => css` @media (max-width: ${sizes[label] / 16}em) { ${css(...args)}; } `; ret..

import React, { useState } from "react"; const App = () => { // 초기 데이터 객체 리스트 const [names, setNames] = useState([ { id: 1, text: "눈사람" }, { id: 2, text: "얼음" }, { id: 3, text: "눈" }, { id: 4, text: "바람" }, ]); //입력한 텍스트 state const [InputText, setInputText] = useState(""); //추가 할 데이터 객체의 Id state const [nextId, setNextId] = useState(names.length+1); // 리스트 길이 +1로 설정 //이벤트 객체의 입력한 텍스트 감지 함수 cons..

import React, { useState } from 'react'; const EventPractice = () => { const [form, setForm] = useState({ id:'', pw:'', verification: false, }); const {id, pw, verification} = form; // 비구조화 할당 const onChange = (e) => { const nextForm = { ...form, [e.target.name] : e.target.value // name }; setForm(nextForm); console.log(nextForm); } // 검증 함수 const verify = () => { if(pw==='1234') // 비밀번호가 1234라면..

import React, { useState } from 'react'; const EventPractice = () => { const [form, setForm] = useState({ // 객체 형식의 useState를 생성하여 여러 개의 입력 값을 받을 수 있도록 한다 username:'', // 요소의 입력 값을 받을 key-value message:'', // 위와 동일 }); const {username, message} = form; // form 객체를 비구조화 할당하여 이후 form.username이 아닌 username으로 사용 가능 const onChange = (e) => { const nextForm = { ...form, // 기존 form을 복사하여 [e.target.name..

참고 자료 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.5npm install --save --legacy-peer-deps는 npm 패키지 관리자를 사용하여 프로젝트에 새로운 패키지를 설치하는 명령어입니다. 각 옵션의 의미는 다음과 ..