Day19
Day19
Session Stroage
- 전체적으로는 Local Storage와 같다.
- 브라우저(탭)를 닫으면 저장된 내용이 초기화된다.
Simple Todo App에 Local Storage 붙이기
- App.js에서 데이터를 저장할 때 Local Storage에도 저장하게 한다.
- initialState를 LocalStorage에서 가져오게 하여 새로고침 하여도 기존 내용이 유지되도록 한다.
👉 외부 툴을 이용하여 json string을 올바르지 않은 형태로 바꾸면 실행이 안된다.
👉 따라서 LocalStorage에 접근할 수 있는 스크립트 파일을 만들어서 거기서만 접근하도록 한다.
👉 특히나 Local Storage를 초기화하는 코드를 제대로 짜두지 않으면 Local Storage 용량 제한에 걸려서 화면이 하얗게 나와버릴 수 있다.
👉 따라서 setItem하는 코드를 try-catch문으로 감싸서 예외 상황에서도 잘 동작하도록 처리를 해주는 것이 중요하다.
Module
import:export키워드로 내보내진 변수, 함수 등을 불러올 수 있는 키워드
- 한 파일에 하나의 컴포넌트, 컴포넌트는
export default로 내보내고 가져온다.
- 위와 같은 방법으로 export 된 모든요소 중에서 필요한 요소들만 불러올 수 있다.
- import를 사용하면 스크립트 의존성을 훨씬 간편하게 관리할 수 있다.
- 의존성이 관리되어야 프로젝트가 커졌을 때 사용되지 않는 스크립트를 바로 찾을 수 있다.
Simple Todo List App 에 모듈화 적용해보기
- 컴포넌트의 경우 export default로 고정
- 각 JS별로 사용되는 모듈을 명시적으로 import 한다. 👉 사용되거나 사용되지 않는 스크립트를 추적할 수 있다.
- script 태그로 로딩하는 경우 불러오는 순서가 중요하지만 import는 순서와 무관하게 불러올 수 있다.
- import를 사용하려면 웹 서버가 필요하다.