YoungGyu Blog

2022-02-16 TIL

February 16, 2022

Fact

  • 알고리즘 DFS를 복습할 겸 재귀 함수 문제, 이진트리 문제, 부분집합 문제, 중복순열 문제를 풀었다.
  • 퀴즈 데이터를 받아오지 못할 시 에러 컴포넌트를 만들고 해당 컴포넌트를 출력하도록 구현했다.
  • 로그인, 회원가입 실패 시 에러 메시지 컴포넌트를 출력하도록 구현했다.
  • 로그인을 안 하고 퀴즈를 클릭할 경우 login 페이지로 넘어가도록 구현했다.
  • 로그인 페이지에서 새로고침을 누를 경우 자동완성 상태에서 로그인 버튼을 누르면 ”이메일을 입력하세요” 유효성 검사 메시지가 나온다. register와 onChange를 같이 사용한 문제였다.
  • react-spinners를 사용해서 로그인 버튼을 누를 경우 완료가 될 때까지 로딩 상태를 구현했다.

Feelings

  • 알고리즘 풀 때 fill을 항상 조심하자.

아래와 같이 배열을 복사하면 얇은 복사가 된다. 얇은 복사를 하면 새로운 메모리에 할당되는 게 아니라 기존에 있던 메모리에서 값만 바뀐다.

let arr = Array(M).fill(0)

Findings

문자열은 원시타입인데 어떻게 length 프로퍼티를 가질수있을까? 자바스크립트는 문자열의 프로퍼티에 접근할 때 내부적으로 문자열 값을 가지고 임시 객체로 변환합니다. 그리고 프로퍼티 접근이 종료되면 생성된 객체는 제거됩니다. 이런 과정을 박싱(Boxing)이라고 부릅니다. 숫자와 불리언타입 다 동일합니다. 박싱 과정에서 생성되는 임시 객체를 랩퍼 객체라고 합니다.

const str = 'javascript'
console.log(str.length) // 10

아래처럼도 사용할수있다.

const str = 'javascript'
console.log([...str]) // ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']


아래처럼 Spinner컴포넌트를 따로 만들고.

import ClipLoader from 'react-spinners/ClipLoader'

const Spinner = () => {
  return (
    <Container>
      <ClipLoader size={100} color="#CC3D3D" />
    </Container>
  )
}

아래처럼 컴포넌트로 가져와서 사용할수있다. 로그인이 끝나면 loding 상태를 변경해주도록하자.

import Spinner from '../components/modals/Spinner'

const Login = () => {
  const [loding, setLoding] = useState(false)
  return (
    <>
      <button onClick={() => setLoding(true)}>버튼</button>
      {loding && <Spinner />}
    </>
  )
}

Future Action

  • 달리자.
Lee YoungGyu