TIL - 2022.02.18 금요일

오늘 배운 것

---

1. 브라우저 저장소

브라우저 저장소에는 총 세 가지 종류가 있다. Cookie, LocalStorage, SessionStorage

종류	Cookie	LocalStorage	SessionStorage
비고	브라우저를 종료해도 데이터가 유지된다. 단, 만료 기한까지만 저장됨.	브라우저를 종료해도 데이터가 유지된다.	새로고침해도 데이터가 유지되지만, 브라우저를 종료하면 데이터가 사라진다.

localStorage.getItem("key") // localStorage
sessionStorage.getItem("key") // sessionStorage
document.cookie // Cookie

세가지 저장소 모두 브라우저에 저장된 정보를 위와 같은 코드로 쉽게 읽어올 수 있다. 따라서 보안상 민감한 정보는 브라우저 저장소에 저장하지 않는 편이 좋다. 단, 쿠키로 데이터를 전송하는 경우에는 옵션 설정을 통해 이러한 문제를 어느정도 방지할 수 있다. 쿠키의 옵션에는 httpOnly, secure등이 있으며.. 이 부분은 차후 배포 공부할 때 다시 훑기로.

 

2. typescript 제네릭 타입

타입 정보가 동적으로 결정되는 타입. 타입에 유연성을 제공해서 컴포넌트 재사용성을 높이는 것에 도움을 준다. string, number처럼 고정된 타입이 아니라, input에 따라 output의 타입이 결정되는 형식. 어제 공통 컴포넌트를 분리하면서 타입스크립트 때문에 고생했는데, 제네릭 타입이 그 때 발생한 이슈 중 하나에 대한 해답이 됐다.

제네릭 타입을 이용해서 handleModalClose의 빨간 밑줄을 없앴다. 뿌듯 

 

제네릭 타입 참고 링크들 : 

https://velog.io/@mokyoungg/TS-%EC%A0%9C%EB%84%88%EB%A6%ADGeneric

[TS] 제너릭(Generic)

https://joshua1988.github.io/ts/guide/generics.html

제네릭 | 타입스크립트 핸드북

 

3. 중고마켓 (오늘의 집 디자인 레이아웃 클론)

내 중고마켓 (작업 진행중)

- 오늘은 상세페이지 슬라이더만 먼저 잡았다. react-slick의 custom-paging 기능을 이용해서 미리보기 버튼 dots도 구현했다.

- 한정된 API 데이터로 텍스트 부분을 어떻게 채울까 고민중이다. 테마로 잡은 오늘의 집은 정보량이 많은 편이라 지금 내가 쓰고 있는 중고게시판 API의 필드 수와 갭이 심하다. 하드코딩으로라도 최대한 채워놔야 하나, 아니면 API에서 받아올 수 있는 데이터만 활용해서 있어보이게 꾸미는 방법을 궁리해야하나..

오늘의 집 스토어 상세페이지

 

앞으로 할 것

---

주말에 끝내야 할 일이 많다.. 우선순위별로 정리해봤다.

1. 로컬 스토리지를 이용한 비회원 장바구니 구현 연습 (+ 로그인 후 장바구니 페이지에 접속했을 경우의 분기도 구현 go)
2. 상세페이지 구현
3. 수정/삭제 기능 구현
4. 상품 목록 페이지 구현
5. 로컬 스토리지를 이용해서 '오늘 본 상품' 목록 구현
6. 상품 상세페이지의 질문/답변 기능 구현 (댓글/대댓글 구현으로 생각하면 편함)

✨ 화.. 이팅! ✨