JavaScript (3) 썸네일형 리스트형 [Next.js] API 통신 흐름 - API Routes, route.js, page.jsx (Promise, fetch, await) ✏️ 흐름[Client] ----> [/api/test] ----> [Backend API] (page.jsx) (route.js) (실제 데이터 처리)클라이언트가 백엔드 API와 직접 통신하지 않도록 중간 서버(Next.js의 API Routes)를 두어 인증 및 데이터 요청을 처리하는 Next.js 애플리케이션 설계 📒 핵심 개념 요약Next.js API Routes: 클라이언트와 백엔드 간의 중계 역할 수행route.js: 클라이언트가 직접 백엔드와 통신하지 않고, Next.js 서버를 통해 데이터를 요청하도록 만듦→ 이 방식을 통해 보안(인증 토큰 관리), API 통합 관리를 간소화할 수 있음page.jsx: Next.js의 클라이언트 컴포넌트, U.. [Next.js/Headless UI] Components Button 만들기 (디자인과 기능 분리, 커스터마이징) 들어가며✍️ Headless UI아래에서 구현한 버튼을 통해 프로젝트 전반에서 재사용 가능한 컴포넌트를 구축하고, 디자인과 기능을 분리하는 경험을 쌓고자 했습니다.💭 초기 목표토글: 사용자가 나의카드에서 상태를 쉽게 전환할 수 있도록 합니다.기본 버튼: 링크 연결 및 페이지 이동 기능을 제공합니다.Submit 버튼: 폼 제출을 구현합니다.🖼️ 현실Headless UI를 기반으로 다음과 같은 버튼 컴포넌트를 설계하고 구현하였습니다.각 버튼의 특성을 유지하면서도 커스터마이징할 수 있도록 작업했습니다. (버튼 내용: children) 1. MyToggle: 상태 변경을 위한 토글 버튼사용자의 상호작용에 따라 상태를 변경하는 버튼입니다.Headless UI의 Switch 컴포넌트를 활용하여, 상태 변화에 따.. OAuth 2.0 구현 실습 - 로그아웃 기능 프로세스 (CSR, SSR, Next.js, Keycloak) 들어가며ℹ️ CSR과 SSR의 개념을 명확히 이해하고 있어야 합니다.CSR: 페이지가 클라이언트 측에서 로드되고, JavaScript가 실행되어 동적으로 콘텐츠를 생성합니다. 이 과정에서 사용자는 브라우저의 개발자 도구를 통해 DOM을 조작하거나 API 요청을 변경하는 등 다양한 조작을 할 수 있습니다. (useState, useEffect 등 사용 가능)SSR: 페이지가 서버에 렌더링되어 클라이언트에 전달되므로, 초기 로딩 시점에서 완전히 렌더링된 HTML을 받습니다. 이 경우 클라이언트에서 직접적인 조작이 제한적이며, 주로 서버와의 상호작용을 통해 업데이트됩니다. 1. OAuth 2.0 구현 실습: 다음과 같은 순서로 진행하였습니다.1) 각 참여자 구현인가 서버: Keycloak리소스 서버: Spr.. 이전 1 다음
