신입개발자_장민기

import Button from "./Button"; import styled from "styled-components"; const StyledH1 = styled.h1` color: red; `; export default function App(){ const text_color="purple"; const text_font_size = "16px"; return( App A B ) } import styled from "styled-components" //1. html태그에 스타일 적용 ==> styled.태그명 ``형식 const StyledButton = styled.button` color: ${(props) => props.button_color || "blue"}; backgroun..

import Button from "./Button"; import styled from "styled-components"; const StyledH1 = styled.h1` color: red; `; export default function App(){ const text_color="purple"; return( App A B ) } import styled from "styled-components" //1. html태그에 스타일 적용 ==> styled.태그명 ``형식 const StyledButton = styled.button` color: ${(props) => props.button_color || "blue"}; background-color: yellow; font-size: 16p..

import Button from "./Button"; import styled from "styled-components"; const StyledH1 = styled.h1` color: red; `; export default function App(){ return( App A B ) } import styled from "styled-components" //1. html태그에 스타일 적용 ==> styled.태그명 ``형식 const StyledButton = styled.button` color: blue; background-color: yellow; font-size: 16px `; export default function Button({children}){ return( {childre..

내부파일 import "./App.css"; export default function App(){ //css설정, json, camel표기법 const btnStyle = { color: "while", backgroundColor: "teal", border: "1px solid teal", fontSize: "16px", } return( App Inline ) } 외부파일 import "./App.css"; import "./Button.css" export default function App(){ //css설정, json, camel표기법 return( App Inline ) } .btn{ color: "while"; background-color: "teal"; border: "1px sol..

import { useState } from "react"; export default function Login() { const [inputs, setInputs] = useState({ email: "", password: "", }); //유효성 체크 const [didEdit, setDidEdit] = useState({ //입력상태 저장 상태변수 email: false, password: false, }) //유효성 조건 지정 const emailIsInvalid = didEdit.email && !inputs.email.includes("@"); //이메일에는 @가 반드시 포함 const passwordIsInvalid = didEdit.password && !(inputs.password...

export default function Login() { function handleSubmit(event){ event.preventDefault(); const fd = new FormData(event.target); const email = fd.get("email"); const password = fd.get("password"); const address = fd.get("address"); console.log(email, password, address) } return ( Signup Email password address address2 Login ); }

import { useState } from "react"; export default function Login() { const [inputs, setInputs] = useState({ email: "", password: "", }); function handleInputChange(identifier, value) { setInputs({ ...inputs, [identifier]: value }); } function handleSubmit(event) { event.preventDefault(); console.log(inputs); } return ( Login email handleInputChange("email", event.target.value) } > password handle..

일단 대기

import MainNavigation from "../components/MainNavigation" import { useRouteError } from "react-router-dom" //추가 export default function Error(){ const error = useRouteError(); console.log("error: ", error) console.log("error: ", error.data.status) console.log("error: ", error.data.message) let title = "An error occurred!!"; let message = "Something went wrong!!" if(error.data.status === 500){ me..

import { Outlet, useNavigation } from "react-router-dom"; //추가 import MainNavigation from "../components/MainNavigation" export default function RootLayout(){ const navigation = useNavigation(); //추가 return( {navigation.state === "loading" && loading...} {/* {navigation.state === "loading" && alert("테스트용")} */} ) }