회고

Next.js에서 앱 라우터를 사용할 때, 요청(Request) 및 응답(Response) API를 사용하여 특정 라우트(Route)*에 대한 커스텀 요청 핸들러(request handler)를 작성할 수 있다. 이를 라우트 핸들러(Route handlers) 라고 부른다. * API(Application Programming Interface): 애플리케이션 프로그래밍 인터페이스를 뜻하며, 소프트웨어 간에 데이터를 교환할 수 있도록 하는 규칙이나 프로토콜  * 라우트(Route) : 웹 애플리케이션에서 특정 URL 경로. 이 글에서는 주로 통신할 서버 URL(슈퍼베이스 등)라우트 핸들러 사용 규칙 1. 앱(app) 폴더 안에서만 라우트 핸들러가 작동되며 라우트(route) 파일로 정의할 수 있다.  2..

supabase란?Supabase는 개발자가 애플리케이션에 필요한 모든 데이터를 저장하고 관리할 수 있는 신뢰할 수 있는 데이터베이스를 제공한다. 이는 효율적이고 확장 가능한 데이터 관리를 위한 다양한 기능을 포함하고 있다. (유사 사이트 - Firebase, Pocktebase)또한 supabase는 모든 것이 오픈 소스이며, 가능한 한 모든 도구를 처음부터 개발하는 대신 기존 도구를 사용하고 지원한다는 특징을 가지고 있다. 이 글에서는 자세히 다루지 않겠다. 이 글의 요지는 supabase에서 조직을 만들고, 기본 데이터베이스를 만드는 최소한의 과정을 기술하는 것이다.  supabase에서 프로젝트 만들고 팀과 공유하기 로그인 이후 organization(조직)에서 project를 생성한다. 생성한 ..

CSR (Client-Side Rendering, 클라이언트 사이드 렌더링) 실행 흐름사용자 요청: 사용자가 페이지를 요청빈 HTML 전송: 서버는 빈 HTML 파일과 JavaScript 파일을 클라이언트로 전송클라이언트에서 데이터 fetching: 클라이언트(ex.크롬 브라우저)는 JavaScript를 실행해 필요한 데이터를 API 등에서 가져온다.클라이언트에서 렌더링: 클라이언트는 데이터를 사용해 페이지를 동적으로 렌더링한다.특징렌더링 위치: 클라이언트(브라우저)에서 렌더링.렌더링 시점: 사용자 요청 후 JavaScript 실행 시리액트의 기본 동작 방식. 클라이언트에서 데이터를 fetching( JavaScript 파일 다운로드 및 실행 , JavaScript  파일로부터 DOM을 렌더링)하는 과정..

컴포넌트 간 State 공유하기 : 끌어올리기지난 시간, 상위 컴포넌트에서 아래의 컴포넌트의 상태를 관리하기 위한 전략인 끌어올리기에 대해 간략히 설명했다. 이번에는 예시를 통해 상태를 끌어올리는 과정을 확인해보자.Accordion이 두 개의 Panel을 렌더링하는 예시AccordionPanelPanel각 Panel 컴포넌트는 콘텐츠 표시 여부를 결정하는 Boolean형 isActive 상태를 각각 가지고 있다.import { useState } from 'react';function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( {title} {isActive ? (..

pnpm이란?pnpm(Performant Node Package Manager)는 주요 JavaScript 패키지 관리자 중 하나로, 2016년 Zoltan Kochan에 의해 Node.js JavaScript 런타임 환경을 위해 개발되었다.왜 pnpm을 사용해야 하는가?1. 디스크 공간 절약npm을 사용할 때 종속성을 사용하는 프로젝트가 100개 있는 경우 해당 종속성의 사본 100개가 디스크에 저장된다. 그러나, pnpm을 사용하면 의존성이 content-addressable 저장소에 저장되므로, 다음 단계가 진행된다.다른 버전의 의존성(dependencies)을 사용할 때, 다른 부분만이 저장소에 추가된다. 만약 100개의 파일이 있고, 새로운 버전이 해당 100개 파일 중에 한 파일의 변화만을 가..

상태컴포넌트는 컴포넌트 안에서만 접근 가능한 로컬 데이터인 "상태(state)"를 가질 수 있다. 이 데이터를 다른 컴포넌트와 공유하려면 React의 단방향 데이터 흐름에 따라 두 컴포넌트 보다 상위 위치에 자리 잡은 컴포넌트로부터 속성(props)으로 전달받아야 한다. 상태 관리 전략 : 끌어올리기React 컴포넌트 로컬 데이터인 상태를 관리하는데 사용되는 가장 주요한 전략 중 하나는 상태를 끌어 올리거나 끌어 내리는 것이다. 우선은 끌어올리기에 대해 알아보자.  상태 끌어 올리기(↑) 전략 A와 C는 상태를 관리 중이고, A는 B컴포넌트와 연관된 상태 관리 중. 만약 B가 C에서 관리 중인 State에 접근할 수 있어야 하고, C의 상태가 변경될 때마다 B에서도 변경된 값을 표시해야한다면, 현재 상황..