본문 바로가기

분류 전체보기65

전역 상태 관리 전역 상태 관리. 그 말대로 상태를 전역에서 한다는 뜻이다. 보통 우리가 state를 통해 상태 관리한다면 스코프 단위, 혹은 파일 단위다. 물론 props를 통해 자식 요소에게 해당 상태를 전달할 수 있으나, 코드가 늘어나고 props drilling이 지속되면 추후 어디에서 넘어 온 데이터인지 인지하기 어렵다. 따라서 전역으로 상태를 관리한다면 이를 방지하고 사용성도 높일 수 있다. 리액트 기본 기능인 context api가 있고, 라이브러리로는 한참 많이 쓰였던 redux, 최근 많이 쓰이는 recoil, mobx이 있으며 이 외에도 Jotai, swr, constate 등도 있다. context api 위에서 언급했듯 리액트에서 기본으로 제공하는 전역 상태 관리 기능이다. createContext.. 2022. 10. 9.
Throttling & Debouncing at Search 보통 쓰로틀링(Throttling)과 디바운싱(Debouncing)은 다른 개념이라 동시에 비교할 일이 없다. 그러나, 검색할 때는 흔히 비교되는 친구다. 단어 그대로 번역하면 쓰로틀링은 목을 조른다는 뜻이고, 디바운싱은 떨리지 않게한다는 의미다. 전혀 다른 의미 2개가 검색에선 비교대상인지 참 궁금해졌다. 검색은 보통 onChange를 통해 검색을 구현한다. onChange할 때마다 서버 데이터를 요청한다면 꽤 많은 트래픽이 발생한다. 회사 입장에선 모두 비용이다. 쓰로틀링과 디바운싱을 사용하면 이런 비용을 줄일 수 있다. Throttling 쓰로틀링은 그 뜻에서 착한해 무언가를 억제한다는 표현으로 된다. 검색 시 억제할 것은 역시 데이터 전송이다. 쓰로틀링은 onChange될 때마다 서버 요청하지 않.. 2022. 10. 4.
Lifecycle(feat. DOM) 컴포넌트는 각자 라이프사이클을 가지고 있다. 컴포넌트는 생성되고, 업데이트되고, 사라진다. 자세히 얘기해보자. 컴포넌트가 DOM에 끼워질 때 생성된다, 그리고 업데이트되면 DOM에 표시된 컴포넌트가 변한다. DOM에서 컴포넌트가 사라진다면 그 컴포넌트는 역할을 다한 셈이다. 라이프사이클(lifecycle) 나타나고 수정하고 사라지는 모든 것을 말하며, 리액트에서는 이 라이프사이클을 조절할 수 있다. (리액트 공식 문서에서는 생명주기라고 번역되어 있으나 실제 현장에선 라이프사이클이라 표현한다.) 사실 필자는 전에 라이프사이클과 관련 있는 글을 썼다. 바로 useEffect. useEffect가 컴포넌트의 라이프사이클을 조절하는 hook이었다. 함수형 컴포넌트는 라이프사이클을 useEffect로 조절하며, .. 2022. 10. 3.
Object.keys, values, entries, assign 알고리즘을 풀다보면 메서드가 은근 유용할 때가 많다. 물론 효율성을 따지지 않는다는 조건에서다. 초보라면 효율성이나 속도보다 일단은 풀어내는 게 중요하기 때문에 알고리즘에 익숙해지기 전까진 메서드를 사용하더라도 풀어내는 데 의의를 두는 게 좋다고 본다. 그런 점에서 이번엔 객체 메소드 중 keys, values, entries, assign 4가지를 정리하려고 한다. Object.keys() keys() 메서드는 객체 키값을 배열로 반환한다. const heart = { one: 'love', two: 82, three: true }; console.log(Object.keys(heart));// ["one", "two", "three"] Object.values() values() 메서드는 객체 값을 .. 2022. 10. 3.
다크모드, 작동한다. 다만... 무엇이든 아는 것에서부터 첫번째 포트폴리오인 자유게시판을 만들면서 다양한 시도를 하고 싶었고, 그중 첫번째는 다크모드였다. @media로 하는 건 어설프게 알고 있었기에 무턱대고 시작했다. 바로 아래 코드 처럼. prefers-color-scheme을 활용해 사용자의 화면 모드가 무엇인지 확인하고 그에 맞춰 내가 작업한 자유게시판의 태그와 클래스를 적어가며 적절한 색상을 부여했다. 다크모드, 작동한다. 다만... 배경은 물론 텍스트, 라인 등 다 색상을 다 맞췄다. 나름 색상 스타일도 지정해서 일일이 넣었다. 그리고 맥에서 라이트모드와 다크모드를 번갈아가면서 페이지가 변하는 모습을 보니 매우 뿌듯했다. 그리고 어디선가 본 흑백모드 전환 버튼이 떠올랐다. 그리고 그 토글 버튼을 만들기 위해 여러 블로그를 .. 2022. 10. 2.

티스토리툴바