초보 개발자의 성장 일기

장바구니나, 투두리스트 등을 state로 상태관리를 하다보면 새로고침할 때 데이터가 전부 사라진다. 데이터를 유지하기 위해서는 데이터를 저장하는 곳이 필요함을 느꼈다. 대표적인 방법으로는 쿠키와 로컬스토리지가 있다. 이 둘의 차이점은 무엇일까? 우선 쿠키는 최대 4KB의 용량을 가진 작은 데이터이다. 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용되고, 문자열만 저장할 수 있다는 제한이 있다. 사이트에서 제한된 인터넷 사용 기록을 기반으로 사용자 경험을 개선하는 것이다. 쿠키에는 크게 두가지의 종류가 있다. Seesion cookies: 만료일이 없고, 브라우저나 탭이 열려있을 때만 저장되며 브라우저가 닫히면 cookies는 영구적으로 삭제된다. Persist..

Grid Flex와 비슷하지만 행과, 열 2차원 레이아웃을 담당한다. display: flex; grid-template-columns: 398px, 398px, 398px; grid-column-gap: 19px; grid-row-gap: 32px; grid-template-columns는 세로로 몇개를 둘지, 한 개당 각각 column의 가로의 길이를 어떻게 설정할지 결정한다. grid-column-gap은 각 아이템 사이 세로(열) 간격을 설정한다. grid-column-gap은 각 아이템 사이 가로(행) 간격을 설정한다. grid-template-columns: repeat(3, 398px); repeat을 사용해서 398px을 3번 반복하도록 간결하게 나타낼 수 있다. 같은 컴포넌트가 반복이 되..

모달을 만들다보면, 폼의 옆에 생성이 되는데, 이 위치는 root의 안이다. 애플리케이션이 작다면 이렇게 해도 되지만, 현재 컴포넌트가 전체 애플리케이션의 위쪽에 위치해 있지 않고 다른 컴포넌트 안에 깊이 중첩되있기도 한다. 백드롭과 모달이 DOM의 다른 내용안에 깊이 중첩되버린다. 브라우저는 모달의 존재를 인식하지 못하고 구조적인 관점에서 모달이 맨 위에 있어야 하는 존재인지 인식하지 못한다.이때 렌더링 된 HTML을 Body 밑으로 모달을 옮기면 되는데, 이것은 Portal로 해결이 가능하다. 포털을 사용할 때 필요한 것 1. 컴포넌트를 이동시킬 장소 2. 컴포넌트에게 그 곳에 포털을 가져야한다고 알려주는 것 Potal 공식문서로 포탈을 살펴보면 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM..