전체 글 (150) 썸네일형 리스트형 [CAMKEEP]트러블슈팅-로그인·로그아웃 토큰 쿠키 처리 with RSC 1. 원래 의도앱 라우터 환경에서serverSupabase() (SSR용) → 서버 액션/Route Handler에서만 호출browserSupabase() (Client) → 브라우저에서 호출서버 액션(loginAction, logout)만 써서 쿠키 읽기·쓰기까지 자동 처리// 서버 액션 예시"use server";import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";import { cookies } from "next/headers";export async function loginAction(formData: FormData) { const supabase = createRouteHandlerClient({ cookies.. [CAMKEEP]트러블 슈팅 모달 + API(인증·RLS)vs 동적 세그먼트 + Server Action 보호되어 있는 글입니다. CAMKEEP 트러블슈팅 보호되어 있는 글입니다. [소프트웨어 아키텍처]FSD src/├─ app/│ ├─ auth/│ │ ├─ page.tsx│ │ └─ layout.tsx│ └─ product/│ └─ page.tsx├─ features/│ ├─ auth/│ │ ├─ action/auth.action.ts│ │ ├─ model/auth.model.ts│ │ └─ ui/│ │ ├─ AuthLoginForm.tsx│ │ └─ hooks/use-auth-form.ts│ └─ product/│ ├─ action/product.action.ts│ ├─ model/product.model.ts│ └─ ui/│ └─ ProductList.tsx├─ entities/│ └─ user.ts└─ shared/ .. [CS 기초] Next.js 14에서 Server Actions과 기존 API Routes의 차이점 * Pages Router: 기존 방식. pages/ 폴더 사용.* App Router: 최신 방식. app/ 폴더 사용. Next.js 13부터 도입 차이점 명확하게 구분하기항목Pages Router (pages/)App Router (app/)폴더 구조/pages/about.tsx/app/about/page.tsx레이아웃 지원 안 됨 (Layout 따로 관리)Layout 중첩 가능서버 컴포넌트 클라이언트 컴포넌트만 가능Server Component 기본데이터 패칭 방식getServerSideProps, getStaticProps서버 컴포넌트에서 직접 fetch 가능중첩 라우팅 불편폴더로 깔끔하게 지원Server Actions 사용 불가 App Router 전용 기능 // Pages Router 예시.. [CS 기초] 1티어_완전 기초 간단 정리! 1. HTML, CSS, JavaScript 기본 - HTML웹페이지의 뼈대를 만드는 언어입니다. 안녕하세요! 이것은 기본 HTML 예시입니다. - CSSHTML로 만든 뼈대에 스타일을 입혀주는 언어입니다.body { background-color: #f0f0f0; font-family: Arial, sans-serif;}h1 { color: blue;} - JavaScript웹 페이지에 생동감을 넣어주는 언어입니다. 사용자와의 상호작용, 데이터 처리 등을 담당합니다.// 버튼을 클릭하면 메시지를 보여주는 예시document.addEventListener("DOMContentLoaded", () => { const btn = document.createElement("button"); btn.. [HTML5] 시맨틱 태그란? 1. 시맨틱 태그란?시맨틱 태그는 HTML5에서 도입된 요소들로, 단순히 콘텐츠를 감싸는 용도(div나 span과 달리)가 아니라 문서 내 각 영역의 의미와 역할을 명확하게 나타내기 위해 사용됩니다.이렇게 명시적으로 의미를 부여하면, 개발자뿐 아니라 검색엔진이나 보조 기술(스크린 리더 등)이 문서의 구조를 쉽게 이해할 수 있습니다.2. 시맨틱 태그 사용의 목적문서 구조의 명료화코드 작성 시 각 영역의 역할(머리글, 내비게이션, 본문, 부가 정보, 바닥글 등)을 명확하게 분리하여 유지보수와 협업을 용이하게 합니다.검색엔진 최적화(SEO)검색엔진이 문서의 핵심 콘텐츠와 부가 콘텐츠를 구분하여 보다 정확한 인덱싱 및 결과를 제공할 수 있습니다.웹 접근성 향상보조 기술이 시맨틱 태그를 기반으로 콘텐츠의 흐름을 .. [라이브러리] shadcn-Accodion(토글ui) https://ui.shadcn.com/ Build your component library - shadcn/uiA set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.ui.shadcn.com샤드씨엔은 매우 간편한 라이브버리로, 위 공식문서에 나와있는대로 세팅하면 됩니다.지난 인턴생활하면서 가장 많이 활용한 라이브러리인데, 정리를 해볼까 합니다.React vite typescript 기반 개발을 할 때에 ui요소 중 Input, Button, Form, FormItem등 사용해봤지만 재미있던 건 Ac.. 이전 1 2 3 4 ··· 19 다음
