문제 상황 검색 기능을 개선하는 과정에서, 검색창을 모달로 구현하기로 결정함. 모달이 나타나면, backdrop 을 만들어 배경을 흐리게 만들고 싶었음. 이렇게! 이 과정에서 모달 내의 input 이 아닌 모달의 외부 영역(backdrop)을 클릭한 경우, 모달이 닫히는 기능을 구현하고자 함. 이를 위해서는 useRef 를...

목적 블로그 이전을 위해, Next.js 와 React Router v7 과 Astro 를 놓고 고민하다 Astro 를 선택하기로 함. Astro..? 검색하면 차은우 그룹이라는 내용만 나오는데요? 나도 처음엔 그랬다. astro 프레임워크 라고 검색하니 그제서야 나왔다. 이제는 astro 라고 검색해도 바로 상단에 노출이 되지만, 여전히 아...

블로그 개발자의 길을 걷기로 결정하면서, 블로그를 통해 일지를 남기는 것을 가장 중요하게 생각했다. 그래서, 어떤 플랫폼에서 블로그를 운영할지 많이 고민했었다. 티스토리, 벨로그, 미디움 등 여러 플랫폼에 가입도 해보고 글도 작성해보았었다. 처음에 선택했던 것은 미디움이었는데, 영어권 개발자들이 많이 이용을 하고 있어서 교류할 수도 있다는게 장점 ...

로그인 기능을 구현해본 적이 없어, 이번에 간단한 프로젝트를 통해 구현해보려고 한다. 물론, BaaS 를 이용해 구현하는 것이긴 하지만 직접 기능을 구현해보는 것에 의의가 있으니 빠르게 해보도록 하자. 전체적인 구현은 Supabase Auth 의 공식문서를 따라 진행할 예정이다. 인증(Authentication)과 인가(Authorization) ...

이번에는 직접 Sign-in 기능을 구현해보도록 하자. 그에 앞서, Supabase 에서 OAuth 를 구현할 때는 2가지 방법이 있다. Application code configuration Google pre-built configuration 1번의 경우, 로그인 버튼을 내가 직접 만드는 것이다. 2번의 경우, 미리 만들어진 로그인...

타입스크립트의 예약어 중 하나인 infer 를 통해 컨디셔널 타입과 함께 타입 추론을 극한까지 활용할 수 있다. infer type El<T> = T extends (infer E)[] ? E : never; type Str = El<string[]>; // type Str = string type NumOrbool = El&...

이번엔 함수 / 메서드의 타이핑에 대해 알아보자. 타입스크립트에서는 함수를 타이핑하는 방법을 여러 개 제공하고 있어, 한 번 다뤄볼 필요가 있다. 함수 타이핑 매개변수 타이핑 function example (a: string, b?: number, c = false) {} example('hi', 123, true); example('hi', ...