개발 179 [Next] localstorage를 사용하는 방법 #1 localStorage 란? 웹 스토리지 객체(web storage object)의 한 종류로 sessionStorage와 함께 브라우내 내에 key-vale 쌍을 저장할 수 있도록 해주는 Web API입니다. Window.localStorage - Web API | MDN localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. developer.mozilla.org Why web storage | 영속성 web storage를 쓰는 가장 큰 이유는 영속성에 있습니다. localStorage는 브라우저가 다시 실행되어도 데이터가 사리지지 않고 남아있습니다. sessionStorage는 어떻냐구요?.. 2022. 1. 28. [VSCode] Prettier format on save 느려진 후기 들어가며 코드 컨벤션은 협업에 있어서 아주아주 중요합니다. 그러고 이런 컨벤션은 필연적으로 자동화가 되어야합니다. 그렇지 않고 사람의 수고가 개입되면, 수고스러움이 귀찮은 누군가각 컨벤션을 깨드리게 되며 그 이후에는 더욱 빠른 속도로 악화됩니다. ( 공유지의 비극 , repo는 공유지임으로 더욱 신경써야한다) 그래서 자동화를 위해 eslint와 prettier란 툴이 가장 많이 쓰입니다. 이번 글에선 그중에 prettier에 대한 간단한 설명과 함께 적용방법, 그리고 느려진 prettier의 원인을 찾아본 내용을 적어보겠습니다. Prettier 란? An opinionated code formatter - 코드 포멧터다 Supports many languages - 많은 언어를 지원한다. Integrat.. 2022. 1. 15. [Next] Tailwind CSS 도입 및 세팅(feat.Next 12) Tailwind CSS 란? 공식홈페이지의 설명을 살펴보겠습니다. "HTML에서 떠나는 일 없이 빠르게 모던한 웹사이트를 빌드해줄수 있게 하는 프레임워크" 라는 설명으로 시작합니다. 어떤걸 보여주는가 | BEM 전통적인 방식의 CSS 중에 유명한 것으로는 BEM이 있습니다. BEM은 Block, Element, Modifier의 앞글자들을 합친것으로 각각 __와 --로 구분합니다. .header__navigation--navi-text { color: red; } 이렇게 class를 통해 스타일을 정의하고 각각의 HTML element에 입히게 되는 구조입니다. 따라서 어떻게 보이는가 보다는 "어떤걸 보여주는가" 에 초점을 맞춘 방법론입니다. 예를 들자면 위의 CSS는 header 블록의 navigati.. 2022. 1. 5. [리액트] React.memo를 이용해 성능 최적화를 해보자 React.memo가 필요한가? 어느 때와 같이 기획문서를 보고( 실은 기획자가 없어서 뇌리에 스치는 게 기획) 컴포넌트를 만들고 있었습니다. 이번엔 차트와 관련된 컴포넌트를 구현하고 있어서, Plotly 라이브러리를 활용해 미리 만들어놨던 컴포넌트에 테스트를 붙이고 구현하고 푸시를 했습니다. 문제 인식 | 성능이 구려 푸시를 하면 일단 기분이 좋기 때문에 완성된 모습을 뿌듯하게 쳐다보고 있는데 자꾸 버벅이는 느낌이 들어 바로 파고들어가 봅니다. 콘솔 창을 열고 확인을 해보니 같은 요청이 여러번 날아가는 것을 확인했습니다. 데브툴로 봐도 같은 prop임을 확인했습니다. 같은 요청 & 같은 데이터 --> 여러번 랜더링 -> 잘못된 구조 --> 최적화라는 뇌피셜 로직이 수행되었고 바로 어떤 컴포넌트인지 확인.. 2022. 1. 3. 이전 1 ··· 12 13 14 15 16 17 18 ··· 45 다음
