CODE_PLAN

간단히 요약하면

1. public 파일안에 있는경우

2. src 폴더안에 있는경우

를 생각해볼수있다. 

또한, 이미지는 자동완성이 안됨으로 경로를 일일히 지정해줘야한다 ex) ../../../example.jsx

+ require 를 사용해서 이미지를 보여주게 하는방법도 있다.

day1 - 현업자분의 설명 

각자 목표설정

그냥 useNavigate부분을 우선 주석처리 해주니까 풀리긴했다. 

로그인 방식에서 2개는 차이가 있는데 Session이 더 안정적이라고 판단이 들었습니다.

왜냐하면 간단히 말하면 로컬 스토리지는 데이터가 계속 저장되어서 보안이 취약한 반면에 세션 스토리지는 계속 저장되지 않기 때문입니다. 

두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다.

• setItem(key, value) – 키-값 쌍을 보관합니다.
• getItem(key) – 키에 해당하는 값을 받아옵니다.
• removeItem(key) – 키와 해당 값을 삭제합니다.
• clear() – 모든 것을 삭제합니다.
• key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
• length – 저장된 항목의 개수를 얻습니다.

참고) https://ko.javascript.info/localstorage

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-localStorage-sessionStorage

function is not iterable 이라는 에러가 나왔는데 개발자 도구를 통해서 잘 살펴보니 

저기 밑줄친 부분이 오류가 나있었다. 

useState 부분을 잘못작성했다고 깨달아서 () 괄호를 넣어주니까 정상적으로 실행이 되었다!

그냥 가운데 정렬할려면 힘들고 잘 안되니까 

div로 감싸서 하는것이 좋은것같다

1. 버튼태그를 div로 감싸기

2. div에 text-align: center; 속성주기

3. 버튼에 display :inline-block; 속성주기

사용하는 이유 

리액트에서는 최상위에 태그를 하나로 감싸줘야하는데 fragment는 메모리를 안쓰고 div태그 없이 태그를 감싸줄수있다.

<> </> 태그와 Fragments 의 차이점

ex) key가 있는 Fragments

Fragments에 key가 있다면 <React.Fragment> 문법으로 명시적으로 선언해야 합니다. 예를 들어 정의 목록을 만들기 위해 컬렉션을 fragments 배열로 매핑하는 사용 사례입니다.

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // React는 `key`가 없으면 key warning을 발생합니다.
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

참고) 

https://ko.legacy.reactjs.org/docs/fragments.html

.