본문 바로가기

FE54

NoSQL vs SQL SQL(Structured Query Language)과 NoSQL(Non Structured Query Language)은 데이터베이스다. 데이터베이스를 이루는 방식이 테이블과 관계형이라면 SQL, 문서와 비관계형이라면 NoSQL이라 부른다. 이름에서 알 수 있는 SQL이 먼저 생긴 데이터베이스 구조고, 후에 생긴 게 NoSQL이다. SQL 데이터베이스를 구축한다면 사람들이 기본으로 생각하는 구조가 바로 SQL이다. 데이터베이스의 근간이자 오랜 기간 사용했기 때문이다. 우리가 아는 엑셀을 떠올리면 이해하기 쉽다. 데이터베이스 구조는 테이블로 이뤄져 있고 해당 테이블이 다른 테이블과 서로 관계를 맺으며 형성하기 때문에 관계형 데이터 베이스라 부른다. 모형은 IBM이 개발했으며, 여러 분야에 걸쳐 현재 가.. 2022. 10. 11.
정규 표현식 정규 표현식. 처음 들었을 때부터 무슨 말인지 몰라 사전부터 찾아봤다. 국어사전엔 역시 없으니 위키백과 찾아봤다. 정규 표현식(正規表現式, 영어: regular expression, 간단히 regexp 또는 regex, rational expression) 또는 정규식(正規式)은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 특정한 문자열을 가진 집합. 이게 핵심이었다. 다양한 프로그래밍 언어에서 지원할 정도로 정규 표현식은 그 쓰임이 많다. 프로그래밍은 패턴을 가지고 그룹화하는 게 기본이기 때문이다. 특히 함수형 프로그래밍에서는 더더욱 그룹화는 중요하다. 프론트엔드를 배우는 나로서는 이 정규식을 어디에서 주로 사용하는 지 찾아봤다. 생각외로 많진 않았다. 주로 텍스트 검증단계.. 2022. 10. 10.
전역 상태 관리 전역 상태 관리. 그 말대로 상태를 전역에서 한다는 뜻이다. 보통 우리가 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.

티스토리툴바