트위터 클론코딩 Day2 [20210920]

9592 단어 클론코딩TILTIL

JavaScript 오늘의 날짜 구하기(현재년도와 시간, 날짜를 구하는 방법)

new Date() 객체를 선언하고 그 뒤에 원하는 메소드를 사용하면 내가 원하는
연도, 시간, 날짜, 일을 구할수 있음.

바로 사용할거면 객체 선언하지않고 바로 new Date().메소드()를 사용해서 바로 사용할 수 도 있음.

  1. getFullYear() --> 날짜의 현지 시간 기준 연도를 반환
new Date().getFullYear()
  1. getMonth()-> 날짜의 현지 시간 기준 월을 반환 단, 0부터 시작하므로 +1을 해줘야 내가 원하는 월이 나옴.
new Date().getMonth() + 1
  1. getDate() --> 날짜를 출력하는 함수
new Date().getDate()
  1. getDay() --> 요일을 출력하는 함수이며 요일이나오는것이 아닌 결과는 숫자로 나온다.
    결과가 1일경우는 월요일을 의미.
new Date().getDay()

event.PreventDefault()

prevent라는 영어 단어의 뜻은 예방하다라는 의미이며
해당 이벤트를 사용하면 현재 이벤트의 기본 동작을 중지한다는 의미이다.
즉, 내가 직접 이벤트를 컨트롤 하게끔 default동작을 막겠다는 의미이다.

만약 form에 onSubmit(이벤트리스너)을 사용해여 서브밋을 해버릴 경우,
웹 페이지가 새로고침이 되면서 입력하였던 모든 내용이 사라지고 새로고침이 되어버리는데(그것이 기본동작)
이렇게 되면 우리가 작성하였던 react코드가 사라지게됨 (state포함)

그래서 이번 트위터 클론코딩에서는 onSubmit을 클릭하였을 경우, 코드가 사라지는것을 방지하기위해,
event.preventDefault()를 사용하여 기본동작을 중지시키는 것.

const onSubmit = async (event) => {
    event.preventDefault(); //이것을 사용하지 않으면 input type submit을 누르는 순간 입력하였던 email과 password가 사라지고 새로고침이 되어버림 
    //새로 고침이 되면 우리의 react코드도 사라짐 , state도 포함
    //prevent의 뜻은 예방하다
    //preventDefault(): 현재 이벤트의 기본 동작을 중지하는 것이다.
  
    <div>
      <form onSubmit={onSubmit}> {/* onsubmit : form 태그 안에서 form전송을 하기 전에 입력된 데이터의 유효성을 체크하기 위해 사용하는 이벤트. */}
        <input name="email" type="email" placeholder="Email" required value={email} onChange={onChange} />
        <input name="password" type="password" placeholder="Password" required value={password} onChange={onChange} />
        <input type="submit" value={newAccount ? "Create Account" : "Log In"} />
        {error}
      </form>
      <span onClick={toggleAccount}>{newAccount ? "Sign in" : "Create Account"}</span>
      <div>
        <button name="google" onClick={onSocialClick}>Continue with Google</button>
        <button name="github" onClick={onSocialClick}>Continue with Github</button>
      </div>
    </div>

react spa Redirect

router, switch, route와 같이 사용되며
Redirect의 경우 하래와 같이 사용된다.
: 요청 경로를 다른 경로로 리다이렉션한다

  <Route exact path="/">
              <Home />
            </Route>
            <Route exact path="/profile">
              <Profile />
            </Route>
            <Redirect from="*" to="/" />

만약 코드가 상기와 같다고 한다면
/ 요청으로 들어올때는 Home컴포넌트를 실행
/Profile로 요청이 들어올때는 Profile이라는 컴포넌트를실행
그 이외의 요청이 들어올 경우 / 요청으로 리다이렉션 한다.

좋은 웹페이지 즐겨찾기