210831 코드캠프 2일차

github에서 코드 가져오기

• git clone 주소 : git 홈페이지에 업로드된 코드 붙여넣기
• 다운로드 받은 코드는 거의 yarn dev가 안된다
• node_modules = 모듈 다운받은 라이브러리
• .gitignore = 깃 업로드 제외폴더 지정
• .gitignore 에서 node_modules제외 (모듈을 다 저장하면 파일크기가 너무 커지기 때문에)
• 그래서 node_modules 는 다운이 안됨
• yarn install로 모듈 설치해야함

컴포넌트의 변수 [State]

💻 기존

let token="123456" (저장)
document.getElementById().innerText = token (화면에 보여주기)

💻 State 는 저장과 화면에 보여주기를 한번에 해준다

const [ state, setState("apple"] = useState()
const [ 변수이름, 저장을 도와주는 도구("저장할 내용")] = useState("초기값")

💻 변경

const [token,setToken("123456")] = useState()

💻 맨위에 꼭 react에서 import 해오기

import { useState } from "react";

인증번호만들기 (State 사용)

인증번호 6자리 "000000"과 "인증번호전송"이라는 버튼을 만들고, 버튼 클릭시 인증번호를 만들어서
인증번호 6자리가 변경되도록 적용해 주세요.
1-1) let과 document.getElementById()를 사용해 주세요.
1-2) state를 사용해 주세요.

📔 결과물

💻 js / html

import { useState } from "react";
export default function VerificationCode() {
  const [number, setRandom] = useState("000000");
  function aaa() {
    let Auth = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");
    document.getElementById("number").innerText = Auth;
  }
  return (
    <>
      <div id="number">{number}</div>
      <button onClick={aaa}>인증번호생성</button>
    </>
  );
}

📔 중요 포인트

• useState

import { useState } from "react"; 
// state 기능을 쓰기위해서 import
  const [number, setRandom] = useState("000000");
 // const[state이름, state저장도구] = useState("초기값")

• 6자리 인증코드함수

  function aaa() {
    let Auth = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");
    document.getElementById("number").innerText = Auth;
  }

입력창 하단에 에러 표시하기

📔 결과물

💻 html/js

import { useState } from "react";
import { Error } from "../../styles/signup-state";
export default function SignupStatePage() {
  const [email, setEmail] = useState("");
  const [emailError, setEmailError] = useState("");
  const [passwordError, setPasswordError] = useState("");
  const [password1, setPassword1] = useState("");
  const [password2, setPassword2] = useState("");
  function onChangeEmail(event) {
    setEmail(event.target.value);
  }
  function onChangePassword1(event) {
    setPassword1(event.target.value);
  }
  function onChangePassword2(event) {
    setPassword2(event.target.value);
  }
  function onClickSignup() {
    if (!email.includes("@")) {
      setEmailError("@가 없습니다!");
    }
    if (password1 !== password2) {
      setPasswordError("비밀번호가 다릅니다!");
    }
  }
  return (
    <div>
      이메일: <input type="text" onChange={onChangeEmail} />
      <br />
      <Error>{emailError}</Error>
      {/* 이모션으로 색과 사이즈 변경하기 */} 
      비밀번호: <input type="password" onChange={onChangePassword1} />
      <br />
      비밀번호확인: <input type="password" onChange={onChangePassword2} />
      <br />
      <Error>{passwordError}</Error>
      <button onClick={onClickSignup}>회원가입하기</button>
    </div>
  );
}

💻 css

import styled from "@emotion/styled";
export const Error = styled.div`
  color: red;
`;

📔 중요 포인트

• useState 지정하기

const [email, setEmail] = useState("");
const [emailError, setEmailError] = useState("");

• event 함수 지정

function onChangeEmail(event) {
    setEmail(event.target.value);
}

• onClick 함수 if문 만들기

function onClickSignup() {
  if (!email.includes("@")) {
    setEmailError("@가 없습니다!");
    }
}

• onChange 지정

onChange={onChangeEmail}

• 에러문장 넣기

<Error>{emailError}</Error>

게시물 등록창만들기 2일차

📔 결과물

💻 html/js

export default function BoardsNewPage() {
  const [writer, setWriter] = useState("");
  const [writerError, setWriterError] = useState("");
  //useState 부분
  function onChangeWriter(event) {
    setWriter(event.target.value);
  }
  // event를 지정해줘야한다.
  function onClickCorrect() {
    if (writer == "") {
      setWriterError("입력되지 않았습니다!");
    }
  }
  // 작성자에 값이 비어있으면 오류를 뜨게하는 함수
  return (
        <TextWrapper>
          <Label>작성자</Label>
          <Writer
            name="writer"
            type="text"
            placeholder="이름을 적어주세요."
            onChange={onChangeWriter}
          />
          <Error>{writerError}</Error>
        </TextWrapper>
        <SubmitButton onClick={onClickCorrect}>수정하기</SubmitButton>
  )

💻 css

import styled from "@emotion/styled";
export const Wrapper = styled.div`
  width: 1200px;
  padding-top: 60px;
  padding-right: 100px;
  padding-left: 100px;
  padding-bottom: 100px;
`;
// 전체 페이지라서 height를 안 주고 width 만 주었다.
export const Address = styled.input`
  width: 996px;
  height: 52px;
  border: 1px solid #bdbdbd;
  cursor: pointer;
  margin-top: 16px;
`;
// margin-top으로 여백간격을 통일 시켰다.

📔 중요 포인트

• 전체 페이지(Wrapper) 높이height 고정하지 않기

개별로 높이 주기
이유) 전체 페이지 높이를 고정해버리면 아래로 내려가면서 삐쭉삐쭉 나옴
고정안하면 자연스럽게 길어짐

• 각각 margin-top 으로 간격 통일하기

  
  

• 굳이 이모션 필요없으면 안해도 된다

<UploadButton>
	<div>+</div>
    <div>Upload</div>
</UploadButton>

• button 관련 명령어

cursor: pointer; /*-> 마우스를 대면 손가락모양으로 바뀜*/
: hover{ background-color: red;} /* -> 마우스를 대면 색깔이 달라짐*/