분류 전체보기

참고자료(배포 방법) 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 프로젝..

참고자료 Tailwind CSS 자동 완성이 작동하지 않음(이것을 보십시오) | Tailwind CSS Intellisense VS 코드 - YouTube

미리보기 사용방법 1. MUI 설치 1.1 작업 폴더에서 터미널을 켠다 VSC단축키(Ctrl + ` (esc 밑에 있는 거)) 1.2 아래 코드를 순서대로 터미널에 입력한다. npm install @mui/material @emotion/react @emotion/styled npm install @mui/material @mui/styled-engine-sc styled-components npm install @fontsource/roboto npm install @mui/icons-material // 참고 링크 //https://mui.com/material-ui/getting-started/installation/ 2. 컴포넌트 만들기 2.1 ChatTest.jsx 파일을 생성하고 아래 코드를 ..

1. 위치 2. 정렬 3. 크기 4. 디자인

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