2. localStorage / Typescript

[B0XERCAT]

localStorage / Typescript

데이터를 임시로 저장할 수 있는 localStorage와

Javascript에 type을 입힌 Typescript에 대해 알아봅시다!

1. localStorage

데이터베이스가 없어도 데이터를 저장할 수 있는 방법이 localStorage입니다.
데이터를 (key: value) 쌍으로 저장할 수 있으며
새로고침을 해도 데이터가 날라가지 않습니다!

필수 공부 자료

자바스크립트 튜토리얼 localStorage

실습 과제

Study Detail 페이지를 만들어 봅시다!

Issue 번호가 10번인걸 이용해서 브랜치 생성해주세요!

HTML과 CSS는 진짜 진짜 간단하게 구성했습니다!

6w
├── index.html
├── main.js
├── reset.css
├── study
│   ├── index.html
│   ├── main.js
│   └── style.css
└── style.css

위와 같이 study/index.html로 Detail Page는 하나만 만들어서 공통으로 사용합니다!

Main Page에서 Study Card를 클릭했을 때, 해당 카드의 정보들을 localStorage에 저장하고
/study 로 이동해서, localStorage에 담긴 정보들을 보여줄 수 있게 구현해주세요!

즉 카드를 클릭했을 때

1. window.localStorage.setItem으로 study 정보 저장
2. /study 로 이동

이 실행되어야 합니다.

그리고 /study 에서는 localStorage.getItem으로 정보를 가져와서 뿌려주면 되겠죠?

2. Typescript

Javascript에서 아래의 코드를 실행하면 결과가 무엇일까요?

console.log(1 + '1');

정답은 놀랍게도 '11' 입니다.

이처럼 Javascript는 type에 대해 굉장히 느슨하기 때문에 예기치 못한 에러가 발생할 수 있습니다.

이를 방지하기 위해 사용하는 것이 Typescript입니다!
Typescript로 type과 관련된 error를 잡아내고 Javascript로 컴파일해서 사용하면 훨씬 안전하겠죠?

필수 공부 자료

코딩애플 타입스크립트
타입스크립트 핸드북

• Usage 부분은 안 보셔도 됩니다!

실습 과제

.js로 작성한 파일을 .ts로 바꾸고 type을 입혀주세요!

1. npm으로 typescript 설치

npm init -y
npm i typescript -D

• 만약 npm 이 안된다면 node가 설치되었는지 확인해주시고 최신 버전으로 설치해주세요!

2. .gitignore 파일 생성

• node_modules 를 파일에 입력해주세요.
• node_modules를 github에 올리지 않기 위해, git에서 무시할 폴더 혹은 파일 목록에 등록하는 과정입니다!

3. tsconfig.json 파일 생성

{
  "compilerOptions": {
    "allowJs": true,
    "target": "ES5",
    "outDir": "./dist",
    "moduleResolution": "Node",
    "lib": ["ES2015", "DOM", "DOM.Iterable"]
  },
  "exclude": ["node_modules", "dist"],
  "strict": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "strictBindCallApply": true,
  "strictPropertyInitialization": true,
  "noImplicitThis": true,
  "alwaysStrict": true
}

4. js 파일을 ts 파일로 바꾸고 정적 타입 입히기
   type과 interface를 이용해서 정적타입을 입혀주세요!
5. tsc로 ts 파일을 js로 컴파일

npx tsc main.ts study/main.ts

폴더 구조는 다음과 같습니다

6w
├── node_modules
├── index.html
├── main.js
├── main.ts
├── package-lock.json
├── package.json
├── reset.css
├── study
│   ├── index.html
│   ├── main.js
│   ├── main.ts
│   └── style.css
├── style.css
└── tsconfig.json