타입스크립트 교과서 교재를 통해 제대로 익히고 넘어가기로 마음을 먹었다. 간단히 시작해보자. TypeScript 란? TypeScript is JavaScript with syntax for types 어디까지나 타입스크립트는 자바스크립트다. 자바스크립트에 타입을 위한 구문이 추가되어있는 것, 이게 전부다! 간단히 예시로 살펴보자. c...

목적 이전에 @gather_here 프로젝트를 진행할 때, Github Oraganization 을 통해 협업을 진행했다. 하지만, 이 팀 프로젝트를 Vercel 로 배포하려고 하니 Pro 요금제를 사용해야만 가능하다는 것이었다. 개인 repo 로 fork 한 뒤 sync 를 맞추는게 귀찮기도 했고, 여러 명이 같이 작업하니 그냥 Pro 요금제를 ...

layout.tsx 를 이용해 컴포넌트 마운트 수 줄이기 전반적인 리팩토링을 진행했다. 먼저 Chat, Calender 컴포넌트가 페이지 이동마다 새로 마운트 되고 있는 것이 비효율적이라 생각했다. 그래서 useEffect 를 통해 페이지 이동 마다 mount 되는 것을 확인했다. 내가 담당한 Sidebar 영역도 하나의 컴포넌트로 만들어 코드를...

오늘은 간단하다. 오류를 고치느라 시간을 많이 썼는데, 그 중에서 좀 적을 만한 게 있었다. useEffect(() => { // 채팅 내역 불러오기 const getAllMessages = async () => { const { data, error } = await supabase .from("Messages...

현재 진행하는 프로젝트를 일단 배포하고 난 뒤, 콘솔창에서 여러 가지 오류를 발견했다. 이 오류 코드를 검색하니, 한 번씩은 겪는 오류인 것 같아서 그나마 다행이었다. 그런데, 특이한 것은 동일한 레이아웃을 사용하면서 로직도 동일한 4개의 페이지 중 한 군데에서만 나타나는 것이다… 일단 서버 사이드 렌더링을 기본 설정으로 하는 Next.js 에...

문제의 그 사진(?) 24 시간 만에 사용량이 폭발적이었다. 배포를 하긴 했지만, 실제 이용자는 아무도 없었다. 도대체 어느 바가지에서 이렇게 새는 걸까? 문제 자체는 vercel 을 통해 배포한 링크들이었다. 현재 팀 프로젝트 레포지토리를 제외하고, 무료 요금제를 사용할 때 배포 테스트를 하느라 개인 레포지토리로 fork 해서 만든 배포...

채팅 컴포넌트는 더 이상 손 대지 않아도 될 줄 알았다.. 하지만, 비즈니스 로직에 크나큰 위험성이 있었다. useEffect() 때문에 유료 결제까지 하게 되었으니 앞으로 정말 조심히 쓰자. 문제가 된 부분은 아래 부분이다. 정확히는 useEffect() 내부 동작이다. 채팅 기능의 핵심적인 부분인데, 테이블에 저장된 채팅 내역을 불러오는 역할을...